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