easyUI+ThinkPHP使用扩展datagrid-filter简单示例

由于官方默认会将所有字段作为过滤项，并设置为text类型，对此我增加了一个属性用于判断是否默认显示字段过滤项，修改代码共两处如下：

$.extend($.fn.datagrid.defaults, {  filterBtnIconCls: 'icon-filter',  filterMenuIconCls: 'icon-ok',  remoteFilter: true,  filterDefaultText:false,//add by @lhp 2013-11-21 默认不显示过滤项  filterDelay: 500,  filterRules: [],  filterStringify: function(data){   return JSON.stringify(data);  }});

var fopts = getFilter(field);if(!fopts && !opts.filterDefaultText){continue;}//add by @lhp 2013-11-21 判断是否默认是否显示过滤项   var type = fopts ? fopts.type : 'text';                   var filter = opts.filters[fopts ? fopts.type : 'text'];   var input = filter.init(div, fopts ? (fopts.options||{}) : {});   input.addClass('datagrid-filter').attr('name', field);   input[0].filter = filter;                   if (fopts.op){//modify by @lhp 2013-11-21 判断是否有定义规则类，未定义的使用默认过滤     input[0].menu = createFilterButton(div, fopts.op);     if (fopts.options && fopts.options.onInit){         fopts.options.onInit.call(input[0]);      }   } else if (type == 'text'){ ....

然后不说了，直接上示例代码如下：

首先模板页代码index.html：

<script lang="javascript">$(function(){            var dg = $('#__MODULE__DataGrid').datagrid();dg.datagrid('enableFilter', [{field:'login_count',type:'numberbox',//options:{precision:0},op:['equal','notequal','less','greater']},{field:'status',type:'combobox',options:{panelHeight:'auto',data:[{value:'',text:'全部'},{value:'1',text:'正常'},{value:'0',text:'禁用'}],onChange:function(value){if (value == ''){dg.datagrid('removeFilterRule', 'status');} else {dg.datagrid('addFilterRule', {field: 'status',op: 'equal',value: value});}dg.datagrid('doFilter');}}}]);   });</script><div id="__MODULE__PagePanel" class="easyui-layout" data-options="fit : true,border : false"><!--<div id="__MODULE__SearchTab" title="条件筛选卡" data-options="region:'north',closedTitle:'高级条件筛选卡(点击展开)',border:true,collapsed:true,iconCls:'icon-search'" style="height: 165px;overflow: auto;" align="center"><form id="__MODULE__SearchForm" onsubmit="$('#__MODULE__Search').click();return false;"><table class="tableForm"><tr><th style="width: 170px;">关键字(支持模糊查询)：</th><td><input name="searchKeyWords" style="width: 315px;" /></td></tr></table><br />            <div>            <a id="__MODULE__Search" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="__MODULE__SearchFun();">过滤条件</a>                <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-cross'" onclick="__MODULE__CleanFun();">清空条件</a>            </div></form></div>--><div data-options="region:'center',border:false"> <table id="__MODULE__DataGrid" data-options="url : '__URL__/getJsonList',fit : true,border : false,//定义边框                        rownumbers:true,//显示行号pagination : true,//定义分页组件idField : 'id',pageSize :20,pageList : [10,20,50],sortName : 'account',sortOrder : 'desc',checkOnSelect : true,//选择checkbox则选择行selectOnCheck : true,//选择行则选择checkboxnowrap : false,                        striped:true,//单元格显示条纹singleSelect:false//默认不单选">      <thead data-options="frozen:true"><tr>                <th data-options="field:'id',width:30,checkbox:true" sortable="true">编号</th>                <th data-options="field:'account',width:80" sortable="true">用戶帳號</th>                 <th data-options="field:'nickname',width:100" sortable="true">用戶姓名</th> </tr></thead><thead>            <tr>                <th data-options="field:'email',width:220" sortable="true">电子邮件</th>                <th data-options="field:'bind_emp',width:80" sortable="true">使用者</th>                <th data-options="field:'lang-sets',width:80" sortable="true">语言</th>                <th data-options="field:'login_count',width:60,align: 'center'" sortable="true">登錄次數</th>            </tr>   </table> </div></div>

ThinkPHP后台取数据代码：

public function getJsonList(){                $filter = json_decode(stripslashes($_REQUEST['filterRules']),true);//添加反斜杠并将JSON字符串转化为数组        foreach($filter as $key=>$data){            $map[$data['field']] = array('like','%'.$data['value'].'%');        }        $noInId = session(C('USER_AUTH_KEY'));        $model = D('User');        ..此处省略了代码...    }

实现效果如：

如果在datagrid 的  data-options中设置filter的属性filterDefaultText为true的话，则为：

本文由hongping626在CSDN首发，如有转载请注明出处！http://blog.csdn.net/hongping626/article/details/16856191