diff --git a/src/ui/table.js b/src/ui/table.js index 380e2edd0f3893cb4818d8a155b3b982d7c0ba4f..73af1b50ccfece5eb494211621ea3ef38ac9e6bf 100644 --- a/src/ui/table.js +++ b/src/ui/table.js @@ -14,203 +14,203 @@ * visible, name, field, renderer */ -items: [], - morpheus.Table = function (options) { - options = morpheus.Table.createOptions(options); - this.options = options; - if (!options.width) { - options.width = options.$el.attr('class'); - } - var _this = this; - var height = options.height; - var $gridDiv = $('
'); - - this.$gridDiv = $gridDiv; - $gridDiv.appendTo(options.$el); - var columns = options.columns; - this.columns = columns; - var visibleColumns = columns.filter(function (c) { - return c.visible; +morpheus.Table = function (options) { + options = morpheus.Table.createOptions(options); + this.options = options; + if (!options.width) { + options.width = options.$el.attr('class'); + } + var _this = this; + + var height = options.height; + var $gridDiv = $(''); + + 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(''); + var $select = $(select.join('')); + var $div = $(''); + $select.appendTo($div); + $div.prependTo(options.$el); + $select.selectpicker({ + iconBase: 'fa', + tickIcon: 'fa-check', + style: 'btn-default btn-sm' }); - 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(''); - var $select = $(select.join('')); - var $div = $(''); - $select.appendTo($div); - $div.prependTo(options.$el); - $select.selectpicker({ - iconBase: 'fa', - tickIcon: 'fa-check', - style: 'btn-default btn-sm' + visibleColumns = []; + _this.columns.forEach(function (c, i) { + if (selectedItemsSet.has(i)) { + visibleColumns.push(c); + } }); - $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(); + 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(); - if (gridWidth === lastWidth) { - return; - } - lastWidth = gridWidth; - - $gridDiv.css('width', gridWidth + 'px'); - // if (options.responsiveHeight) { - // var verticalPosition = _this.$gridDiv[0].getBoundingClientRect().top - // + window.pageYOffset; - // $gridDiv.css('height', - // (document.body.clientHeight - verticalPosition) + 'px'); - // } - if (!collapsed && gridWidth < options.collapseBreakpoint - && visibleColumns.length > 1) { - collapsed = true; - $gridDiv.addClass('slick-stacked'); - - _this.grid.grid.getOptions().rowHeight = (options.collapsedRowHeight ? options.collapsedRowHeight : options.rowHeight) - * visibleColumns.length; - // collapse - _this.grid.grid - .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); - } + var gridWidth = options.$el.width(); + if (gridWidth === lastWidth) { + return; + } + lastWidth = gridWidth; + + $gridDiv.css('width', gridWidth + 'px'); + // if (options.responsiveHeight) { + // var verticalPosition = _this.$gridDiv[0].getBoundingClientRect().top + // + window.pageYOffset; + // $gridDiv.css('height', + // (document.body.clientHeight - verticalPosition) + 'px'); + // } + if (!collapsed && gridWidth < options.collapseBreakpoint + && visibleColumns.length > 1) { + collapsed = true; + $gridDiv.addClass('slick-stacked'); + + _this.grid.grid.getOptions().rowHeight = (options.collapsedRowHeight ? options.collapsedRowHeight : options.rowHeight) + * visibleColumns.length; + // collapse + _this.grid.grid + .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('