扩展 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>