Question

我想为我的表实现自定义过滤器。

现在，我的表和输入看起来像这样：

以下是我的代码

view.jsp的

<div class="searchParent">
        <div class="noticeSearch">
            <p class="searchText">Search</p>
        </div>
        <div class="noticeDropDownOne">
            <select name="DropDownOne" id="DropDownOne">
                <option value="all">All</option>
                <option value="title">Title</option>
                <option value="writer">Writer</option>
                <option value="content">Content</option>
            </select>
        </div>
        <div class="noticeTextBoxOne">
            <input name="TextBoxOne" id="TextBoxOne" type="text" name="searchName">
        </div>
        <div class="noticeSearch">
            <p class="searchText">Period</p>
        </div>
        <div class="noticeDateTexBox">
            <input type="text" readonly="readonly" id="dateFrom" class='searchDateOne' placeholder="2015-01-01">
        </div>
        <div class="noticeSearch">
            <p class="searchText">~</p>
        </div>
        <div class="noticeDateTexBox">
            <input type="text" readonly="readonly" id="dateTo" class='searchDateTwo' placeholder="2015-01-01">
        </div>
        <div class="noticeSearchButton">
            <button type="button" id="btnSearch" class="btnSearch">Search</button>
        </div>
    </div>
    <div class="data">
        <table id="noticeList"></table>
        <div id="pagerNotice"></div>
    </div>

（跳过）

$("#noticeList").jqGrid({
                url : "<c:url value='/noti/getGrid'/>",
                colNames:['planId', 'Title', 'Date', 'Update Date', 'Writer', 'Subject', 'Hit'],
                colModel:[
                            {name:'noticeId', index:'noticeId', key: true,hidden: true},
                            {name:'notiTitle',index:'notiTitle', width:400,align:"center", resizable:false,
                             cellattr : function(rowId, value, rowObject){
                                 return "class='cursor_pointer'";
                             }},
                            {name:'notiCreateDate',index:'notiCreateDate', width:200,align:"center", resizable:false,
                             formatter: function(cellvalue, options, rowObject){
                                 return parseDatetoString(cellvalue, CONSTANT.YYYYMMDDFORMAT);
                             }},
                            {name:'notiUpdateDate',index:'notiUpdateDate', width:200,align:"center", resizable:false,
                             formatter: function(cellvalue, options, rowObject){
                                 var date = parseDatetoString(cellvalue, CONSTANT.YYYYMMDDFORMAT);
                                 var today = parseDatetoString(moment(), CONSTANT.YYYYMMDDFORMAT);
                                 if (date == today){
                                    return parseDatetoString(cellvalue, CONSTANT.HHMMSSFORMAT);
                                 } else {
                                    return (cellvalue == null ? '' : date);
                                 }
                             }},
                            {name:'notiWriter',index:'notiWriter', width:150,align:"center", resizable:false},
                            {name:'notiAttachment',index:'notiAttachment', width:100,align:"center", resizable:false},
                            {name:'notiHit',index:'notiHit', width:50,align:"center", resizable:false},
                ],
                rowNum : 10,
                multiselect: true,
                pager: '#pagerNotice',
                multiboxonly: true,
                sortname: 'notiCreateDate',
                sortorder: "desc",
                search: false,
                rownumbers : true,

（跳过）

bindEvent : function(){
            $("#deleteRow").on('click', function(){
                $("#deletePopup").dialog("open");
            });

            $("#btnSearch").on('click', function(){
                var searchFilter = $("#TextBoxOne").val(), f;

                if (searchFilter.length === 0) {
                    $("#noticeList")[0].p.search = false;
                    $.extend($("#noticeList")[0].p.postData, {filters: ""});
                }
                f = {
                    groupOp : "OR",
                    rules : []
                };
                f.rules.push({
                    field : "notiTitle",
                    op : "cn",
                    data : searchFilter
                });
                $("#noticeList")[0].p.search = true;
                $.extend($("#noticeList")[0].p.postData, {
                    filters : JSON.stringify(f)
                });
                $("#noticeList").trigger("reloadGrid", [{page : 1}]);
            });
        },

然后当我在文本框中输入内容并单击搜索按钮时，

我可以看到它抓住我放在文本框中的内容并传递数据，但最后，当它假设重新加载网格时，它仍会显示所有数据。

仅供参考，btnSearch是按钮，TextBoxOne是文本框，noticeList是网格名称，notiTitle是标题列的名称。

请给我一些帮助。

提前谢谢。

编辑：我按照奥列格先生的建议，在我的网格下面加上“loadonce：true”，现在它可以了！

Answer 1

了解您可以在服务器端数据过滤和客户端过滤之间进行选择，这一点非常重要。您当前的代码不使用loadonce: true选项。因此，它必须实现服务器端分页，排序和过滤数据。 jqGrid发送rows=10参数（基于rowNum : 10），page=1（页面编号从1开始），排序参数sidx=notiCreateDate，sord=desc（sortname：＆＃ 34; notiCreateDate＆＃34;，sortorder：＆＃34; desc＆＃34;）如果你设置它，可选择filters。服务器必须过滤数据集，对其进行排序，然后返回结果数据页面（最多10个项目）。

如果数据总数少于1000行或多一点1000，我建议您使用loadonce: true。服务器应在第一次请求时返回所有数据 。应根据sidx和sord参数对数据进行排序。之后，jqGrid将实现分页，在客户端排序并过滤数据，而无需与服务器进行任何通信。如果客户端上的数据更快速地作为到服务器的最简单IP分组的往返，则当前JavaScript引擎足够快并且例如1000或20000行的排序，分页和过滤。因此，loadonce: true的使用使您的网站更快地为用户服务。

关于jqGrid fork的选择。我开发free jqGrid fork开始将旧的jqGrid重命名为Guriddo jqGrid JS，更改许可协议并使Guriddo jqGrid JS商业化。查看价格here。我在旧的MIT / GPLv2许可下提供免费的jqGrid，没有任何强制性。我只是要求通过PayPal捐赠来促进发展。两种叉子的开发越来越不同，我将无法帮助Guriddo jqGrid JS的用户在stackoverflow上，因为我不知道在Guriddo jqGrid JS中实现的新功能。另一方面我根据stackoverflow或GitHub上的通信永久地改进了免费的jqGrid。因此，免费的jqGrid变得越来越用户友好，更容易使用。当前版本4.11.1中的免费jqGrid具有越来越多有用的功能（请参阅每个已发布版本的自述文件和the wiki）。版本4.12.0将于本月发布。我正在为免费的jqGrid编写带有文档和代码示例的新站点，我计划永久增加它。

你必须自己在免费的jqGrid和Guriddo jqGrid JS之间做出选择。我只想告诉你这个选项存在，并且必须迟早做出选择。

jqGrid：自定义搜索重新加载问题

1 个答案: