扩展 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,hfilter:{type:'combobox',options:{data:roleData,valueField:'KeyId',textField:'RoleName'}} }
红色字体就是自定义的属性，用来定义过滤行中的控件的
在使用的时候，扩展的代码要放到Datagrid 初始化的前边！
示例DEMO 完整代码
<!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 增加过滤行的更多相关文章
- 扩展GridView控件——为内容项添加拖放及分组功能
引言 相信大家对GridView都不陌生,是非常有用的控件,用于平铺有序的显示多个内容项.打开任何WinRT应用或者是微软合作商的网站,都会在APP中发现GridView的使用.“Tiles”提供了一 ...
- easyui表单多重验证，动态设置easyui控件
要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最 ...
- Android自己定义控件系列五：自己定义绚丽水波纹效果
尊重原创!转载请注明出处:http://blog.csdn.net/cyp331203/article/details/41114551 今天我们来利用Android自己定义控件实现一个比較有趣的效果 ...
- 验证控件插图扩展控件ValidatorCalloutExtender（用于扩展验证控件）和TextBoxWatermarkExtender
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptMan ...
- Android控件系列之RadioButton&RadioGroup（转）
学习目的: 1.掌握在Android中如何建立RadioGroup和RadioButton 2.掌握RadioGroup的常用属性 3.理解RadioButton和CheckBox的区别 4.掌握Ra ...
- Android控件系列之CheckBox
学习目的: 1.掌握在Android中如何建立CheckBox 2.掌握CheckBox的常用属性 3.掌握CheckBox选中状态变换的事件(监听器) CheckBox简介: CheckBox和Bu ...
- C#控件系列--文本类控件
C#控件系列--文本类控件 文本类控件主要包含Label.LinkLabel.Button.TextBox以及RichTextBox. Label 功能 Label用来 ...
- easyui 控件获取焦点方式
针对easyui控件前端组织的dom做分析,如下: combo/combobox/combogrid类似结构如下: <input class="easyui-datebox dateb ...
- 动态添加easyui 控件
jquery提供了append,appendTo方法,可以动态添加静态的html文本,在easyui中,要动态添加easyui控件要怎么做呢,下面就来介绍动态添加easyui控件. 使用方法:和添加静 ...
随机推荐
- 创建用户故事地图(User Story Mapping)的8个步骤
［小编］上周六了解了用户故事地图后,小编又查阅了一些资料,找到了以下这篇关于如何组织用户故事地图规划的文章,分享给大家.也希望大家如果有好的实践,也可以留言一起交流. 原文地址:http://winn ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- Java中静态类型检查是如何进行的
以下内容来自维基百科,关于静态类型检查和动态类型检查的解释: 静态类型检查:基于程序的源代码来验证类型安全的过程: 动态类型检查:在程序运行期间验证类型安全的过程: Java使用静态类型检查在编译期间 ...
- Asp.net MVC使用Model Binding解除Session, Cookie等依赖
上篇文章"Asp.net MVC使用Filter解除Session, Cookie等依赖"介绍了如何使用Filter来解除对于Session, Cookie的依赖.其实这个也可以通 ...
- Mysql字符集知识总结
字符集&字符编码方式 字符集(Character set)是多个字符的集合,字符集种类较多,每个字符集包含的字符个数不同,这里的字符可以是英文字符,汉字字符,或者其他国家语言字符. 常见字符集 ...
- java web 开发 购物车功能的实现
为了方便自己以后复习,所以写的比较仔细,记录下自己的成长..... 既然是做购物车,那么前提条件是首先需要一系列商品,也就是要建一个实体,这里建了一个商品表. 通过查询在浏览器上显示 基本显示已经做好 ...
- TCP连接建立系列 — 服务端接收ACK段（一）
http://blog.csdn.net/zhangskd/article/details/17923917 分类: Linux TCP/IP Linux Kernel 2014-01-07 09 ...
- Struts2文件上传，以及各种注意事项
首先肯定是要配置好struts2环境,这个在另一篇<struts2环境搭建,以及一个简单实例>里已经讲过了 首先是网页部分,upload_file.jsp <%@ page lang ...
- 六轴加速度传感器MPU6050官方DMP库到瑞萨RL78/G13的移植
2015年的电赛已经结束了.赛前接到器件清单的时候,看到带防护圈的多旋翼飞行器赫然在列,又给了一个瑞萨RL78/G13的MCU,于是自然联想到13年的电赛,觉得多半是拿RL78/G13做四旋翼的主控, ...
- Android+Sqlite 实现古诗阅读应用（三）
往期传送门: Android+Sqlite 实现古诗阅读应用(一) Android+Sqlite 实现古诗阅读应用(二) 加入截图分享的功能. 很多应用都有分享的功能,我也想在我的古诗App里加入这个 ...