Skip to content

GitLab

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

fixed rowHeader

parent a538aa00
Hide whitespace changes
Inline Side-by-side
Showing with 207 additions and 209 deletions
src/ui/table.js
View file @ 697922f1
/** /**
* @param options.$el * @param options.$el The jQuery element to render to. Must be in the DOM.
* @param options.items * @param options.items An array of items to display in the table
* @param options.columns * @param options.search Whether to create a search widget
* @param options.rowHeader Renderer to call for each row in the table
* @param options.rowHeight Table row height
* @param height: Height in pixels of table. '564px',
* @param options.collapseBreakpoint: 500
* @param options.showHeader: true
* @param options.select: true
* @param options.responsive: true
* @param options.fixedWidth: Fixed table with when responsive is false. '320px'
* @param options.columns An array of column descriptors. Each column can have the properties:
* visible, name, field, renderer
*/ */
morpheus.Table = function (options) {
options = morpheus.Table.createOptions(options); items: [],
this.options = options;
if (!options.width) { morpheus.Table = function (options) {
options.width = options.$el.attr('class'); options = morpheus.Table.createOptions(options);
} this.options = options;
var _this = this; if (!options.width) {
// var viewports = [ 'xs', 'sm', 'md', 'lg' ]; options.width = options.$el.attr('class');
// var widthTokens = options.width != null ? options.width.split(' ') : []; }
// var spec = {}; var _this = this;
// var widthFound = false;
// widthTokens.forEach(function(t) { var height = options.height;
// if (t.indexOf('col-') === 0) { var $gridDiv = $('<div class="slick-table'
// var viewport = t.substring(4, 6); + (options.tableClass ? (' ' + options.tableClass) : '')
// var fraction = parseFloat(t.substring(7)); + '" style="width:' + options.fixedWidth + ';height:' + height
// if (!isNaN(fraction)) { + '"></div>');
// spec[viewport] = fraction;
// widthFound = true; this.$gridDiv = $gridDiv;
// } $gridDiv.appendTo(options.$el);
// } var columns = options.columns;
// }); this.columns = columns;
var visibleColumns = columns.filter(function (c) {
var height = options.height; return c.visible;
var $gridDiv = $('<div class="slick-table'
+ (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) {
return c.visible;
});
var grid = new morpheus.Grid({
gridOptions: {
select: options.select,
rowHeight: options.rowHeight,
autoEdit: false,
editable: false,
autoHeight: options.height === 'auto',
enableTextSelectionOnCells: true,
},
$el: $gridDiv,
items: options.items,
columns: visibleColumns
});
this.grid = grid;
if (options.search) {
var tableSearch = new morpheus.TableSearchUI();
tableSearch.$el.prependTo(options.$el);
tableSearch.setTable(this);
this.tableSearch = tableSearch;
}
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) {
select.push('<option value="' + i + '"');
if (c.visible) {
select.push(' selected');
}
select.push('>');
select.push(c.name);
select.push('</option>');
}); });
select.push('</select>'); var grid = new morpheus.Grid({
var $select = $(select.join('')); gridOptions: {
var $div = $('<div class="pull-right"></div>'); select: options.select,
$select.appendTo($div); rowHeight: options.rowHeight,
$div.prependTo(options.$el); autoEdit: false,
$select.selectpicker({ editable: false,
iconBase: 'fa', autoHeight: options.height === 'auto',
tickIcon: 'fa-check', enableTextSelectionOnCells: true,
style: 'btn-default btn-sm' },
$el: $gridDiv,
items: options.items,
columns: visibleColumns
}); });
$select.on('change', function () { this.grid = grid;
var selectedItems = $select.val(); if (options.search) {
var selectedItemsSet = new morpheus.Set(); var tableSearch = new morpheus.TableSearchUI();
selectedItems.forEach(function (item) { tableSearch.$el.prependTo(options.$el);
selectedItemsSet.add(parseInt(item)); tableSearch.setTable(this);
}); this.tableSearch = tableSearch;
visibleColumns = []; }
_this.columns.forEach(function (c, i) { if (visibleColumns.length !== this.columns.length) {
if (selectedItemsSet.has(i)) { var select = [];
visibleColumns.push(c); 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) {
select.push('<option value="' + i + '"');
if (c.visible) {
select.push(' selected');
} }
select.push('>');
select.push(c.name);
select.push('</option>');
}); });
grid.setColumns(visibleColumns); select.push('</select>');
_this.resize(); var $select = $(select.join(''));
_this.redraw(); var $div = $('<div class="pull-right"></div>');
$select.appendTo($div);
$div.prependTo(options.$el);
$select.selectpicker({
iconBase: 'fa',
tickIcon: 'fa-check',
style: 'btn-default btn-sm'
});
$select.on('change', function () {
var selectedItems = $select.val();
var selectedItemsSet = new morpheus.Set();
selectedItems.forEach(function (item) {
selectedItemsSet.add(parseInt(item));
});
visibleColumns = [];
_this.columns.forEach(function (c, i) {
if (selectedItemsSet.has(i)) {
visibleColumns.push(c);
}
});
grid.setColumns(visibleColumns);
_this.resize();
_this.redraw();
}); });
}
var collapsed = false;
var lastWidth = -1;
var resize = function () {
if (!_this.options.responsive) {
return;
} }
var collapsed = false;
var lastWidth = -1;
var resize = function () {
if (!_this.options.responsive) {
return;
}
var gridWidth = options.$el.width(); var gridWidth = options.$el.width();
if (gridWidth === lastWidth) { if (gridWidth === lastWidth) {
return; return;
} }
lastWidth = gridWidth; lastWidth = gridWidth;
$gridDiv.css('width', gridWidth + 'px'); $gridDiv.css('width', gridWidth + 'px');
// if (options.responsiveHeight) { // if (options.responsiveHeight) {
// var verticalPosition = _this.$gridDiv[0].getBoundingClientRect().top // var verticalPosition = _this.$gridDiv[0].getBoundingClientRect().top
// + window.pageYOffset; // + window.pageYOffset;
// $gridDiv.css('height', // $gridDiv.css('height',
// (document.body.clientHeight - verticalPosition) + 'px'); // (document.body.clientHeight - verticalPosition) + 'px');
// } // }
if (!collapsed && gridWidth < options.collapseBreakpoint if (!collapsed && gridWidth < options.collapseBreakpoint
&& visibleColumns.length > 1) { && visibleColumns.length > 1) {
collapsed = true; collapsed = true;
$gridDiv.addClass('slick-stacked'); $gridDiv.addClass('slick-stacked');
_this.grid.grid.getOptions().rowHeight = options.rowHeight
* visibleColumns.length; _this.grid.grid.getOptions().rowHeight = (options.collapsedRowHeight ? options.collapsedRowHeight : options.rowHeight)
// collapse * visibleColumns.length;
_this.grid.grid // collapse
.setColumns([{ _this.grid.grid
id: 0, .setColumns([{
tooltip: function (item, value) { id: 0,
var html = []; tooltip: function (item, value) {
for (var i = 0; i < visibleColumns.length; i++) { var html = [];
var text = visibleColumns[i].tooltip(item, visibleColumns[i] for (var i = 0; i < visibleColumns.length; i++) {
.getter(item)); var text = visibleColumns[i].tooltip(item, visibleColumns[i]
if (text != null && text !== '') { .getter(item));
html.push(text); if (text != null && 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
html .push('<div class="slick-table-wrapper"><div class="slick-cell-wrapper">');
.push('<div class="slick-table-wrapper"><div class="slick-cell-wrapper">'); if (options.rowHeader) { // e.g. render checkbox
if (options.rowHeader) { // e.g. render checkbox html.push(options.rowHeader(dataContext));
html.push(options.rowHeader(dataContext)); html.push('<div style="height:4px;"></div>');
}
for (var i = 0; i < visibleColumns.length; i++) {
if (i === 0) {
html
.push('<div style="font-weight:600;display:'
+ (options.rowHeader ? 'inline-block'
: 'block') + '">');
} else {
html.push('<div>');
} }
for (var i = 0; i < visibleColumns.length; i++) {
if (i > 0) {
html.push('<div style="height:4px;"></div>');
}
var c = visibleColumns[i];
html.push(c.name);
html.push(':');
var s = c.renderer(dataContext, c
.getter(dataContext));
html.push(s);
var c = visibleColumns[i]; }
var s = c.renderer(dataContext, c html.push('</div></div>');
.getter(dataContext)); return html.join('');
html.push(s); },
html.push('</div>'); sortable: false,
} name: ''
html.push('</div></div>'); }]);
return html.join(''); $gridDiv.find('.slick-header').hide();
}, _this.grid.grid.resizeCanvas();
sortable: false, _this.grid.grid.invalidate();
name: '' } else if (collapsed && gridWidth >= options.collapseBreakpoint) {
}]); $gridDiv.removeClass('slick-stacked');
$gridDiv.find('.slick-header').hide(); collapsed = false;
_this.grid.grid.resizeCanvas(); if (options.showHeader) {
_this.grid.grid.invalidate(); $gridDiv.find('.slick-header').show();
} else if (collapsed && gridWidth >= options.collapseBreakpoint) { }
$gridDiv.removeClass('slick-stacked'); _this.grid.grid.getOptions().rowHeight = options.rowHeight;
collapsed = false; _this.grid.grid.setColumns(visibleColumns);
if (options.showHeader) { _this.grid.grid.resizeCanvas();
$gridDiv.find('.slick-header').show(); if (options.select) {
} _this.grid.grid.setSelectedRows(_this.grid.grid
_this.grid.grid.getOptions().rowHeight = options.rowHeight; .getSelectedRows());
_this.grid.grid.setColumns(visibleColumns); }
_this.grid.grid.resizeCanvas(); _this.grid.grid.invalidate();
if (options.select) { } else {
_this.grid.grid.setSelectedRows(_this.grid.grid _this.grid.grid.resizeCanvas();
.getSelectedRows()); _this.grid.grid.invalidate();
} }
_this.grid.grid.invalidate();
} else { };
_this.grid.grid.resizeCanvas(); if (!options.showHeader) {
_this.grid.grid.invalidate(); $gridDiv.find('.slick-header').hide();
}
if (options.responsive) {
$(window).on('resize orientationchange', resize);
$gridDiv.on('remove', function () {
$(window).off('resize', resize);
});
resize();
}
this.resize = resize;
if (visibleColumns.length > 1 && options.items != null
&& options.items.length > 0) {
this.setItems(options.items);
} }
}; };
if (!options.showHeader) {
$gridDiv.find('.slick-header').hide();
}
if (options.responsive) {
$(window).on('resize orientationchange', resize);
$gridDiv.on('remove', function () {
$(window).off('resize', resize);
});
resize();
}
this.resize = resize;
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)) { if (_.isNumber(value)) {
...@@ -552,7 +549,15 @@ morpheus.Table.createOptions = function (options) { ...@@ -552,7 +549,15 @@ morpheus.Table.createOptions = function (options) {
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 '<div class="slick-table-wrapper"><div class="slick-cell-wrapper">' + column.renderer(dataContext, value) + '</div></div>';
var html = [];
html.push('<div class="slick-table-wrapper"><div class="slick-cell-wrapper">');
if (options.rowHeader && cell === 0) {
html.push(options.rowHeader(dataContext));
}
html.push(column.renderer(dataContext, value));
html.push('</div></div>');
return html.join('');
}, },
comparator: function (a, b) { comparator: function (a, b) {
...@@ -593,14 +598,7 @@ morpheus.Table.createOptions = function (options) { ...@@ -593,14 +598,7 @@ morpheus.Table.createOptions = function (options) {
return item[c.field]; return item[c.field];
}; };
} }
if (options.rowHeader && i === 0) {
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); columns.push(column);
}); });
......
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