jquery-easyui中datagrid扩展,隐藏显示表头功能
今天,后台中需要新增一个功能,用户可以自由选择显示的列,之后保存到本地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);
}
}
};
效果如下:
jquery-easyui中datagrid扩展,隐藏显示表头功能的更多相关文章
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 扩展行显示细节
数据网格(datagrid)可以改变它的视图(view)来显示不同的效果.使用详细视图,数据网格(datagrid)可以在数据行的左边显示展开按钮("+" 或者 "-&q ...
- 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能
我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...
- [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列
为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid. ...
- easyUI中datagrid展示对象下属性以及显示多个子属性(Day_37)
easyUI中datagrid展示对象下属性以及显示多个子属性 显示对象单个属性值 添加formatter属性 <th field="decidedzone" width=& ...
- 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- 实例:SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 扩展编辑器
jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据. 所有的编辑器(editor)都定义在 $.fn.datag ...
随机推荐
- 函数参数选项的处理getopt getopt_long getopt_long_only
转载:http://blog.chinaunix.net/uid-20321537-id-1966849.html 在头文件中int getopt(int argc,char *argv[], c ...
- (转)内网网站发布到外网-nat123动态公网IP动态域名解析
环境描述: 路由器分配的是动态公网IP,且有路由器登录管理权限,网站服务器部署在路由器内部网络.如何将内网网站发布到外网大众访问? 解决方案: 内网使用nat123动态域名解析,将域名实时固定解析到路 ...
- Oracle基础 动态SQL语句
一.静态SQL和动态SQL的概念. 1.静态SQL 静态SQL是我们常用的使用SQL语句的方式,就是编写PL/SQL时,SQL语句已经编写好了.因为静态SQL是在编写程序时就确定了,我们只能使用SQL ...
- Java基础--访问权限控制符
今天我们来探讨一下访问权限控制符. 使用场景一:攻城狮A编写了ClassA,但是他不想所有的攻城狮都可以使用该类,应该怎么办? 使用场景二:攻城狮A编写了ClassA,里面有func1方法和func2 ...
- 获取数组排序后的index算法实现
需求: 一个数组var arr = [4,7,2,9],排序后的新数组var newArr = [2,4,7,9]或者[9,7,4,2] 我们要得到的是排序后元数组的每一项在新数组中的位置所构成的数组 ...
- 使用Boost asio实现同步的TCP/IP通信
可以先了解一下Boost asio基本概念,以下是Boost asio实现的同步TCP/IP通信: 服务器程序部分,如果想保留套接字之后继续通信,可以动态申请socket_type,保存指针,因为so ...
- OpenShare常见问题及解答
OpenShare常见问题及回答: Q:OpenShare可以整合SAP么? A:当然可以,OpenShare是真正完全开放的产品,但要进行二次开发,事实上我们帮我们大部分的客户都整合了SAP,包括数 ...
- for in
1 for in 循环如果遍历的是数组 那么 i 就是数组的索引值 var x; var person=[456,"qwe",890]; for (x in person) ...
- Part 95 to 96 Deadlock in a multithreaded program
Part 95 Deadlock in a multithreaded program class Program { static void Main(string[] args) { Cons ...
- Swiper之滑块1
之前介绍过Swiper,它是一个神奇的插件.类似于Android的触屏操作,Swiper应用于Web中也可以实现这样的效果,我们来看看(用鼠标可拖动). startSlide Integer (def ...