jquery-easyui中datagrid扩展,隐藏显示表头功能
2024-08-29 08:24:17
今天,后台中需要新增一个功能,用户可以自由选择显示的列,之后保存到本地localStroage中。所以扩展了easyui中datagrid的onHeaderContextMenu方法。
使用方法:
_this.$table.datagrid(_.extend({
fit: true,
border: false,
striped: true,
method: "get",
pagination: true,
singleSelect: true,
loadMsg: "加载数据中...",
columns: _this.getTableColumns(),
onResize: function () {
if (_this.$ajaxDialog) {
_this.$ajaxDialog.dialog("restore");
_this.$ajaxDialog.dialog("maximize");
}
},
onSelect: function (rowIndex, rowData) {
_this.currentRow = rowData;
_this.currentRowIndex = rowIndex;
_this.toolbarViewModel.disabled(false);
},
onLoadError: function () {
// $.messager.alert("提示", "服务器忙,请稍后再试!", "warning");
},
onHeaderContextMenu: function (e, field) {
$.fn.easyuiExtension.showHideColumns(_this.$table, {
left: e.clientX,
top: e.clientY
});
e.preventDefault();
},
onRowContextMenu: function (e, rowIndex, rowData) {
e.preventDefault();
$(this).datagrid("unselectAll");
$(this).datagrid("selectRow", rowIndex); if (_this.$menu) {
_this.$menu.menu("show", {
left: e.pageX,
top: e.pageY
});
}
}
}, options));
$.fn.easyuiExtension = {
showHideColumns: function ($table, position) {
var $menus = $(document.createElement("div"));
var canClick = true, nonHiddenCount = 0;
var columnsFields = $table.datagrid("getColumnFields"),
columns = [],
columsDetail; for (var i in columnsFields) {
columsDetail = $table.datagrid("getColumnOption", columnsFields[i]);
columns.push(columsDetail);
}
if (columns.length) {
$menus.menu({
hideOnUnhover: false,
duration: 200,
onHide: function () {
setTimeout(function () {
$menus.menu("destroy");
}, 200);
},
onClick: function (item) {
if (canClick || !item.iconCls) {
$table.datagrid((item.iconCls ? "hideColumn" : "showColumn"), item.id);
}
}
}); for (var i in columns) {
var item = columns[i];
!item.hidden && nonHiddenCount++;
$menus.menu("appendItem", {
text: item.title,
id: item.field,
iconCls: item.hidden ? "" : "icon-ok"
});
}
canClick = nonHiddenCount > 1;
$menus.menu("show", position);
}
}
};
效果如下:
最新文章
- Hystrix框架1--入门
- 实现UITextView的placeholder
- 区间dp总结篇
- 简易版C语言程序设计语法
- 利用tween.js算法生成缓动效果
- JavaScript作用域原理(一)——作用域链
- Codeforces Round #384 (Div. 2) C. Vladik and fractions 构造题
- config文件 反射方法
- storm sum aggregate 原语 聚合 本地测试
- yield 关键字和迭代器
- javascript系列之DOM(一)
- 搜索广告与广告网络Demand技术-探索与利用
- 远程推送-----iOS
- react-native-fs插件的使用以及遇到的坑
- 一个想法照进现实-《IT连》创业项目:聊聊最近两三事
- 环境部署(九):linux下安装python+chrome+Xvfb
- spring aop -包的问题
- laravel Eloquent 查询数据库判断获取的内容是否为空
- 【mybatis源码学习】mybtias扩展点
- ESXi 上创建CentOS虚拟机
热门文章
- leetcode 题解:Search in Rotated Sorted Array II (旋转已排序数组查找2)
- [转]poll技术
- 设置eclipse在linux下提示
- Spring Data:企业级Java的现代数据访问技术(影印版)
- SQL Server之内连接 左连接 右连接 全连接 交叉连接
- SQL Server使用WITH AS递归查找
- spring--事务原理
- oralce之存储过程
- poj3211
- 解决方案:Error:Execution failed for task ':app:compileDebugAidl'. >; aidl is missing