在线演示:http://sshe.btboys.com
将下面代码放到easyui.min.js后面就行,一般我们自己新建立一个xxx.JS,放到里面
<script src="easyui.min.js"></script>
<script src="xxx.js"></script>
/**
* @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 = $('<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;
- 大小: 43.3 KB
分享到:
相关推荐
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制计算机,而不是计算机控制用户;... Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
解决EasyUIdataGrid列比较多,无数据,列展现不全
前台使用Jquery EasyUI 插件datagrid实现多表头动态生成的功能
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
easyui treegrid 冻结右侧列插件
JS EasyUI DataGrid动态加载数据
EasyUI DataGrid过滤用法实例
easyui1.4.5增加一个鼠标滑过行,注意是行不是列,然后弹出框显示某些关键信息,如经典的图片预览操作,内容提供demo,并附修改方法,这个方法是修改的源码,没有增加扩展实现,若愿意请自行实现
修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现... 3、解决类型为combobox显示为value而不是text问题
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
easyUI datagrid 自动调整行号大小
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
easyUI中datagrid鼠标悬浮显示图片,博客地址:https://blog.csdn.net/lwf3115841/article/details/119531658?spm=1001.2014.3001.5501
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
扩展EasyUi的TreeGrid拖动方式,实现 多个grid相互拖动,同时增加了一些拖动控制,treegrid生成采用数据生成。
easy-UI 右键列头,控制列的显示和隐藏,是啊easyui拓展的功能之一,只需引入此js代码,即可产生效果,右键列名,控制列的显示和隐藏
DataGrid表头合并和单元格内容合并-升级版
easyui datagrid表格打印,支持formatter格式化数据的打印,还原的最初datagrid 的表格数据