easyui 获取隐藏列_jquery easyui datagrid 自定义显示隐藏列

在项目中使用数据表格jquery easyui datagrid ，在列很多时，没有足够宽度来显示数据表格，可以自定义要求显示隐藏那些表头的列，以下是代码，需要的可以参考。

/**

* @author 孙宇

*

* @requires jQuery,EasyUI

*

* 为datagrid、treegrid增加表头菜单，用于显示或隐藏列，注意：冻结列不在此菜单中

*/

var createGridHeaderContextMenu = function(e, field) {

e.preventDefault();

var grid = $(this);/* grid本身 */

var headerContextMenu = this.headerContextMenu;/* grid上的列头菜单对象 */

if (!headerContextMenu) {

var tmenu = $('

var fields = grid.datagrid('getColumnFields');

for ( var i = 0; i < fields.length; i++) {

var fildOption = grid.datagrid('getColumnOption', fields[i]);

if (!fildOption.hidden) {

$('

} else {

$('

}

}

headerContextMenu = this.headerContextMenu = tmenu.menu({

onClick : function(item) {

var field = $(item.target).attr('field');

if (item.iconCls == 'icon-ok') {

grid.datagrid('hideColumn', field);

$(this).menu('setIcon', {

target : item.target,

iconCls : 'icon-empty'

});

} else {

grid.datagrid('showColumn', field);

$(this).menu('setIcon', {

target : item.target,

iconCls : 'icon-ok'

});

}

}

});

}

headerContextMenu.menu('show', {

left : e.pageX,

top : e.pageY

});

};

$.fn.datagrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;

$.fn.treegrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;

在线演示：http://sshe.btboys.com