easyuidatagrid列右键全局设置表格隐藏或显⽰列
项⽬第⼀次⽤EASYUI，这个UI个⼈认为功能组件没有LIGERUI丰富，但是相对LIGERUI来说，EASYUI的BUG要少⼀些。项⽬中⽤到了动态显⽰或隐藏列的需求，今天查看了下官⽅提供的API与DEMO，找到了解决办法。我有三个解决⽅案，建议使⽤第三种。
第⼀种：
EASYUI官⽅叫法是：Context Menu on DataGrid。
效果如下图：
以上代码是单独对⼀个datagrid 进⾏操作，如果这样，那么系统需要在页⾯的每个datagrid⾥绑定onHeaderContextMenu函数，这个函数的意思是在⿏标右击DataGrid表格头的时候触发，如果这样做那⼯作量⼜上去了，我的想法是⽆需开发⼈员做任何操作，只要加载datagrid表格即⾃动增加右键弹出菜单选择显⽰或隐藏列，若要实现这个需求，那么要改下EASYUI的源码，我⽤的EASYUI版本是现在最新的1.4.1。
第⼆种（当页⾯有多个datagrid时，将会有BUG）：
如下步骤：
1、新建⼀个JS⽂件，命名：lumn.js，如下代码：
// 动态改变列头.
srsvar cmenu;
function $onHeaderContextMenu(e){
e.preventDefault();
if (!cmenu){
createColumnMenu();
}
left:e.pageX,
top:e.pageY
});
}
playgroundfunction createColumnMenu() {
cmenu = $('<div/>').appendTo('body');
onClick : function(item) {
我的女神英文if (item.iconCls == 'icon-ok') {
// .datagrid-f为datagrid的class名，是easyui⾃⼰加上的。
// 隐藏列。
$('.datagrid-f').datagrid('hideColumn', item.name);
target : item.target,
iconCls : 'icon-empty'
});
} el {
// 显⽰列。
$('.datagrid-f').datagrid('showColumn', item.name);
target : item.target,
iconCls : 'icon-ok'
});
}
},
onHide : function(){
}
});
store怎么读
var fields = $('.datagrid-f').datagrid('getColumnFields');
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
var col = $('.datagrid-f').datagrid('getColumnOption', field);statues
text : col.title,
name : field,
iconCls : 'icon-ok'
});
}
马里奥 蒙蒂}
2、找到jquery.easyui.min.js，在datagrid绑定onHeaderContextMenu时加⼊o$onHeaderContextMenu函数，在8266⾏添加该代码，如下图：
$onHeaderContextMenu(e);
如下图：
3、将jquery.easyui.min.js和lumn.js引⼊到你项⽬，确保所有页⾯都能加载到这2个JS。
第三种（推荐）：
⽆需改源码，直接引⼊JS即可。
var createGridHeaderContextMenu = function(e, field) {
e.preventDefault();
var grid = $(this);/* grid本⾝ */
var headerContextMenu = this.headerContextMenu;/* grid上的列头菜单对象 */
var okCls = 'tree-checkbox1';// 选中
var emptyCls = 'tree-checkbox0';// 取消
if (!headerContextMenu) {
var tmenu = $('<div ></div>').appendTo('body');
var fields = grid.datagrid('getColumnFields');
for (var i = 0; i < fields.length; i++) {
var fildOption = grid.datagrid('getColumnOption', fields[i]);
if (!fildOption.hidden) {
$('<div iconCls="' + okCls + '" field="' + fields[i] + '"/>')
.html(fildOption.title).appendTo(tmenu);
} el {
$('<div iconCls="' + emptyCls + '" field="' + fields[i] + '"/>')
.
html(fildOption.title).appendTo(tmenu);
}
}
headerContextMenu = this.headerContextMenu = u({
onClick : function(item) {
var field = $(item.target).attr('field');
if (item.iconCls == okCls) {
grid.datagrid('hideColumn', field);
$(this).menu('tIcon', {
target : item.target,
iconCls : emptyCls
});
} el {
grid.datagrid('showColumn', field);
$(this).menu('tIcon', {
target : item.target,
iconCls : okCls
});
}
}
});
aeroplane怎么读}
left : e.pageX,
twitter是什么
top : e.pageY托福暑假班
});
};
$.fn.HeaderContextMenu = createGridHeaderContextMenu;
$.fn.HeaderContextMenu = createGridHeaderContextMenu;
