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,//选择行则选择checkbox
			nowrap : 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>

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