新增文件jquery.easyui.datagrid.column.js
// 动态改变列头. var cmenu; function $onHeaderContextMenu(e){ e.preventDefault(); if (!cmenu){ createColumnMenu(); } cmenu.menu('show', { left:e.pageX, top:e.pageY }); } function createColumnMenu() { cmenu = $('<div/>').appendTo('body'); cmenu.menu({ onClick : function(item) { if (item.iconCls == 'icon-ok') { // .datagrid-f为datagrid的class名,是easyui自己加上的。 // 隐藏列。 cmenu.menu('setIcon', { target : item.target, iconCls : 'icon-empty' }); $('.datagrid-f').datagrid('hideColumn', item.name); } else { // 显示列。 cmenu.menu('setIcon', { target : item.target, iconCls : 'icon-ok' }); $('.datagrid-f').datagrid('showColumn', item.name); } }, onHide : function(){ } }); 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); cmenu.menu('appendItem', { text : col.title, name : field, iconCls : 'icon-ok' }); } }
2、把文件中方法引用到jquery.easyui.min.js中如图
![](http://dl2.iteye.com/upload/attachment/0123/2891/29e42ede-be49-399b-ba30-e4ced87d758b.png)
3、当要求datagrid具有列自定义隐藏和展示功能时,必须把文件jquery.easyui.datagrid.column.js引入