扩展 easyui 控件系列:为datagrid 增加过滤行

2024-05-16 01:32

本文主要是介绍扩展 easyui 控件系列:为datagrid 增加过滤行,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

此功能还为真正完成,起到抛砖引玉的效果,发动大家的力量把这个功能完善起来,效果图如下:

 

基本上就是扩展了 datagrid.view 中的onAfterRender 这个事件,具体代码如下:

复制代码
$.extend($.fn.datagrid.defaults.view,{onAfterRender:function(target){var dc = $.data(target,'datagrid').dc;if(dc.header2.find('[filter="true"]').length == 0){var header = dc.header1; //固定列表头var header2 = dc.header2; // 常规列表头var filterRow = $('<tr></tr>');var opts = $.data(target,'datagrid').options;var columns = opts.columns;var frozenColumns = opts.frozenColumns;$.each(frozenColumns[0],function(){if(!this.checkbox){var w = header.find('[field="'+this.field+'"] > div').width();filterRow.append('<td><input style="width:'+w+'px"/></td>');}else{header.find('.datagrid-header-check').parent().attr('rowspan',2)}});header.find('tbody').append(filterRow);filterRow = $('<tr filter="true"></tr>');$.each(columns[0],function(){var w = header2.find('[field="'+this.field+'"] > div').width();if(this.hfilter){var a = $('<input field="'+this.field+'" class="easyui-combobox" style="width:'+w+'px" />');filterRow.append($('<td></td>').append(a));a.data('options',this.hfilter);}else{filterRow.append('<td><input style="width:'+w+'px"/></td>');}});header2.find('tbody').append(filterRow);var dgData = $(target).datagrid('getData').rows;header2.find('input[field]').each(function(){var opts = $(this).data('options');var field = $(this).attr('field');$.extend(opts.options,{onSelect:function(item){var d = _.filter(dgData,function(row){return row[field].indexOf(item[opts.options.textField]) > -1;});$(target).datagrid('loadData',d);}});$(this)[opts.type](opts.options);})}}});
复制代码

在定义列时,我们加上个自定义的属性 

{ title: '部门名称' , field: 'depname' , width: 120,<span style= "color: #ff0000;" >hfilter:{type: 'combobox' ,options:{data:roleData,valueField: 'KeyId' ,textField: 'RoleName' }}</span> }

红色字体就是自定义的属性,用来定义过滤行中的控件的

在使用的时候,扩展的代码要放到Datagrid 初始化的前边!

 

示例DEMO 完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
     <title></title>
     <link rel= "stylesheet"  type= "text/css"  href= "../../jquery-easyui-1.3.3/themes/2013/easyui.css" >
     <link rel= "stylesheet"  type= "text/css"  href= "../../jquery-easyui-1.3.3/themes/icon.css" >
     <link rel= "stylesheet"  type= "text/css"  href= "../../jquery-easyui-1.3.3/themes/default/lookup.css" >
     <script type= "text/javascript"  src= "../../jquery-easyui-1.3.3/jquery-1.10.2.min.js" ></script>
     <script type= "text/javascript"  src= "../../jquery-easyui-1.3.3/jquery-migrate-1.2.1.min.js" ></script>
     <script type= "text/javascript"  src= "../../jquery-easyui-1.3.3/jquery.easyui.min.js" ></script>
     <script src= "../../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js" ></script>
     <script src= "../../jquery-easyui-1.3.3/underscore-min.js" ></script>
</head>
<body>
     <table id=userlist></table>
     <script>
        
         var  userData ={ "total" :6, "rows" :[{ "KeyId" :1, "UserName" : "admin2" , "Password" : "93BCC5699183BED3AD5E3C050ADEF183" , "PassSalt" : "K6FqbXXK" , "Email" : "hxl_apple@163.com" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "疯狂秀才" , "DepartmentId" :4, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : "{\"theme\":{\"title\":\"默认皮肤\",\"name\":\"default\"},\"showType\":\"menubutton\",\"gridRows\":\"40\"}" , "depname" : "生产部" , "Departments" : "4,15" },{ "KeyId" :9, "UserName" : "admin" , "Password" : "7D34608F3723F586DC28FC5D88BCECC6" , "PassSalt" : "ZWvu4jSn" , "Email" : "hxl_apple@163.com" , "IsAdmin" : true , "IsDisabled" : false , "TrueName" : "疯狂秀才" , "DepartmentId" :3, "Mobile" : "18668088525" , "QQ" : "1055818239" , "Remark" : "系统默认帐号,不可删除" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : "{\"theme\":{\"title\":\"流行灰\",\"name\":\"gray\"},\"showType\":\"Accordion2\",\"gridRows\":\"20\",\"showValidateCode\":false}" , "depname" : "综合办公室" , "Departments" : "3,15" },{ "KeyId" :10, "UserName" : "test" , "Password" : "5C7E95836A99FB74723F54C43511154A" , "PassSalt" : "RGVJejaR" , "Email" : "" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "Test1" , "DepartmentId" :1, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : null , "depname" : "幸福集团" , "Departments" : "3,4,15,5" },{ "KeyId" :12, "UserName" : "ddd" , "Password" : "7A3C56FA5A59953C058E7525FA0F754F" , "PassSalt" : "O8RnCnaH" , "Email" : "" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "ddd" , "DepartmentId" :0, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : null , "depname" : "" , "Departments" : "" },{ "KeyId" :13, "UserName" : "eee" , "Password" : "2FE5DFAE3F8AC41F907FCF8B1C1579D7" , "PassSalt" : "vKbkyBib" , "Email" : "" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "eeee" , "DepartmentId" :3, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : null , "depname" : "综合办公室" , "Departments" : "" },{ "KeyId" :15, "UserName" : "007" , "Password" : "9E704A8699D72ADA11A7EB7BF07739FA" , "PassSalt" : "bcLJiqHB" , "Email" : "" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "007" , "DepartmentId" :1, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : null , "depname" : "幸福集团" , "Departments" : "" }]}
         var  roleData = [{ "KeyId" :2, "RoleName" : "生产部" , "Sortnum" :2, "Remark" : "工程师" , "IsDefault" :0, "Navigations" : null , "Users" : null , "Departments" : "" },
             { "KeyId" :3, "RoleName" : "幸福集团" , "Sortnum" :1, "Remark" : "6666" , "IsDefault" :0, "Navigations" : null , "Users" : null ,
                 "Departments" : "1,3,4,15,5,9,10,11,12,13,14,8" },
             { "KeyId" :17, "RoleName" : "综合办公室" , "Sortnum" :1, "Remark" : "" , "IsDefault" :1, "Navigations" : null , "Users" : null , "Departments" : "1,4,15" },{ "KeyId" :20, "RoleName" : "普通用户" , "Sortnum" :3, "Remark" : "" , "IsDefault" :0, "Navigations" : null , "Users" : null , "Departments" : "1,3,4,15,5,9,10,11,12,13,14,8" }]
         $.extend($.fn.datagrid.defaults.view,{
             onAfterRender: function (target){
                 var  dc = $.data(target, 'datagrid' ).dc;
                 if (dc.header2.find( '[filter="true"]' ).length == 0){
                     var  header = dc.header1;  //固定列表头
                     var  header2 = dc.header2;  // 常规列表头
                     var  filterRow = $( '<tr></tr>' );
                     var  opts = $.data(target, 'datagrid' ).options;
                     var  columns = opts.columns;
                     var  frozenColumns = opts.frozenColumns;
                     $.each(frozenColumns[0], function (){
                         if (! this .checkbox){
                             var  w = header.find( '[field="' + this .field+ '"] > div' ).width();
                             filterRow.append( '<td><input style="width:' +w+ 'px"/></td>' );
                         }
                         else {
                             header.find( '.datagrid-header-check' ).parent().attr( 'rowspan' ,2)
                         }
                     });
                     header.find( 'tbody' ).append(filterRow);
                     filterRow = $( '<tr filter="true"></tr>' );
                     $.each(columns[0], function (){
                         var  w = header2.find( '[field="' + this .field+ '"] > div' ).width();
                         if ( this .hfilter){
                             var  a = $( '<input field="' + this .field+ '" class="easyui-combobox" style="width:' +w+ 'px" />' );
                             filterRow.append($( '<td></td>' ).append(a));
                             a.data( 'options' , this .hfilter);
                         } else {
                             filterRow.append( '<td><input style="width:' +w+ 'px"/></td>' );
                         }
                     });
                     header2.find( 'tbody' ).append(filterRow);
                     var  dgData = $(target).datagrid( 'getData' ).rows;
                     header2.find( 'input[field]' ).each( function (){
                         var  opts = $( this ).data( 'options' );
                         var  field = $( this ).attr( 'field' );
                         $.extend(opts.options,{
                             onSelect: function (item){
                                 var  d = _.filter(dgData, function (row){
                                     return  row[field].indexOf(item[opts.options.textField]) > -1;
                                 });
                                 $(target).datagrid( 'loadData' ,d);
                             }
                         });
                         $( this )[opts.type](opts.options);
                     })
                 }
             }
         });
         $( function (){
             $( '#userlist' ).datagrid({
                 toolbar: '#toolbar' ,
                 data:userData,
                 fit: true ,
                 title: '用户列表' ,
                 selectOnCheck: false ,
                 checkOnSelect: true ,
                 singleSelect: true ,
                 //tools:[{iconCls:'icon-add'}],
                 frozenColumns:[[
                     {checkbox: true },
                     { title:  'ID' , field:  'KeyId' , width: 40, sortable:  true  },
                     { title:  '用户名' , field:  'UserName' , width: 100, sortable:  true  }
                 ]],
                 columns:[[
                     { title:  '真实姓名' , field:  'TrueName' , width: 100, sortable:  true  },
                     { title:  '部门名称' , field:  'depname' , width: 120,hfilter:{type: 'combobox' ,options:{data:roleData,valueField: 'KeyId' ,textField: 'RoleName' }} },
                     { title:  '邮箱' , field:  'Email' , width: 100, sortable:  true  },
                     {
                         title:  '超管' ,
                         field:  'IsAdmin' ,
                         width: 60,
                         align:  'center' ,
                         formatter:  function  (v, d, i) {
                             if  (d.UserName ==  "admin" )
                                 return  '' ;
                             return  v ?  '√' : 'x'
                         }
                     },
                     {
                         title:  '状态' ,
                         field:  'IsDisabled' ,
                         width: 60,
                         align:  'center' ,
                         formatter:  function  (v, d, i) {
                             if  (d.UserName ==  "admin" )
                                 return  '' ;
                             return  v ?  '√' : 'x'
                         }
                     },{title: '描述' ,field: 'Remark' ,width:160}
                 ]],
                 pagination:  true ,
                 pageSize:20,
                 rowStyler:  function  (index, row, css) {
                     if  (row.UserName== "admin" ) {
                         return  'font-weight:bold;' ;
                     }
                 }
             });
         });
     </script>
</body>
</html>

  

这篇关于扩展 easyui 控件系列:为datagrid 增加过滤行的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/993492

相关文章

Android测试系列之三 - 构建仪器单元测试

Android测试系列之一 - 测试分类(节选) Android测试系列之二 - 构建本地单元测试 Android测试系列之三 - 构建仪器单元测试 仪器单元测试,它是运行真机或者模拟器上进行测试,它有一个好处就是它们可以调用Android framework层的APIs以及 supporting APIs,比如:Android Testing Support Li

SpringMVC+Hibernate +MySql+ EasyUI实现CRUD

SpringMVC+Hibernate +MySql+ EasyUI实现CRUD 原文地址 http://my.oschina.net/xshuai/blog/345117

负载均衡—大型网站架构系列:负载均衡详解(上)

大型网站架构系列:负载均衡详解(上) 负载均衡(上) 面对大量用户访问、高并发请求,海量数据,可以使用高性能的服务器、大型数据库,存储设备,高性能Web服务器,采用高效率的编程语言比如(Go,Scala)等,当单机容量达到极限时,我们需要考虑业务拆分和分布式部署,来解决大型网站访问量大,并发量高,海量数据的问题。 从单机网站到分布式网站,很重要的区别是业务拆分和分布式部署,将应

maven学习系列——(五)maven聚合与继承

这一篇学习和整理maven的聚合和继承! 并用具体的项目讲解说明! 参考: http://www.cnblogs.com/xdp-gacl/p/4242221.html

maven学习系列——(四)maven仓库

这一篇学习和整理maven仓库的一些知识点 ! 参考: http://blog.csdn.net/wanghantong/article/details/36427433

maven学习系列——(三)maven项目的创建

这一篇大概会整理和总结到有如下知识点: (1):maven的使用入门一些命令 (2):用命令创建项目 (3):使用IDE集成工具创建项目–Eclipse和idea 3:使用Maven命令和Eclipse的Maven插件,创建Maven项目 (1)maven命令生成项目 新建一个文件目录,dos进入该目录并执行下面命令: mvn archetype:create -DgroupId=c

maven学习系列——(二)maven的安装和一些基本的配置

这一篇主要会总结maven在window上的安装,以及Eclipse安装maven插件。 会整理和贴出具体的安装步骤等! 配置大概会整理一下,方便自己查看和使用! Maven 的使用在Windows上使用比较多,一般的开发都是在Windows上;Linux上的使用相对比较少,不过会总结Windows和Linux系统两种安装方式。 首先会介绍在Windows和Eclipse安装Maven,L

maven学习系列——(一)maven简介

这个系列学习maven,主要是看maven实战和其他网站上整理出自己一些知识点,方便自己以后查找和使用! 这个系列的我先根据自己在公司经常使用到的一些知识点进行整理,后期在做完善! 计划:要在2017 年之前学习和整理完成! 1:什么 Maven ? - Maven意为“知识的积累”、“专家”或者“内行”的意思,maven是一个跨平台的项目管理工具,是 Apache的一个成功的开源

maven学习系列——(七)Dependency

Dependency介绍 本文转自:Maven简介(六)——Dependency,并加上自己在实际使用中的总结和说明! 1、依赖的传递性 依赖传递对版本的选择 假设A依赖于B和C,然后B依赖于D,D又依赖于E1.0,C直接依赖于E2.0,那么这个时候A依赖的是E1.0还是E2.0,还是这两个都依赖呢?两个都依赖是肯定不行的,因为它们可能会有冲突的地方。这个时候就涉及到Maven中依赖传递对

Sping 源码深度解析——容器的功能扩展 【学习笔记】

我为什么 看的不够远,因为高度不够! 学习和整理总结Spring容器的功能扩展,本文为学习笔记,其中有一些内容是自己的思考总结! 一、两种Spring中bean加载的方式 第一种 # 第一种使用 BeanFactory 以及它默认的实现类 XmlBeanFactoryBeanFactory bf = new XmlBeanFactory(new ClassPathResource(