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('
'); - }, - collapsed: true, - getter: function (item) { - return item; - }, - formatter: function (row, cell, value, columnDef, - dataContext) { - var html = []; - html - .push('
'); - if (options.rowHeader) { // e.g. render checkbox - html.push(options.rowHeader(dataContext)); + } + return html.join('
'); + }, + collapsed: true, + getter: function (item) { + return item; + }, + formatter: function (row, cell, value, columnDef, + dataContext) { + var html = []; + html + .push('
'); + if (options.rowHeader) { // e.g. render checkbox + html.push(options.rowHeader(dataContext)); + html.push('
'); + } + for (var i = 0; i < visibleColumns.length; i++) { + if (i > 0) { html.push('
'); } - for (var i = 0; i < visibleColumns.length; i++) { - if (i > 0) { - html.push('
'); - } - var c = visibleColumns[i]; - html.push(c.name); - html.push(':'); - var s = c.renderer(dataContext, c - .getter(dataContext)); - html.push(s); - - } - html.push('
'); - return html.join(''); - }, - sortable: false, - name: '' - }]); - $gridDiv.find('.slick-header').hide(); - _this.grid.grid.resizeCanvas(); - _this.grid.grid.invalidate(); - } else if (collapsed && gridWidth >= options.collapseBreakpoint) { - $gridDiv.removeClass('slick-stacked'); - collapsed = false; - if (options.showHeader) { - $gridDiv.find('.slick-header').show(); - } - _this.grid.grid.getOptions().rowHeight = options.rowHeight; - _this.grid.grid.setColumns(visibleColumns); - _this.grid.grid.resizeCanvas(); - if (options.select) { - _this.grid.grid.setSelectedRows(_this.grid.grid - .getSelectedRows()); - } - _this.grid.grid.invalidate(); - } else { - _this.grid.grid.resizeCanvas(); - _this.grid.grid.invalidate(); - } + var c = visibleColumns[i]; + html.push(c.name); + html.push(':'); + var s = c.renderer(dataContext, c + .getter(dataContext)); + html.push(s); - }; - if (!options.showHeader) { + } + html.push('
'); + return html.join(''); + }, + sortable: false, + name: '' + }]); $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); + _this.grid.grid.resizeCanvas(); + _this.grid.grid.invalidate(); + } else if (collapsed && gridWidth >= options.collapseBreakpoint) { + $gridDiv.removeClass('slick-stacked'); + collapsed = false; + if (options.showHeader) { + $gridDiv.find('.slick-header').show(); + } + _this.grid.grid.getOptions().rowHeight = options.rowHeight; + _this.grid.grid.setColumns(visibleColumns); + _this.grid.grid.resizeCanvas(); + if (options.select) { + _this.grid.grid.setSelectedRows(_this.grid.grid + .getSelectedRows()); + } + _this.grid.grid.invalidate(); + } else { + _this.grid.grid.resizeCanvas(); + _this.grid.grid.invalidate(); } }; + 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) { if (_.isNumber(value)) {