Browse Source

Implement dynamic table columns hiding

adaptive-webui-19844
buinsky 8 years ago
parent
commit
3ac87f22cb
  1. 2
      src/webui/www/public/scripts/contextmenu.js
  2. 68
      src/webui/www/public/scripts/dynamicTable.js

2
src/webui/www/public/scripts/contextmenu.js

@ -228,7 +228,7 @@ var ContextMenu = new Class({
//execute an action //execute an action
execute: function (action, element) { execute: function (action, element) {
if (this.options.actions[action]) { if (this.options.actions[action]) {
this.options.actions[action](element, this); this.options.actions[action](element, this, action);
} }
return this; return this;
} }

68
src/webui/www/public/scripts/dynamicTable.js

@ -31,6 +31,8 @@
**************************************************************/ **************************************************************/
var DynamicTableHeaderContextMenuClass = null;
var DynamicTable = new Class({ var DynamicTable = new Class({
initialize : function () {}, initialize : function () {},
@ -52,6 +54,7 @@ var DynamicTable = new Class({
this.updateTableHeaders(); this.updateTableHeaders();
this.setupCommonEvents(); this.setupCommonEvents();
this.setupHeaderEvents(); this.setupHeaderEvents();
this.setupHeaderMenu();
}, },
setupCommonEvents : function () { setupCommonEvents : function () {
@ -250,6 +253,71 @@ var DynamicTable = new Class({
} }
}, },
setupDynamicTableHeaderContextMenuClass : function () {
if (!DynamicTableHeaderContextMenuClass) {
DynamicTableHeaderContextMenuClass = new Class({
Extends: ContextMenu,
updateMenuItems: function () {
for (var i = 0; i < this.dynamicTable.columns.length; i++) {
if (this.dynamicTable.columns[i].caption === '')
continue;
if (this.dynamicTable.columns[i].visible !== '0')
this.setItemChecked(this.dynamicTable.columns[i].name, true);
else
this.setItemChecked(this.dynamicTable.columns[i].name, false);
}
}
});
}
},
showColumn : function (columnName, show) {
this.columns[columnName].visible = show ? '1' : '0';
localStorage.setItem('column_' + columnName + '_visible_' + this.dynamicTableDivId, show ? '1' : '0');
this.updateColumn(columnName);
},
setupHeaderMenu : function () {
this.setupDynamicTableHeaderContextMenuClass();
var menuId = this.dynamicTableDivId + '_headerMenu';
var ul = new Element('ul', {id: menuId, class: 'contextMenu'});
var createLi = function(columnName, text) {
var html = '<a href="#' + columnName + '" ><img src="theme/checked"/>' + escapeHtml(text) + '</a>';
return new Element('li', {html: html});
};
var actions = {};
var onMenuItemClicked = function (element, ref, action) {
this.showColumn(action, this.columns[action].visible === '0');
}.bind(this);
for (var i = 0; i < this.columns.length; i++) {
var text = this.columns[i].caption;
if (text === '')
continue;
ul.appendChild(createLi(this.columns[i].name, text));
actions[this.columns[i].name] = onMenuItemClicked;
}
ul.inject(document.body);
this.headerContextMenu = new DynamicTableHeaderContextMenuClass({
targets: '#' + this.dynamicTableFixedHeaderDivId + ' tr',
actions: actions,
menu : menuId,
offsets : {
x : -15,
y : 2
}
});
this.headerContextMenu.dynamicTable = this;
},
initColumns : function () {}, initColumns : function () {},
newColumn : function (name, style, caption, defaultWidth) { newColumn : function (name, style, caption, defaultWidth) {

Loading…
Cancel
Save