easyui动态显示和隐藏数据表格标题

var cmenu = null;
var obj = {
		createColumnMenu:function(){
			cmenu = $('<div/>').appendTo('body');
			cmenu.menu();
			var fields = $('#proPlan-grid').datagrid('getColumnFields');
			for(var i = 0;i < fields.length; i ++){
				var field = fields[i];
				var col = $('#proPlan-grid').datagrid('getColumnOption',field);
				cmenu.menu('appendItem',{
					text:col.title,
					name:field,
					iconCls:'icon-ok'
				});
			};
			cmenu.menu({
				onClick:function(item){
					if (item.iconCls == 'icon-ok') {
						$('#proPlan-grid').datagrid('hideColumn',item.name);
						cmenu.menu('setIcon',{
							target:item.target,
							iconCls:'icon-empty'
						});
					}else{
						$('#proPlan-grid').datagrid('showColumn',item.name);
						cmenu.menu('setIcon',{
							target:item.target,
							iconCls:'icon-ok'
						});
					}
						
				}
			});
		},
};
	

  在datagrid属性中添加方法

onHeaderContextMenu:function (e,field){
            e.preventDefault();
            if (!cmenu) {
                obj.createColumnMenu();
            }
            cmenu.menu('show',{
                left:e.pageX,
                right:e.pageY
            });
        }

效果

 

posted @ 2018-08-24 14:52  大橙子cc  阅读(1312)  评论(0编辑  收藏  举报