Skip to content

GitLab

M
morpheus.js
Commit bb9e39e4 authored by Joshua Gould's avatar Joshua Gould
Browse files
Options

table width

parent ab56018b
Hide whitespace changes
Inline Side-by-side
Showing with 331 additions and 314 deletions
src/ui/checkbox_list.js
View file @ bb9e39e4
...@@ -38,7 +38,7 @@ morpheus.CheckBoxList = function(options) { ...@@ -38,7 +38,7 @@ morpheus.CheckBoxList = function(options) {
} }
var idColumn = options.columns[0]; var idColumn = options.columns[0];
for (var i = 0; i < options.columns.length; i++) { for (var i = 0; i < options.columns.length; i++) {
if (options.columns[i].isId) { if (options.columns[i].idColumn) {
idColumn = options.columns[i]; idColumn = options.columns[i];
break; break;
} }
...@@ -247,6 +247,7 @@ morpheus.CheckBoxList.prototype = { ...@@ -247,6 +247,7 @@ morpheus.CheckBoxList.prototype = {
}, },
on : function(evtStr, handler) { on : function(evtStr, handler) {
this.table.on(evtStr, handler); this.table.on(evtStr, handler);
return this;
}, },
off : function(evtStr, handler) { off : function(evtStr, handler) {
this.table.off(evtStr, handler); this.table.off(evtStr, handler);
......
src/ui/grid.js
View file @ bb9e39e4
morpheus.Grid = function(options) { morpheus.Grid = function (options) {
this.options = options; this.options = options;
var _this = this; var _this = this;
var grid; var grid;
...@@ -15,28 +15,28 @@ morpheus.Grid = function(options) { ...@@ -15,28 +15,28 @@ morpheus.Grid = function(options) {
} }
var model = { var model = {
getLength : function() { getLength: function () {
return _this.viewOrder != null ? _this.viewOrder.length return _this.viewOrder != null ? _this.viewOrder.length
: _this.items.length; : _this.items.length;
}, },
getItem : function(index) { getItem: function (index) {
return _this.items[_this.viewOrder != null ? _this.viewOrder[index] return _this.items[_this.viewOrder != null ? _this.viewOrder[index]
: index]; : index];
} }
}; };
this.$el = options.$el; this.$el = options.$el;
var gridOptions = $.extend({}, { var gridOptions = $.extend({}, {
select : true, select: true,
headerRowHeight : 0, headerRowHeight: 0,
showHeaderRow : false, showHeaderRow: false,
multiColumnSort : true, multiColumnSort: true,
multiSelect : false, multiSelect: false,
topPanelHeight : 0, topPanelHeight: 0,
enableTextSelectionOnCells : true, enableTextSelectionOnCells: true,
forceFitColumns : true, forceFitColumns: true,
dataItemColumnValueExtractor : getItemColumnValue, dataItemColumnValueExtractor: getItemColumnValue,
defaultFormatter : function(row, cell, value, columnDef, dataContext) { defaultFormatter: function (row, cell, value, columnDef, dataContext) {
if (_.isNumber(value)) { if (_.isNumber(value)) {
return morpheus.Util.nf(value); return morpheus.Util.nf(value);
} else if (morpheus.Util.isArray(value)) { } else if (morpheus.Util.isArray(value)) {
...@@ -59,46 +59,46 @@ morpheus.Grid = function(options) { ...@@ -59,46 +59,46 @@ morpheus.Grid = function(options) {
this.grid = grid; this.grid = grid;
grid.registerPlugin(new morpheus.AutoTooltips2()); grid.registerPlugin(new morpheus.AutoTooltips2());
grid.onCellChange.subscribe(function(e, args) { grid.onCellChange.subscribe(function (e, args) {
_this.trigger('edit', args); _this.trigger('edit', args);
}); });
if (gridOptions.select) { if (gridOptions.select) {
grid.setSelectionModel(new Slick.RowSelectionModel({ grid.setSelectionModel(new Slick.RowSelectionModel({
selectActiveRow : true, selectActiveRow: true,
multiSelect : gridOptions.multiSelect multiSelect: gridOptions.multiSelect
})); }));
grid.getSelectionModel().onSelectedRangesChanged.subscribe(function(e) { grid.getSelectionModel().onSelectedRangesChanged.subscribe(function (e) {
var nitems = grid.getDataLength(); var nitems = grid.getDataLength();
_this.trigger('selectionChanged', { _this.trigger('selectionChanged', {
selectedRows : grid.getSelectedRows().filter(function(row) { selectedRows: grid.getSelectedRows().filter(function (row) {
return row >= 0 && row <= nitems; return row >= 0 && row <= nitems;
}) })
}); });
}); });
} }
grid.onSort.subscribe(function(e, args) { grid.onSort.subscribe(function (e, args) {
_this.sortCols = args.sortCols; _this.sortCols = args.sortCols;
_this._updateMappings(); _this._updateMappings();
grid.invalidate(); grid.invalidate();
}); });
options.$el.on('click', function(e) { options.$el.on('click', function (e) {
var cell = grid.getCellFromEvent(e); var cell = grid.getCellFromEvent(e);
if (cell) { if (cell) {
_this.trigger('click', { _this.trigger('click', {
row : cell.row, row: cell.row,
target : e.target target: e.target
}); });
} }
}); });
options.$el.on('dblclick', function(e) { options.$el.on('dblclick', function (e) {
var cell = grid.getCellFromEvent(e); var cell = grid.getCellFromEvent(e);
if (cell) { if (cell) {
_this.trigger('dblclick', { _this.trigger('dblclick', {
row : cell.row, row: cell.row,
target : e.target target: e.target
}); });
} }
}); });
...@@ -106,7 +106,7 @@ morpheus.Grid = function(options) { ...@@ -106,7 +106,7 @@ morpheus.Grid = function(options) {
var gridSortColumns = []; var gridSortColumns = [];
var gridColumns = grid.getColumns(); var gridColumns = grid.getColumns();
var sortCols = []; var sortCols = [];
options.sort.forEach(function(c) { options.sort.forEach(function (c) {
var column = null; var column = null;
for (var i = 0; i < gridColumns.length; i++) { for (var i = 0; i < gridColumns.length; i++) {
if (gridColumns[i].name === c.name) { if (gridColumns[i].name === c.name) {
...@@ -116,12 +116,12 @@ morpheus.Grid = function(options) { ...@@ -116,12 +116,12 @@ morpheus.Grid = function(options) {
} }
if (column != null) { if (column != null) {
sortCols.push({ sortCols.push({
sortCol : column, sortCol: column,
sortAsc : c.sortAsc sortAsc: c.sortAsc
}); });
gridSortColumns.push({ gridSortColumns.push({
columnId : column.id, columnId: column.id,
sortAsc : c.sortAsc sortAsc: c.sortAsc
}); });
} else { } else {
console.log(c.name + ' not found.'); console.log(c.name + ' not found.');
...@@ -137,22 +137,22 @@ morpheus.Grid = function(options) { ...@@ -137,22 +137,22 @@ morpheus.Grid = function(options) {
}; };
morpheus.Grid.prototype = { morpheus.Grid.prototype = {
columnsAutosized : false, columnsAutosized: false,
setColumns : function(columns) { setColumns: function (columns) {
this.grid.setColumns(columns); this.grid.setColumns(columns);
this.grid.resizeCanvas(); this.grid.resizeCanvas();
this.grid.invalidate(); this.grid.invalidate();
}, },
getColumns : function() { getColumns: function () {
return this.grid.getColumns(); return this.grid.getColumns();
}, },
getSelectedRows : function() { getSelectedRows: function () {
var nitems = this.grid.getDataLength(); var nitems = this.grid.getDataLength();
return this.grid.getSelectedRows().filter(function(row) { return this.grid.getSelectedRows().filter(function (row) {
return row >= 0 && row <= nitems; return row >= 0 && row <= nitems;
}); });
}, },
getSelectedItems : function() { getSelectedItems: function () {
var rows = this.grid.getSelectedRows(); var rows = this.grid.getSelectedRows();
var selection = []; var selection = [];
for (var i = 0, nrows = rows.length; i < nrows; i++) { for (var i = 0, nrows = rows.length; i < nrows; i++) {
...@@ -160,7 +160,7 @@ morpheus.Grid.prototype = { ...@@ -160,7 +160,7 @@ morpheus.Grid.prototype = {
} }
return selection; return selection;
}, },
getSelectedItem : function() { getSelectedItem: function () {
var rows = this.grid.getSelectedRows(); var rows = this.grid.getSelectedRows();
if (rows.length === 1) { if (rows.length === 1) {
return this.items[this.convertViewIndexToModel(rows[0])]; return this.items[this.convertViewIndexToModel(rows[0])];
...@@ -170,30 +170,30 @@ morpheus.Grid.prototype = { ...@@ -170,30 +170,30 @@ morpheus.Grid.prototype = {
/** /**
* Gets the sorted, visible items * Gets the sorted, visible items
*/ */
getItems : function() { getItems: function () {
var items = []; var items = [];
for (var i = 0, length = this.getFilteredItemCount(); i < length; i++) { for (var i = 0, length = this.getFilteredItemCount(); i < length; i++) {
items.push(this.items[this.convertViewIndexToModel(i)]); items.push(this.items[this.convertViewIndexToModel(i)]);
} }
return items; return items;
}, },
getAllItemCount : function() { getAllItemCount: function () {
return this.items.length; return this.items.length;
}, },
getAllItems : function() { getAllItems: function () {
return this.items; return this.items;
}, },
getFilteredItemCount : function() { getFilteredItemCount: function () {
return this.viewOrder ? this.viewOrder.length : this.items.length; return this.viewOrder ? this.viewOrder.length : this.items.length;
}, },
redraw : function() { redraw: function () {
this.grid.invalidate(); this.grid.invalidate();
}, },
redrawRows : function(rows) { redrawRows: function (rows) {
this.grid.invalidateRows(rows); this.grid.invalidateRows(rows);
this.grid.render(); this.grid.render();
}, },
setItems : function(items) { setItems: function (items) {
// clear the selection // clear the selection
this.items = items; this.items = items;
if (this.grid.getSelectionModel()) { if (this.grid.getSelectionModel()) {
...@@ -205,26 +205,26 @@ morpheus.Grid.prototype = { ...@@ -205,26 +205,26 @@ morpheus.Grid.prototype = {
} }
}, },
convertModelIndexToView : function(modelIndex) { convertModelIndexToView: function (modelIndex) {
if (this.modelToView !== null) { if (this.modelToView !== null) {
var index = this.modelToView.get(modelIndex); var index = this.modelToView.get(modelIndex);
return index !== undefined ? index : -1; return index !== undefined ? index : -1;
} }
return modelIndex; return modelIndex;
}, },
convertViewIndexToModel : function(viewIndex) { convertViewIndexToModel: function (viewIndex) {
return this.viewOrder != null ? (viewIndex < this.viewOrder.length return this.viewOrder != null ? (viewIndex < this.viewOrder.length
&& viewIndex >= 0 ? this.viewOrder[viewIndex] : -1) : viewIndex; && viewIndex >= 0 ? this.viewOrder[viewIndex] : -1) : viewIndex;
}, },
_updateMappings : function() { _updateMappings: function () {
var selectedViewIndices = this.grid.getSelectionModel() != null ? this.grid var selectedViewIndices = this.grid.getSelectionModel() != null ? this.grid
.getSelectedRows() .getSelectedRows()
: null; : null;
var selectedModelIndices = []; var selectedModelIndices = [];
if (selectedViewIndices) { if (selectedViewIndices) {
for (var i = 0, length = selectedViewIndices.length; i < length; i++) { for (var i = 0, length = selectedViewIndices.length; i < length; i++) {
selectedModelIndices.push(this selectedModelIndices.push(this
.convertViewIndexToModel(selectedViewIndices[i])); .convertViewIndexToModel(selectedViewIndices[i]));
} }
} }
this.viewOrder = null; this.viewOrder = null;
...@@ -247,7 +247,7 @@ morpheus.Grid.prototype = { ...@@ -247,7 +247,7 @@ morpheus.Grid.prototype = {
} }
var ncols = cols.length; var ncols = cols.length;
var items = this.items; var items = this.items;
this.viewOrder.sort(function(index1, index2) { this.viewOrder.sort(function (index1, index2) {
for (var i = 0; i < ncols; i++) { for (var i = 0; i < ncols; i++) {
var getter = cols[i].sortCol.getter; var getter = cols[i].sortCol.getter;
var sign = cols[i].sortAsc ? 1 : -1; var sign = cols[i].sortAsc ? 1 : -1;
...@@ -274,7 +274,7 @@ morpheus.Grid.prototype = { ...@@ -274,7 +274,7 @@ morpheus.Grid.prototype = {
var newSelectedViewIndices = []; var newSelectedViewIndices = [];
for (var i = 0, length = selectedModelIndices.length; i < length; i++) { for (var i = 0, length = selectedModelIndices.length; i < length; i++) {
var index = this var index = this
.convertModelIndexToView(selectedModelIndices[i]); .convertModelIndexToView(selectedModelIndices[i]);
if (index !== undefined) { if (index !== undefined) {
newSelectedViewIndices.push(index); newSelectedViewIndices.push(index);
} }
...@@ -282,45 +282,49 @@ morpheus.Grid.prototype = { ...@@ -282,45 +282,49 @@ morpheus.Grid.prototype = {
this.grid.setSelectedRows(newSelectedViewIndices); this.grid.setSelectedRows(newSelectedViewIndices);
} }
}, },
setSelectedRows : function(rows) { setSelectedRows: function (rows) {
this.grid.setSelectedRows(rows); this.grid.setSelectedRows(rows);
}, },
setFilter : function(filter) { setFilter: function (filter) {
this.filter = filter; this.filter = filter;
this._updateMappings(); this._updateMappings();
this.grid.invalidate(); this.grid.invalidate();
this.trigger('filter'); this.trigger('filter');
}, },
getFilter : function() { getFilter: function () {
return this.filter; return this.filter;
}, },
autosizeColumns : function() { autosizeColumns: function () {
this.columnsAutosized = true;
var columns = this.grid.getColumns(); var columns = this.grid.getColumns();
var items = this.getItems(); var items = this.getItems();
if (!items || items.length == 0) {
return;
}
if (!columns || columns.length <= 1) { if (!columns || columns.length <= 1) {
return; return;
} }
this.columnsAutosized = true;
var div = document.createElement('div'); var div = document.createElement('div');
document.body.appendChild(div); document.body.appendChild(div);
var $d = $(div); var $d = $(div);
$d.css({ $d.css({
position : 'absolute', position: 'absolute',
left : -1000, left: -1000,
top : -1000 top: -1000
}); });
var $row = $('<div class="slick-table">' var $row = $('<div class="slick-table">'
+ '<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"></div>' + '<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"></div>'
+ '<div class="ui-widget-content slick-row"><div class="slick-cell selected"></div></div>' + '<div class="ui-widget-content slick-row"><div class="slick-cell selected"></div></div>'
+ '</div>'); + '</div>');
var $cell = $row.find('.slick-cell'); var $cell = $row.find('.slick-cell');
var $header = $row.find('.slick-header-column'); var $header = $row.find('.slick-header-column');
$row.appendTo($d); $row.appendTo($d);
var gridWidth = this.options.$el.width(); var gridWidth = this.options.$el.width() - 30;
var maxWidth = Math.min(parseInt(gridWidth / 2), 400); var maxWidth = Math.min(parseInt(gridWidth / 2), 400);
var getColumnWidth = function(column) { var getColumnWidth = function (column) {
var w = $header.html(column.name).outerWidth(); var w = $header.html(column.name).outerWidth();
w = Math.max($cell.outerWidth(), w); w = Math.max($cell.outerWidth(), w);
if (column.prototypeValue) { if (column.prototypeValue) {
...@@ -328,14 +332,17 @@ morpheus.Grid.prototype = { ...@@ -328,14 +332,17 @@ morpheus.Grid.prototype = {
w = Math.max($cell.outerWidth(), w); w = Math.max($cell.outerWidth(), w);
} else { } else {
for (var i = 0, nrows = Math.min(items.length, 10); i < nrows; i++) { for (var i = 0, nrows = Math.min(items.length, 10); i < nrows; i++) {
var text = column.formatter(i, null, column var html = column.formatter(i, null, column
.getter(items[i]), column, items[i]); .getter(items[i]), column, items[i]);
$cell.html(text); var $html = $(html);
$html.find('.slick-cell-wrapper').attr('class', '');
$cell.html($html);
w = Math.max($cell.outerWidth(), w); w = Math.max($cell.outerWidth(), w);
} }
} }
column.width = parseInt(Math.min(maxWidth, w)); column.width = parseInt(Math.min(maxWidth, w));
}; };
var totalWidth = 0; var totalWidth = 0;
for (var i = 0; i < columns.length; i++) { for (var i = 0; i < columns.length; i++) {
...@@ -351,10 +358,11 @@ morpheus.Grid.prototype = { ...@@ -351,10 +358,11 @@ morpheus.Grid.prototype = {
} else if (totalWidth > gridWidth) { } else if (totalWidth > gridWidth) {
// shrink // shrink
columns[columns.length - 1].width -= (totalWidth - gridWidth); //columns[columns.length - 1].width -= (totalWidth - gridWidth);
// shrink last column // shrink last column
} }
$d.remove(); $d.remove();
this.grid.resizeCanvas(); this.grid.resizeCanvas();
} }
...@@ -365,10 +373,10 @@ morpheus.Util.extend(morpheus.Grid, morpheus.Events); ...@@ -365,10 +373,10 @@ morpheus.Util.extend(morpheus.Grid, morpheus.Events);
/** /**
* AutoTooltips2 plugin to show/hide tooltips when columns are too narrow to fit * AutoTooltips2 plugin to show/hide tooltips when columns are too narrow to fit
* content. * content.
* *
* @constructor * @constructor
*/ */
morpheus.AutoTooltips2 = function(options) { morpheus.AutoTooltips2 = function (options) {
var _grid; var _grid;
var _self = this; var _self = this;
var tip; var tip;
...@@ -406,7 +414,7 @@ morpheus.AutoTooltips2 = function(options) { ...@@ -406,7 +414,7 @@ morpheus.AutoTooltips2 = function(options) {
/** /**
* Handle mouse entering grid cell to add/remove tooltip. * Handle mouse entering grid cell to add/remove tooltip.
* *
* @param {jQuery.Event} * @param {jQuery.Event}
* e - The event * e - The event
*/ */
...@@ -419,9 +427,10 @@ morpheus.AutoTooltips2 = function(options) { ...@@ -419,9 +427,10 @@ morpheus.AutoTooltips2 = function(options) {
} }
} }
} }
function hideAll() { function hideAll() {
$(_grid.getCanvasNode()).find('[data-original-title]').attr( $(_grid.getCanvasNode()).find('[data-original-title]').attr(
'data-original-title', '').tooltip('hide'); 'data-original-title', '').tooltip('hide');
} }
...@@ -431,6 +440,7 @@ morpheus.AutoTooltips2 = function(options) { ...@@ -431,6 +440,7 @@ morpheus.AutoTooltips2 = function(options) {
$node.tooltip('hide'); $node.tooltip('hide');
} }
} }
function showHeaderToolTip(e) { function showHeaderToolTip(e) {
var show = false; var show = false;
var $node = $(e.target); var $node = $(e.target);
...@@ -440,10 +450,10 @@ morpheus.AutoTooltips2 = function(options) { ...@@ -440,10 +450,10 @@ morpheus.AutoTooltips2 = function(options) {
var $name = $node.find('.slick-column-name'); var $name = $node.find('.slick-column-name');
if (!$node.data('bs.tooltip')) { if (!$node.data('bs.tooltip')) {
$node.tooltip({ $node.tooltip({
placement : 'auto', placement: 'auto',
html : true, html: true,
container : 'body', container: 'body',
trigger : 'manual' trigger: 'manual'
}); });
} }
$node.attr('data-original-title', $name.text()); $node.attr('data-original-title', $name.text());
...@@ -454,6 +464,7 @@ morpheus.AutoTooltips2 = function(options) { ...@@ -454,6 +464,7 @@ morpheus.AutoTooltips2 = function(options) {
} }
} }
} }
function showToolTip(e) { function showToolTip(e) {
var cell = _grid.getCellFromEvent(e); var cell = _grid.getCellFromEvent(e);
if (cell) { if (cell) {
...@@ -461,8 +472,9 @@ morpheus.AutoTooltips2 = function(options) { ...@@ -461,8 +472,9 @@ morpheus.AutoTooltips2 = function(options) {
var text = ''; var text = '';
var c = _grid.getColumns()[cell.cell]; var c = _grid.getColumns()[cell.cell];
var show = false; var show = false;
var $checkNode = $node.find('.slick-cell-wrapper');
if (c.alwaysShowTooltip if (c.alwaysShowTooltip
|| ($node[0].scrollWidth > $node[0].offsetWidth)) { || ($checkNode[0].scrollWidth > $checkNode[0].offsetWidth)) {
var item = _grid.getDataItem(cell.row); var item = _grid.getDataItem(cell.row);
text = c.tooltip(item, c.getter(item)); text = c.tooltip(item, c.getter(item));
show = true; show = true;
...@@ -471,10 +483,10 @@ morpheus.AutoTooltips2 = function(options) { ...@@ -471,10 +483,10 @@ morpheus.AutoTooltips2 = function(options) {
var hasTip = $node.data('bs.tooltip'); var hasTip = $node.data('bs.tooltip');
if (!hasTip) { if (!hasTip) {
$node.tooltip({ $node.tooltip({
placement : 'auto', placement: 'auto',
html : true, html: true,
container : 'body', container: 'body',
trigger : 'manual' trigger: 'manual'
}); });
} }
if (show) { if (show) {
...@@ -487,7 +499,7 @@ morpheus.AutoTooltips2 = function(options) { ...@@ -487,7 +499,7 @@ morpheus.AutoTooltips2 = function(options) {
/** /**
* Handle mouse entering header cell to add/remove tooltip. * Handle mouse entering header cell to add/remove tooltip.
* *
* @param {jQuery.Event} * @param {jQuery.Event}
* e - The event * e - The event
* @param {object} * @param {object}
...@@ -495,18 +507,18 @@ morpheus.AutoTooltips2 = function(options) { ...@@ -495,18 +507,18 @@ morpheus.AutoTooltips2 = function(options) {
*/ */
function handleHeaderMouseEnter(e, args) { function handleHeaderMouseEnter(e, args) {
var column = args.column, $node = $(e.target).closest( var column = args.column, $node = $(e.target).closest(
'.slick-header-column'); '.slick-header-column');
if (!column.toolTip) { if (!column.toolTip) {
$node.attr('title', $node.attr('title',
($node.innerWidth() < $node[0].scrollWidth) ? column.name ($node.innerWidth() < $node[0].scrollWidth) ? column.name
: ''); : '');
} }
} }
// Public API // Public API
$.extend(this, { $.extend(this, {
'init' : init, 'init': init,
'destroy' : destroy 'destroy': destroy
}); });
}; };
\ No newline at end of file
src/ui/table.js
View file @ bb9e39e4
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @param options.items * @param options.items
* @param options.columns * @param options.columns
*/ */
morpheus.Table = function(options) { morpheus.Table = function (options) {
options = morpheus.Table.createOptions(options); options = morpheus.Table.createOptions(options);
this.options = options; this.options = options;
if (!options.width) { if (!options.width) {
...@@ -27,30 +27,29 @@ morpheus.Table = function(options) { ...@@ -27,30 +27,29 @@ morpheus.Table = function(options) {
var height = options.height; var height = options.height;
var $gridDiv = $('<div class="slick-table' var $gridDiv = $('<div class="slick-table'
+ (options.tableClass ? (' ' + options.tableClass) : '') + (options.tableClass ? (' ' + options.tableClass) : '')
+ '" style="width:' + options.fixedWidth + ';height:' + height + '" style="width:' + options.fixedWidth + ';height:' + height
+ '"></div>'); + '"></div>');
this.$gridDiv = $gridDiv; this.$gridDiv = $gridDiv;
$gridDiv.appendTo(options.$el); $gridDiv.appendTo(options.$el);
var columns = options.columns; var columns = options.columns;
this.columns = columns; this.columns = columns;
var visibleColumns = columns.filter(function(c) { var visibleColumns = columns.filter(function (c) {
return c.visible; return c.visible;
}); });
var grid = new morpheus.Grid({ var grid = new morpheus.Grid({
gridOptions : { gridOptions: {
forceFitColumns : true, select: options.select,
select : options.select, rowHeight: options.rowHeight,
rowHeight : options.rowHeight, autoEdit: false,
autoEdit : false, editable: false,
editable : false, autoHeight: options.height === 'auto',
autoHeight : options.height === 'auto', enableTextSelectionOnCells: true,
enableTextSelectionOnCells : true,
}, },
$el : $gridDiv, $el: $gridDiv,
items : options.items, items: options.items,
columns : visibleColumns columns: visibleColumns
}); });
this.grid = grid; this.grid = grid;
if (options.search) { if (options.search) {
...@@ -62,8 +61,8 @@ morpheus.Table = function(options) { ...@@ -62,8 +61,8 @@ morpheus.Table = function(options) {
if (visibleColumns.length !== this.columns.length) { if (visibleColumns.length !== this.columns.length) {
var select = []; var select = [];
select select
.push('<select data-selected-text-format="static" title="Columns..." multiple class="form-control selectpicker show-tick pull-right">'); .push('<select data-selected-text-format="static" title="Columns..." multiple class="form-control selectpicker show-tick pull-right">');
this.columns.forEach(function(c, i) { this.columns.forEach(function (c, i) {
select.push('<option value="' + i + '"'); select.push('<option value="' + i + '"');
if (c.visible) { if (c.visible) {
select.push(' selected'); select.push(' selected');
...@@ -78,18 +77,18 @@ morpheus.Table = function(options) { ...@@ -78,18 +77,18 @@ morpheus.Table = function(options) {
$select.appendTo($div); $select.appendTo($div);
$div.prependTo(options.$el); $div.prependTo(options.$el);
$select.selectpicker({ $select.selectpicker({
iconBase : 'fa', iconBase: 'fa',
tickIcon : 'fa-check', tickIcon: 'fa-check',
style : 'btn-default btn-sm' style: 'btn-default btn-sm'
}); });
$select.on('change', function() { $select.on('change', function () {
var selectedItems = $select.val(); var selectedItems = $select.val();
var selectedItemsSet = new morpheus.Set(); var selectedItemsSet = new morpheus.Set();
selectedItems.forEach(function(item) { selectedItems.forEach(function (item) {
selectedItemsSet.add(parseInt(item)); selectedItemsSet.add(parseInt(item));
}); });
var visibleColumns = []; visibleColumns = [];
_this.columns.forEach(function(c, i) { _this.columns.forEach(function (c, i) {
if (selectedItemsSet.has(i)) { if (selectedItemsSet.has(i)) {
visibleColumns.push(c); visibleColumns.push(c);
} }
...@@ -102,7 +101,7 @@ morpheus.Table = function(options) { ...@@ -102,7 +101,7 @@ morpheus.Table = function(options) {
} }
var collapsed = false; var collapsed = false;
var lastWidth = -1; var lastWidth = -1;
var resize = function() { var resize = function () {
if (!_this.options.responsive) { if (!_this.options.responsive) {
return; return;
} }
...@@ -121,60 +120,60 @@ morpheus.Table = function(options) { ...@@ -121,60 +120,60 @@ morpheus.Table = function(options) {
// (document.body.clientHeight - verticalPosition) + 'px'); // (document.body.clientHeight - verticalPosition) + 'px');
// } // }
if (!collapsed && gridWidth < options.collapseBreakpoint if (!collapsed && gridWidth < options.collapseBreakpoint
&& columns.length > 1) { && visibleColumns.length > 1) {
collapsed = true; collapsed = true;
$gridDiv.addClass('slick-stacked'); $gridDiv.addClass('slick-stacked');
_this.grid.grid.getOptions().rowHeight = options.rowHeight _this.grid.grid.getOptions().rowHeight = options.rowHeight
* columns.length; * visibleColumns.length;
// collapse // collapse
_this.grid.grid _this.grid.grid
.setColumns([ { .setColumns([{
id : 0, id: 0,
tooltip : function(item, value) { tooltip: function (item, value) {
var html = []; var html = [];
for (var i = 0; i < columns.length; i++) { for (var i = 0; i < visibleColumns.length; i++) {
var text = columns[i].tooltip(item, columns[i] var text = visibleColumns[i].tooltip(item, visibleColumns[i]
.getter(item)); .getter(item));
if (text != null && text !== '') { if (text != null && text !== '') {
html.push(text); html.push(text);
} }
} }
return html.join('<br />'); return html.join('<br />');
}, },
collapsed : true, collapsed: true,
getter : function(item) { getter: function (item) {
return item; return item;
}, },
formatter : function(row, cell, value, columnDef, formatter: function (row, cell, value, columnDef,
dataContext) { dataContext) {
var html = []; var html = [];
html
.push('<div class="slick-table-wrapper"><div class="slick-cell-wrapper">');
if (options.rowHeader) { // e.g. render checkbox
html.push(options.rowHeader(dataContext));
}
for (var i = 0; i < visibleColumns.length; i++) {
if (i === 0) {
html html
.push('<div style="padding-top:2px;padding:bottom:2px;"">'); .push('<div style="font-weight:600;display:'
if (options.rowHeader) { // e.g. render checkbox + (options.rowHeader ? 'inline-block'
html.push(options.rowHeader(dataContext)); : 'block') + '">');
} } else {
for (var i = 0; i < columns.length; i++) { html.push('<div>');
if (i === 0) { }
html
.push('<div style="font-weight:600;display:' var c = visibleColumns[i];
+ (options.rowHeader ? 'inline-block' var s = c.renderer(dataContext, c
: 'block') + '">'); .getter(dataContext));
} else { html.push(s);
html.push('<div>'); html.push('</div>');
} }
html.push('</div></div>');
var c = columns[i]; return html.join('');
var s = c.renderer(dataContext, c },
.getter(dataContext)); sortable: false,
html.push(s); name: ''
html.push('</div>'); }]);
}
html.push('</div>');
return html.join('');
},
sortable : false,
name : ''
} ]);
$gridDiv.find('.slick-header').hide(); $gridDiv.find('.slick-header').hide();
_this.grid.grid.resizeCanvas(); _this.grid.grid.resizeCanvas();
_this.grid.grid.invalidate(); _this.grid.grid.invalidate();
...@@ -185,11 +184,11 @@ morpheus.Table = function(options) { ...@@ -185,11 +184,11 @@ morpheus.Table = function(options) {
$gridDiv.find('.slick-header').show(); $gridDiv.find('.slick-header').show();
} }
_this.grid.grid.getOptions().rowHeight = options.rowHeight; _this.grid.grid.getOptions().rowHeight = options.rowHeight;
_this.grid.grid.setColumns(columns); _this.grid.grid.setColumns(visibleColumns);
_this.grid.grid.resizeCanvas(); _this.grid.grid.resizeCanvas();
if (options.select) { if (options.select) {
_this.grid.grid.setSelectedRows(_this.grid.grid _this.grid.grid.setSelectedRows(_this.grid.grid
.getSelectedRows()); .getSelectedRows());
} }
_this.grid.grid.invalidate(); _this.grid.grid.invalidate();
} else { } else {
...@@ -203,20 +202,20 @@ morpheus.Table = function(options) { ...@@ -203,20 +202,20 @@ morpheus.Table = function(options) {
} }
if (options.responsive) { if (options.responsive) {
$(window).on('resize orientationchange', resize); $(window).on('resize orientationchange', resize);
$gridDiv.on('remove', function() { $gridDiv.on('remove', function () {
$(window).off('resize', resize); $(window).off('resize', resize);
}); });
resize(); resize();
} }
this.resize = resize; this.resize = resize;
if (options.columns.length > 1 && options.items != null if (visibleColumns.length > 1 && options.items != null
&& options.items.length > 0) { && options.items.length > 0) {
this.setItems(options.items); this.setItems(options.items);
} }
}; };
morpheus.Table.defaultRenderer = function(item, value) { morpheus.Table.defaultRenderer = function (item, value) {
if (_.isNumber(value)) { if (_.isNumber(value)) {
return morpheus.Util.nf(value); return morpheus.Util.nf(value);
} else if (morpheus.Util.isArray(value)) { } else if (morpheus.Util.isArray(value)) {
...@@ -236,7 +235,7 @@ morpheus.Table.defaultRenderer = function(item, value) { ...@@ -236,7 +235,7 @@ morpheus.Table.defaultRenderer = function(item, value) {
morpheus.Table.prototype = { morpheus.Table.prototype = {
setHeight : function(height) { setHeight: function (height) {
this.options.height = height; this.options.height = height;
if (height === 'auto') { if (height === 'auto') {
this.$gridDiv.css('height', ''); this.$gridDiv.css('height', '');
...@@ -249,13 +248,13 @@ morpheus.Table.prototype = { ...@@ -249,13 +248,13 @@ morpheus.Table.prototype = {
this.grid.grid.resizeCanvas(); this.grid.grid.resizeCanvas();
if (height === 'auto') { if (height === 'auto') {
var height = this.getItems().length * this.options.rowHeight var height = this.getItems().length * this.options.rowHeight
+ this.options.rowHeight; + this.options.rowHeight;
this.$gridDiv.find('.slick-viewport').css('height', height + 'px'); this.$gridDiv.find('.slick-viewport').css('height', height + 'px');
} }
this.grid.grid.invalidate(); this.grid.grid.invalidate();
}, },
setSearchVisible : function(visible) { setSearchVisible: function (visible) {
if (this.tableSearch) { if (this.tableSearch) {
if (!visible) { if (!visible) {
this.tableSearch.$el.hide(); this.tableSearch.$el.hide();
...@@ -264,13 +263,13 @@ morpheus.Table.prototype = { ...@@ -264,13 +263,13 @@ morpheus.Table.prototype = {
} }
} }
}, },
autocomplete : function(tokens, response) { autocomplete: function (tokens, response) {
var matches = []; var matches = [];
var token = tokens != null && tokens.length > 0 ? tokens[tokens.selectionStartIndex] var token = tokens != null && tokens.length > 0 ? tokens[tokens.selectionStartIndex]
: ''; : '';
token = $.trim(token); token = $.trim(token);
var columns = this.columns.filter(function(c) { var columns = this.columns.filter(function (c) {
return c.searchable; return c.searchable && c.visible;
}); });
var ncolumns = columns.length; var ncolumns = columns.length;
...@@ -282,19 +281,19 @@ morpheus.Table.prototype = { ...@@ -282,19 +281,19 @@ morpheus.Table.prototype = {
for (var i = 0; i < ncolumns; i++) { for (var i = 0; i < ncolumns; i++) {
var field = columns[i].name; var field = columns[i].name;
matches.push({ matches.push({
value : field + ':', value: field + ':',
label : '<span style="font-weight:300;">' + field label: '<span style="font-weight:300;">' + field
+ ':</span>', + ':</span>',
show : true show: true
}); });
// show column names // show column names
} }
matches matches
.sort(function(a, b) { .sort(function (a, b) {
return (a.value === b.value ? 0 return (a.value === b.value ? 0
: (a.value < b.value ? -1 : 1)); : (a.value < b.value ? -1 : 1));
}); });
return response(matches); return response(matches);
} }
var field = null; var field = null;
...@@ -304,12 +303,12 @@ morpheus.Table.prototype = { ...@@ -304,12 +303,12 @@ morpheus.Table.prototype = {
if (token.charCodeAt(semi - 1) !== 92) { // \: if (token.charCodeAt(semi - 1) !== 92) { // \:
var possibleField = $.trim(token.substring(0, semi)); var possibleField = $.trim(token.substring(0, semi));
if (possibleField.length > 0 && possibleField[0] === '"' if (possibleField.length > 0 && possibleField[0] === '"'
&& possibleField[token.length - 1] === '"') { && possibleField[token.length - 1] === '"') {
possibleField = possibleField.substring(1, possibleField = possibleField.substring(1,
possibleField.length - 1); possibleField.length - 1);
} }
var columnNameToColumn = new morpheus.Map(); var columnNameToColumn = new morpheus.Map();
var columnNames = columns.map(function(c) { var columnNames = columns.map(function (c) {
return c.name; return c.name;
}); });
for (var i = 0; i < columnNames.length; i++) { for (var i = 0; i < columnNames.length; i++) {
...@@ -318,7 +317,7 @@ morpheus.Table.prototype = { ...@@ -318,7 +317,7 @@ morpheus.Table.prototype = {
var c = columnNameToColumn.get(possibleField); var c = columnNameToColumn.get(possibleField);
if (c !== undefined) { if (c !== undefined) {
token = $.trim(token.substring(semi + 1)); token = $.trim(token.substring(semi + 1));
columns = [ c ]; columns = [c];
ncolumns = 1; ncolumns = 1;
} }
} }
...@@ -329,10 +328,10 @@ morpheus.Table.prototype = { ...@@ -329,10 +328,10 @@ morpheus.Table.prototype = {
var field = columns[j].name; var field = columns[j].name;
if (regex.test(field)) { if (regex.test(field)) {
matches.push({ matches.push({
value : field + ':', value: field + ':',
label : '<span style="font-weight:300;">' + field label: '<span style="font-weight:300;">' + field
+ ':</span>', + ':</span>',
show : true show: true
}); });
} }
} }
...@@ -353,17 +352,17 @@ morpheus.Table.prototype = { ...@@ -353,17 +352,17 @@ morpheus.Table.prototype = {
if (regex.test(val) && !set.has(val)) { if (regex.test(val) && !set.has(val)) {
set.add(val); set.add(val);
matches matches
.push({ .push({
value : showField ? (field + ':' + val) value: showField ? (field + ':' + val)
: val, : val,
label : showField ? ('<span style="font-weight:300;">' label: showField ? ('<span style="font-weight:300;">'
+ field + field
+ ':</span>' + ':</span>'
+ '<span style="font-weight:900;">' + '<span style="font-weight:900;">'
+ val + '</span>') + val + '</span>')
: ('<span style="font-weight:900;">' : ('<span style="font-weight:900;">'
+ val + '</span>') + val + '</span>')
}); });
} }
if (matches.length === maxSize) { if (matches.length === maxSize) {
return response(matches); return response(matches);
...@@ -373,17 +372,17 @@ morpheus.Table.prototype = { ...@@ -373,17 +372,17 @@ morpheus.Table.prototype = {
if (regex.test(value) && !set.has(value)) { if (regex.test(value) && !set.has(value)) {
set.add(value); set.add(value);
matches matches
.push({ .push({
value : showField ? (field + ':' + value) value: showField ? (field + ':' + value)
: value, : value,
label : showField ? ('<span style="font-weight:300;">' label: showField ? ('<span style="font-weight:300;">'
+ field + field
+ ':</span>' + ':</span>'
+ '<span style="font-weight:900;">' + '<span style="font-weight:900;">'
+ value + '</span>') + value + '</span>')
: ('<span style="font-weight:900;">' : ('<span style="font-weight:900;">'
+ value + '</span>') + value + '</span>')
}); });
if (matches.length === maxSize) { if (matches.length === maxSize) {
return response(matches); return response(matches);
} }
...@@ -395,16 +394,16 @@ morpheus.Table.prototype = { ...@@ -395,16 +394,16 @@ morpheus.Table.prototype = {
return response(matches); return response(matches);
}, },
searchWithPredicates : function(predicates) { searchWithPredicates: function (predicates) {
if (predicates == null || predicates.length === 0) { if (predicates == null || predicates.length === 0) {
this.grid.setFilter(null); this.grid.setFilter(null);
return; return;
} }
var columns = this.columns.filter(function(c) { var columns = this.columns.filter(function (c) {
return c.searchable; return c.searchable && c.visible;
}); });
var columnNameToColumn = new morpheus.Map(); var columnNameToColumn = new morpheus.Map();
var columnNames = columns.map(function(c) { var columnNames = columns.map(function (c) {
return c.name; return c.name;
}); });
for (var i = 0; i < columnNames.length; i++) { for (var i = 0; i < columnNames.length; i++) {
...@@ -429,131 +428,134 @@ morpheus.Table.prototype = { ...@@ -429,131 +428,134 @@ morpheus.Table.prototype = {
predicates = filteredPredicates; predicates = filteredPredicates;
npredicates = predicates.length; npredicates = predicates.length;
this.grid this.grid
.setFilter(function(item) { .setFilter(function (item) {
for (var p = 0; p < npredicates; p++) { for (var p = 0; p < npredicates; p++) {
var predicate = predicates[p]; var predicate = predicates[p];
var searchColumns; var searchColumns;
if (predicate.column) { if (predicate.column) {
searchColumns = [ predicate.column ]; searchColumns = [predicate.column];
} else { } else {
searchColumns = columns; searchColumns = columns;
} }
for (var j = 0, ncolumns = searchColumns.length; j < ncolumns; j++) { for (var j = 0, ncolumns = searchColumns.length; j < ncolumns; j++) {
var value = searchColumns[j].getter(item); var value = searchColumns[j].getter(item);
if (morpheus.Util.isArray(value)) { if (morpheus.Util.isArray(value)) {
var nvalues = value.length; var nvalues = value.length;
for (var i = 0; i < nvalues; i++) { for (var i = 0; i < nvalues; i++) {
if (predicate.accept(value[i])) { if (predicate.accept(value[i])) {
return true; return true;
}
}
} else {
var predicate = predicates[p];
if (predicate.accept(value)) {
return true;
}
} }
} }
} else {
var predicate = predicates[p];
if (predicate.accept(value)) {
return true;
}
} }
}
return false; }
});
return false;
});
}, },
search : function(text) { search: function (text) {
if (text === '') { if (text === '') {
this.grid.setFilter(null); this.grid.setFilter(null);
} else { } else {
var tokens = morpheus.Util.getAutocompleteTokens(text); var tokens = morpheus.Util.getAutocompleteTokens(text);
var columns = this.columns.filter(function(c) { var columns = this.columns.filter(function (c) {
return c.searchable; return c.searchable && c.visible;
}); });
var columnNames = columns.map(function(c) { var columnNames = columns.map(function (c) {
return c.name; return c.name;
}); });
var predicates = morpheus.Util.createSearchPredicates({ var predicates = morpheus.Util.createSearchPredicates({
tokens : tokens, tokens: tokens,
fields : columnNames fields: columnNames
}); });
this.searchWithPredicates(predicates); this.searchWithPredicates(predicates);
} }
}, },
getSelectedRows : function() { getSelectedRows: function () {
return this.grid.getSelectedRows(); return this.grid.getSelectedRows();
}, },
getSelectedItems : function() { getSelectedItems: function () {
return this.grid.getSelectedItems(); return this.grid.getSelectedItems();
}, },
getSelectedItem : function() { getSelectedItem: function () {
return this.grid.getSelectedItem(); return this.grid.getSelectedItem();
}, },
setSelectedRows : function(rows) { setSelectedRows: function (rows) {
this.grid.setSelectedRows(rows); this.grid.setSelectedRows(rows);
}, },
getItems : function(items) { getItems: function (items) {
return this.grid.getItems(); return this.grid.getItems();
}, },
getAllItemCount : function() { getAllItemCount: function () {
return this.grid.getAllItemCount(); return this.grid.getAllItemCount();
}, },
getFilteredItemCount : function() { getFilteredItemCount: function () {
return this.grid.getFilteredItemCount(); return this.grid.getFilteredItemCount();
}, },
setFilter : function(f) { setFilter: function (f) {
this.grid.setFilter(f); this.grid.setFilter(f);
}, },
setItems : function(items) { setItems: function (items) {
this.grid.setItems(items); this.grid.setItems(items);
this.grid.redraw(); this.grid.redraw();
// TODO update height? // TODO update height?
}, },
redraw : function() { redraw: function () {
this.grid.redraw(); this.grid.redraw();
}, },
/** /**
* @param evtStr * @param evtStr
* selectionChanged * selectionChanged
*/ */
on : function(evtStr, handler) { on: function (evtStr, handler) {
this.grid.on(evtStr, handler); this.grid.on(evtStr, handler);
return this;
}, },
off : function(evtStr, handler) { off: function (evtStr, handler) {
this.grid.off(evtStr, handler); this.grid.off(evtStr, handler);
return this;
}, },
trigger : function(evtStr) { trigger: function (evtStr) {
this.grid.trigger(evtStr); this.grid.trigger(evtStr);
} }
}; };
morpheus.Table.createOptions = function(options) { morpheus.Table.createOptions = function (options) {
options = $.extend(true, {}, { options = $.extend(true, {}, {
items : [], items: [],
height : '564px', height: '564px',
collapseBreakpoint : 500, collapseBreakpoint: 500,
showHeader : true, showHeader: true,
select : true, select: true,
rowHeader : null, rowHeader: null,
responsive : true, responsive: true,
fixedWidth : '320px' fixedWidth: '320px'
}, options); }, options);
if (!options.columns) { if (!options.columns) {
options.columns = [ { options.columns = [{
name : '' name: ''
} ]; }];
} }
var columns = []; var columns = [];
options.columns.forEach(function(c, i) { options.columns.forEach(function (c, i) {
var column = $.extend(true, {}, { var column = $.extend(true, {}, {
id : i, id: i,
tooltip : function(dataContext, value) { tooltip: function (dataContext, value) {
return morpheus.Table.defaultRenderer(dataContext, value); return morpheus.Table.defaultRenderer(dataContext, value);
}, },
formatter : function(row, cell, value, columnDef, dataContext) { formatter: function (row, cell, value, columnDef, dataContext) {
return column.renderer(dataContext, value); return '<div class="slick-table-wrapper"><div class="slick-cell-wrapper">' + column.renderer(dataContext, value) + '</div></div>';
}, },
comparator : function(a, b) { comparator: function (a, b) {
var aNaN = (a == null || _.isNumber(a) && isNaN(a)); var aNaN = (a == null || _.isNumber(a) && isNaN(a));
var bNaN = (b == null || _.isNumber(b) && isNaN(b)); var bNaN = (b == null || _.isNumber(b) && isNaN(b));
if (aNaN && bNaN) { if (aNaN && bNaN) {
...@@ -574,28 +576,29 @@ morpheus.Table.createOptions = function(options) { ...@@ -574,28 +576,29 @@ morpheus.Table.createOptions = function(options) {
return (a === b ? 0 : (a < b ? -1 : 1)); return (a === b ? 0 : (a < b ? -1 : 1));
}, },
sortable : true, sortable: true,
searchable : true, searchable: true,
width : null, width: null,
name : c.name, name: c.name,
renderer : morpheus.Table.defaultRenderer renderer: morpheus.Table.defaultRenderer
}, c); }, c);
if (column.visible === undefined) { if (column.visible === undefined) {
column.visible = true; column.visible = true;
} }
if (!column.getter) { if (!column.getter) {
column.getter = column.field == null ? function(item) { column.getter = column.field == null ? function (item) {
return item; return item;
} : function(item) { } : function (item) {
return item[c.field]; return item[c.field];
}; };
} }
if (options.rowHeader && i === 0) { if (options.rowHeader && i === 0) {
column.formatter = function(row, cell, value, columnDef, column.formatter = function (row, cell, value, columnDef,
dataContext) { dataContext) {
return options.rowHeader(dataContext) return '<div class="slick-table-wrapper"><div style="vertical-align: middle;display:' +
+ column.renderer(dataContext, value); ' table-cell;">' + options.rowHeader(dataContext)
+ column.renderer(dataContext, value) + '</div></div>';
}; };
} }
columns.push(column); columns.push(column);
...@@ -605,25 +608,26 @@ morpheus.Table.createOptions = function(options) { ...@@ -605,25 +608,26 @@ morpheus.Table.createOptions = function(options) {
if (options.columns.length === 1) { if (options.columns.length === 1) {
options.tableClass = 'slick-table-compact'; options.tableClass = 'slick-table-compact';
} else { } else {
options.tableClass = 'slick-striped-table';// 'slick-bordered-table'; options.tableClass = 'slick-bordered-table';
} }
if (!options.rowHeight) { if (!options.rowHeight) {
options.rowHeight = options.tableClass === 'slick-table-compact' ? 18 // options.rowHeight = options.tableClass === 'slick-table-compact' ? 18
: 20; // : 20;
options.rowHeight = 20;
} }
return options; return options;
}; };
morpheus.TableSearchUI = function() { morpheus.TableSearchUI = function () {
var _this = this; var _this = this;
var html = []; var html = [];
html.push('<div name="searchDiv">'); html.push('<div name="searchDiv">');
html.push('<form class="form">'); html.push('<form class="form">');
html html
.push('<div class="form-group" style="max-width:525px; width:95%; margin:0px;">'); .push('<div class="form-group" style="max-width:525px; width:95%; margin:0px;">');
html html
.push('<input name="search" type="text" class="form-control input-sm" placeholder="Search" autocomplete="off"></input>'); .push('<input name="search" type="text" class="form-control input-sm" placeholder="Search" autocomplete="off"></input>');
html.push('<h6 name="searchResults" style="margin:0px;"></h6>'); html.push('<h6 name="searchResults" style="margin:0px;"></h6>');
html.push('</div>'); html.push('</div>');
...@@ -631,7 +635,7 @@ morpheus.TableSearchUI = function() { ...@@ -631,7 +635,7 @@ morpheus.TableSearchUI = function() {
html.push('</div>'); html.push('</div>');
var $el = $(html.join('')); var $el = $(html.join(''));
this.$el = $el; this.$el = $el;
$el.find('form').on('submit', function(e) { $el.find('form').on('submit', function (e) {
e.preventDefault(); e.preventDefault();
}); });
...@@ -639,41 +643,41 @@ morpheus.TableSearchUI = function() { ...@@ -639,41 +643,41 @@ morpheus.TableSearchUI = function() {
var $searchResults = $el.find('[name=searchResults]'); var $searchResults = $el.find('[name=searchResults]');
this.$searchResults = $searchResults; this.$searchResults = $searchResults;
$search.on('keyup', _.debounce(function() { $search.on('keyup', _.debounce(function () {
_this.table.search($.trim($(this).val())); _this.table.search($.trim($(this).val()));
}, 100)); }, 100));
morpheus.Util.autosuggest({ morpheus.Util.autosuggest({
$el : $search, $el: $search,
suggestWhenEmpty : true, suggestWhenEmpty: true,
filter : function(tokens, response) { filter: function (tokens, response) {
_this.table.autocomplete(tokens, response); _this.table.autocomplete(tokens, response);
}, },
select : function() { select: function () {
_this.table.search($.trim($search.val())); _this.table.search($.trim($search.val()));
} }
}); });
}; };
morpheus.TableSearchUI.prototype = { morpheus.TableSearchUI.prototype = {
updateSearchLabel : function() { updateSearchLabel: function () {
var filteredCount = this.table.getFilteredItemCount(); var filteredCount = this.table.getFilteredItemCount();
var text = ''; var text = '';
if (filteredCount !== this.table.getAllItemCount()) { if (filteredCount !== this.table.getAllItemCount()) {
text += morpheus.Util.intFormat(filteredCount) + ' match' text += morpheus.Util.intFormat(filteredCount) + ' match'
+ (filteredCount !== 1 ? 'es' : ''); + (filteredCount !== 1 ? 'es' : '');
} }
this.$searchResults.html(text); this.$searchResults.html(text);
}, },
setTable : function(table) { setTable: function (table) {
this.table = table; this.table = table;
var _this = this; var _this = this;
if (!table.options.responsive) { if (!table.options.responsive) {
this.$el.css('width', table.options.fixedWidth); this.$el.css('width', table.options.fixedWidth);
} }
table.on('filter', function() { table.on('filter', function () {
_this.updateSearchLabel(); _this.updateSearchLabel();
}); });
} }
}; };
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment