`
单一色调
  • 浏览: 86281 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Easyui显示隐藏列

 
阅读更多
/**
 * 
 * @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 = $('<div style="width:100px;"></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="icon-ok" field="' + fields[i] + '"/>').html(fildOption.title).appendTo(tmenu);
			} else {
				$('<div iconCls="icon-empty" field="' + fields[i] + '"/>').html(fildOption.title).appendTo(tmenu);
			}
		}
		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;

这样就能勾选想要的显示列了!

分享到:
评论

相关推荐

    easyui datagrid 动态隐藏显示列

    jquery easyui 扩展 datagrid 自定义动态隐藏显示列

    easyUI 右键列头,控制列的显示和隐藏

    easy-UI 右键列头,控制列的显示和隐藏,是啊easyui拓展的功能之一,只需引入此js代码,即可产生效果,右键列名,控制列的显示和隐藏

    easyui 自定义显示列

    此外,还添加了一个按钮来触发显示/隐藏列的操作。 ##### 3.2 JavaScript逻辑处理 接下来,需要编写JavaScript代码来处理复选框的状态变化,并根据这些变化更新DataGrid的显示状态。示例代码如下: ```javascript...

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    ### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细...

    jquery-easyui拓展之datagrid复合表头列锁定/解锁和列隐藏/显示

    http://blog.csdn.net/tianxiawudi0720/article/details/47401399

    EasyUI 1.3.1动态表格列示例

    // 根据条件动态隐藏或显示列 var visibleColumns = ...; $('#datagrid').datagrid('refreshColumns', visibleColumns); } }); ``` 6. **源码修改**:在某些情况下,EasyUI的默认功能可能无法满足特定需求,...

    easyui datagrid 增加鼠标悬停弹窗事件

    在本示例中,我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能:当鼠标悬停在某一行时,弹出一个窗口显示该行的关键信息,例如用于图片预览。以下是对这个知识点的详细解释: 1. **EasyUI Datagrid**: ...

    jquery-easyui-datagridview datagrid-detailview.js升级自定义展开按钮功能

    jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...

    Easyui指定列合并.rar_源码

    在给定的"Easyui指定列合并.rar_源码"资源中,我们可以看到一个专门针对EasyUI表格的特定功能——如何对相同列进行合并。 EasyUI的表格组件(datagrid)是其核心组件之一,它提供了一种灵活的方式来展示和操作数据...

    EasyUI 数据表格datagrid列自适应内容宽度的实现

    这个方法首先会使数据表格显示一个加载状态,然后执行设置列宽的操作,最后再隐藏加载状态。changeWidth方法中也包含了lockColumn方法的调用,即在设置完列宽后,禁止表格列宽的自适应调整,避免了因再次调整列宽而...

    Juery easyUi edatagride

    - 表头自定义:可设置列宽、隐藏/显示列、表头合并等。 - 批量操作:支持批量选择和批量操作,如删除、更新等。 3. **使用步骤** - 引入依赖:在HTML文件中引入jQuery、EasyUI及eDataGrid的CSS和JS文件。 - ...

    .net 使用easyUI_DataGrid分页

    { field: 'ColumnName3', title: '列3标题', width: 120, hidden: true }, // 隐藏列 { field: 'ColumnName4', title: '列4标题', width: 80, editable: true, align: 'right' } // 可编辑且右对齐 ``` 此外,我们...

    jQuery Easyui Treegrid实现显示checkbox功能

    最后,关于通过类型判断显示不同的列,可以根据 `ProductType` 字段的值来决定哪些列应该显示或隐藏。在初始化 Treegrid 时,我们已经根据 `ProductType` 的值设置了 `hidden` 属性,例如 `ishowPack` 和 `...

    easyui 1.4 API中文文档

    `columns`属性定义列的显示,`onDblClickRow`等事件处理函数可以响应用户操作。 4. **下拉菜单(combobox)** Combobox结合了输入框和下拉列表,提供了一个便捷的筛选选择方式。通过`options`配置,可以设定下拉...

    easyui datagrid 表格 打印

    这意味着需要遍历每一行数据,对每个使用了`formatter`的列应用对应的格式化逻辑。 4. **创建临时HTML**:使用格式化后的数据创建一个新的HTML结构,这个结构将用于打印。可以创建一个隐藏的div,然后将格式化后的...

    EasyUI的增删查改

    - 通过设置Grid的`loadFilter`函数,可以对返回的数据进行处理,如计算总数、隐藏列等。 通过这个“EasyUI的增删查改”项目,你可以深入理解EasyUI的使用方法,并掌握如何构建一个功能完备的数据管理应用。这不仅...

    《jQuery EasyUI开发指南》书籍源码

    2. **数据绑定**:jQuery EasyUI支持通过JSON数据动态填充表格和其他组件,这在权限系统中非常重要,因为通常需要根据用户角色和权限动态显示或隐藏某些功能和数据。 3. **事件处理**:通过监听用户操作,如点击...

    Easyui未混淆源码1.3

    它可以包含标题、工具栏、关闭按钮等元素,同时提供了加载、隐藏、显示、刷新等功能。源码会揭示如何创建和管理Panel,以及如何与其他组件配合使用。 4. **jQuery Tree**: Tree 组件用于展示层次结构的数据,常用于...

    easyui datagrid 导出到excel

    "EasyUI Datagrid 导出到Excel"这一主题涉及的是如何将EasyUI Datagrid中的数据显示在Excel表格中,方便用户进行数据处理和分析。以下是对这个知识点的详细说明: 1. EasyUI Datagrid简介: EasyUI Datagrid是基于...

Global site tag (gtag.js) - Google Analytics