/** * * @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;
这样就能勾选想要的显示列了!
相关推荐
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
easy-UI 右键列头,控制列的显示和隐藏,是啊easyui拓展的功能之一,只需引入此js代码,即可产生效果,右键列名,控制列的显示和隐藏
此外,还添加了一个按钮来触发显示/隐藏列的操作。 ##### 3.2 JavaScript逻辑处理 接下来,需要编写JavaScript代码来处理复选框的状态变化,并根据这些变化更新DataGrid的显示状态。示例代码如下: ```javascript...
### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细...
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
// 根据条件动态隐藏或显示列 var visibleColumns = ...; $('#datagrid').datagrid('refreshColumns', visibleColumns); } }); ``` 6. **源码修改**:在某些情况下,EasyUI的默认功能可能无法满足特定需求,...
在本示例中,我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能:当鼠标悬停在某一行时,弹出一个窗口显示该行的关键信息,例如用于图片预览。以下是对这个知识点的详细解释: 1. **EasyUI Datagrid**: ...
jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...
在给定的"Easyui指定列合并.rar_源码"资源中,我们可以看到一个专门针对EasyUI表格的特定功能——如何对相同列进行合并。 EasyUI的表格组件(datagrid)是其核心组件之一,它提供了一种灵活的方式来展示和操作数据...
这个方法首先会使数据表格显示一个加载状态,然后执行设置列宽的操作,最后再隐藏加载状态。changeWidth方法中也包含了lockColumn方法的调用,即在设置完列宽后,禁止表格列宽的自适应调整,避免了因再次调整列宽而...
- 表头自定义:可设置列宽、隐藏/显示列、表头合并等。 - 批量操作:支持批量选择和批量操作,如删除、更新等。 3. **使用步骤** - 引入依赖:在HTML文件中引入jQuery、EasyUI及eDataGrid的CSS和JS文件。 - ...
{ field: 'ColumnName3', title: '列3标题', width: 120, hidden: true }, // 隐藏列 { field: 'ColumnName4', title: '列4标题', width: 80, editable: true, align: 'right' } // 可编辑且右对齐 ``` 此外,我们...
最后,关于通过类型判断显示不同的列,可以根据 `ProductType` 字段的值来决定哪些列应该显示或隐藏。在初始化 Treegrid 时,我们已经根据 `ProductType` 的值设置了 `hidden` 属性,例如 `ishowPack` 和 `...
`columns`属性定义列的显示,`onDblClickRow`等事件处理函数可以响应用户操作。 4. **下拉菜单(combobox)** Combobox结合了输入框和下拉列表,提供了一个便捷的筛选选择方式。通过`options`配置,可以设定下拉...
这意味着需要遍历每一行数据,对每个使用了`formatter`的列应用对应的格式化逻辑。 4. **创建临时HTML**:使用格式化后的数据创建一个新的HTML结构,这个结构将用于打印。可以创建一个隐藏的div,然后将格式化后的...
- 通过设置Grid的`loadFilter`函数,可以对返回的数据进行处理,如计算总数、隐藏列等。 通过这个“EasyUI的增删查改”项目,你可以深入理解EasyUI的使用方法,并掌握如何构建一个功能完备的数据管理应用。这不仅...
2. **数据绑定**:jQuery EasyUI支持通过JSON数据动态填充表格和其他组件,这在权限系统中非常重要,因为通常需要根据用户角色和权限动态显示或隐藏某些功能和数据。 3. **事件处理**:通过监听用户操作,如点击...
它可以包含标题、工具栏、关闭按钮等元素,同时提供了加载、隐藏、显示、刷新等功能。源码会揭示如何创建和管理Panel,以及如何与其他组件配合使用。 4. **jQuery Tree**: Tree 组件用于展示层次结构的数据,常用于...
"EasyUI Datagrid 导出到Excel"这一主题涉及的是如何将EasyUI Datagrid中的数据显示在Excel表格中,方便用户进行数据处理和分析。以下是对这个知识点的详细说明: 1. EasyUI Datagrid简介: EasyUI Datagrid是基于...