Asp.Net使用Easy UI DataGrid 实现行过滤[行模糊查询数据]

在使用Easy UI datagrid 列表控件时，对列表数据的查询需要自己写查询页面，然后点击按钮查询取到数据刷新datagrid，如何说直接在datagrid列表上面对列表上面的某一列进行数据查询或者多列进行查询呢，那样岂不是更加方便，在easy ui官网查询有一个DataGrid Filter Row插件，也是针对于列表数据进行查询 ，但是只是正对于当前页面数据进行查询，不能将参数直接传入数据库进行查询
在百度各种收索，千篇一律，都是指向easy ui 的DataGrid Filter Row插件
在查看easy api时发现datagrid有一个onAfterRender函数，是在视图呈现之后触发，可以使用使用$.fn.datagrid.defaults.view重写默认值对象。
在生成好的datagrid列表的每个标题下面加入一个文本框即可实现想要的效果[生成一个文本框行]

废话不多说，做了一个小Demo
在此之前必须得先有一个datagrid的列表页面，可以自定义

这里的列表是普通的datagrid列表控件，
我需要的效果是：

在此之前说过可以用$.fn.datagrid.defaults.view重写datagrid。
那么就用onAfterRender函数在视图呈现完成以后给datagrid标题行下面追加一行，生成文本框

js code:

$.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; //获取列数据集
            header.find('tbody').append(filterRow);//将生成的行追到标题tbody里面去
            filterRow = $('<tr style="background:#f2f2f2;" filter="true"></tr>');
            //遍历列集合
            $.each(columns[0], function () {
                 //判断当前列是不是勾选列和操作列，这里的field[字段ID"_Operate",在使用时必须和页面上面操作列id一致]
                if (this.checkbox == undefined && this.field != "_Operate") {
                    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 {
                        //GetFieldValue（）方法是获取当前列是否已经经过模糊查询，将查询的值给textbox
                        var vagvalue = GetFieldValue(this.field);
                        filterRow.append('<td align="center"><input type="text" class="Vague_border" value="' + vagvalue + '"  onkeyup="doFilter(this)" id="Vague_' + this.field + '"  name="' + this.field + '" style="width:' + w + 'px" /></td>');
                    }
                }
                else {
                    if (this.checkbox) {
                        filterRow.append('<td><div class="datagrid-cell-check"><input type="checkbox" /></div></td>');
                    }
                    else {
                        filterRow.append('<td></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);
            })
            var id = $("#VagueField").val();
            moveEnd(id);
        }
    }
});

在使用模糊查询列表时，需要在输入时及时返回数据[根据个人需求可以修改]，在此需要在页面上面添加隐藏域，用于存储当前模糊查询的字段和值，在加载datagrid,视图会重新渲染，这里就需要将值存储在隐藏域

js、css 引用：

    <link href="../jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" />
    <link href="../jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />
    <script src="../jquery-easyui-1.4.4/jquery-1.7.2.min.js"></script>
    <script src="../jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
    <script src="../jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

html code:

 <table id="tb" style="width: 950px" sortname="AcqTime" sortorder="asc" class="easyui-datagrid"
                data-options="singleSelect:false,pagination:true,striped:true,iconCls:'icon-edit',pageList:[20],nowrap:false">
                <thead >
                    <tr>
                        <th data-options="field:'EquipmentGuid',checkbox:true,align:'center' "></th>
                        <th data-options="field:'DeviceName',sortable:true,align:'center', width:150" >设备名称</th>
                        <th data-options="field:'Brand',sortable:true,align:'center', width:150" >品牌</th>
                        <th data-options="field:'Price',align:'center',sortable:true ,width:150" >单价</th>
                        <th data-options="field:'State',align:'center',sortable:true,width:150 " >状态</th>
                        <th data-options="field:'Specifications',align:'center',sortable:true,width:150">规格</th>
                        <th data-options="field:'_Operate',align:'center',formatter:ListShow,width:150" >操作</th> 
                    </tr>
                </thead>
            </table>
         <%--隐藏域--%>
         <div>
              <input type="hidden" id="VagueValue" />
              <input type="hidden" id="VagueField" />
         </div>
         <%--生成模糊行及迷糊查询功能--%>
          <script src="../JS/FilterTable.js"></script>
        <script>
            $(function () {
                VagueSearch();
            });
            //查询[注：此处方法是公用的加载方法，如需改名，FilterTable.js中也需修改，GetVague()方法是获取当前过滤文本框内的查询条件]
            function VagueSearch() {
                var querystring = QueryInfo()+ GetVague();
                InitList(querystring);
            }
            //查询
            function InitList(querystring) {
                $("#tb").datagrid({
                    url: "../Hand/SelectQueryList.ashx", 
                    queryParams: { Action: "DeviceList", QueryString: querystring },
                    onLoadError: function (e) {
                        window.parent.parent.location.href = '/Login.aspx';
                    },
                    pageNumber: 1
                });
            }
            //页面查询条件
            function QueryInfo()
            {
                var querystring = "1=1";
                return querystring;

            }
            //操作列
            function ListShow(value, row, index) {
                return "<a href=\"\">修改</a>";
            }
        </script>

实现功能后的效果，可以单列模糊查询，也可以多列模糊查询

代码测试通过，有需要的小伙伴可以下载Demo,本人只写了一个基本的，欢迎大神点评