Skip to content

GitLab

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

fixed errant text

parent 697922f1
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 180 deletions
src/ui/table.js
View file @ cadb0099
...@@ -14,203 +14,203 @@ ...@@ -14,203 +14,203 @@
* visible, name, field, renderer * 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; morpheus.Table = function (options) {
var $gridDiv = $('<div class="slick-table' options = morpheus.Table.createOptions(options);
+ (options.tableClass ? (' ' + options.tableClass) : '') this.options = options;
+ '" style="width:' + options.fixedWidth + ';height:' + height if (!options.width) {
+ '"></div>'); options.width = options.$el.attr('class');
}
this.$gridDiv = $gridDiv; var _this = this;
$gridDiv.appendTo(options.$el);
var columns = options.columns; var height = options.height;
this.columns = columns; var $gridDiv = $('<div class="slick-table'
var visibleColumns = columns.filter(function (c) { + (options.tableClass ? (' ' + options.tableClass) : '')
return c.visible; + '" 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>');
}); });
var grid = new morpheus.Grid({ select.push('</select>');
gridOptions: { var $select = $(select.join(''));
select: options.select, var $div = $('<div class="pull-right"></div>');
rowHeight: options.rowHeight, $select.appendTo($div);
autoEdit: false, $div.prependTo(options.$el);
editable: false, $select.selectpicker({
autoHeight: options.height === 'auto', iconBase: 'fa',
enableTextSelectionOnCells: true, tickIcon: 'fa-check',
}, style: 'btn-default btn-sm'
$el: $gridDiv,
items: options.items,
columns: visibleColumns
}); });
this.grid = grid; $select.on('change', function () {
if (options.search) { var selectedItems = $select.val();
var tableSearch = new morpheus.TableSearchUI(); var selectedItemsSet = new morpheus.Set();
tableSearch.$el.prependTo(options.$el); selectedItems.forEach(function (item) {
tableSearch.setTable(this); selectedItemsSet.add(parseInt(item));
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>'); visibleColumns = [];
var $select = $(select.join('')); _this.columns.forEach(function (c, i) {
var $div = $('<div class="pull-right"></div>'); if (selectedItemsSet.has(i)) {
$select.appendTo($div); visibleColumns.push(c);
$div.prependTo(options.$el); }
$select.selectpicker({
iconBase: 'fa',
tickIcon: 'fa-check',
style: 'btn-default btn-sm'
}); });
$select.on('change', function () { grid.setColumns(visibleColumns);
var selectedItems = $select.val(); _this.resize();
var selectedItemsSet = new morpheus.Set(); _this.redraw();
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.collapsedRowHeight ? options.collapsedRowHeight : options.rowHeight) _this.grid.grid.getOptions().rowHeight = (options.collapsedRowHeight ? options.collapsedRowHeight : options.rowHeight)
* visibleColumns.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 < visibleColumns.length; i++) { for (var i = 0; i < visibleColumns.length; i++) {
var text = visibleColumns[i].tooltip(item, visibleColumns[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, },
getter: function (item) { collapsed: true,
return item; getter: function (item) {
}, return item;
formatter: function (row, cell, value, columnDef, },
dataContext) { formatter: function (row, cell, value, columnDef,
var html = []; dataContext) {
html var html = [];
.push('<div class="slick-table-wrapper"><div class="slick-cell-wrapper">'); html
if (options.rowHeader) { // e.g. render checkbox .push('<div class="slick-table-wrapper"><div class="slick-cell-wrapper">');
html.push(options.rowHeader(dataContext)); if (options.rowHeader) { // e.g. render checkbox
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="height:4px;"></div>'); html.push('<div style="height:4px;"></div>');
} }
for (var i = 0; i < visibleColumns.length; i++) { var c = visibleColumns[i];
if (i > 0) { html.push(c.name);
html.push('<div style="height:4px;"></div>'); html.push(':');
} var s = c.renderer(dataContext, c
var c = visibleColumns[i]; .getter(dataContext));
html.push(c.name); html.push(s);
html.push(':');
var s = c.renderer(dataContext, c
.getter(dataContext));
html.push(s);
}
html.push('</div></div>');
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();
}
}; }
if (!options.showHeader) { html.push('</div></div>');
return html.join('');
},
sortable: false,
name: ''
}]);
$gridDiv.find('.slick-header').hide(); $gridDiv.find('.slick-header').hide();
} _this.grid.grid.resizeCanvas();
if (options.responsive) { _this.grid.grid.invalidate();
$(window).on('resize orientationchange', resize); } else if (collapsed && gridWidth >= options.collapseBreakpoint) {
$gridDiv.on('remove', function () { $gridDiv.removeClass('slick-stacked');
$(window).off('resize', resize); collapsed = false;
}); if (options.showHeader) {
resize(); $gridDiv.find('.slick-header').show();
} }
this.resize = resize; _this.grid.grid.getOptions().rowHeight = options.rowHeight;
if (visibleColumns.length > 1 && options.items != null _this.grid.grid.setColumns(visibleColumns);
&& options.items.length > 0) { _this.grid.grid.resizeCanvas();
this.setItems(options.items); 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) { morpheus.Table.defaultRenderer = function (item, value) {
if (_.isNumber(value)) { if (_.isNumber(value)) {
......
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