Question

下面的代码显示了可过滤的文本框，但是当我在“Sid文本框”中键入“abc”时，不会过滤记录。请有人请提供一些见解吗？

请尽快告诉我。非常感谢!!

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this demo jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = new Array();
            var jsonObject = { "contactList":[

{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},

{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},


], "totalrecords":18};

//alert("jsonObject.totalrecords : " + jsonObject.totalrecords);

            // generate sample data.
            var generatedata = function (startindex, endindex) {
                var data = {};
                for (var i = startindex; i < endindex; i++) {

            //alert(startindex + " " + endindex);
                    var row = {};

                            row["age"] = jsonObject.contactList[i].age;
                            row["gender"] = jsonObject.contactList[i].gender;
                            row["SId"] = jsonObject.contactList[i].SId;


                    data[i] = row;
                }
                return data;
            }

//               sortcolumn: 'age',
//                sortdirection: 'asc',

            var source =
            {
                datatype: "array",
                localdata: {},
                totalrecords: jsonObject.totalrecords,

                 updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    //alert("inside updaterow()");
                    commit(true);
                },

            };

            // load virtual data.
            var rendergridrows = function (params) {

        //alert("rendergridrows : " + source.totalrecords);
        //alert("rendergridrows : " + params.startindex + " " + params.endindex);

        if(params.endindex >= source.totalrecords) params.endindex = source.totalrecords;
        if(params.endindex == params.startindex) params.startindex = params.startindex - 1;

        //alert("rendergridrows : " + params.startindex + " " + params.endindex);

                var data = generatedata(params.startindex, params.endindex);
                return data;
            }
            var totalcolumnrenderer = function (row, column, cellvalue) {
                var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
                return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                autoheight: true,
                source: dataAdapter,
                theme: theme,
                virtualmode: true,
                pageable: true,

                selectionmode: 'multiplerowsextended',
                sortable: true,

                showfilterrow: true,
                filterable: true,
                rendergridrows: rendergridrows,
                columns: [

                          { text: 'Age', datafield: 'age', width: 50 },
                          { text: 'SId', datafield: 'SId', width: 120 },
                          { text: 'Gender', datafield: 'gender', width: 80 },

                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Answer 1

在虚拟模式下，网格中的数据按需加载，因此本地过滤不起作用，因为视图中只有记录。请参阅此示例以过滤虚拟模式下的实现：serverfiltering_paging_and_sorting.htm

Answer 2

添加＆＃39;过滤功能＆＃39;来源：

var source =
    {
        datatype:"json",
        datafields: [
                      {name:'firstname',type:"string"},
                      {name:'lastname',type:"string"},
        ],
        url:url,
        cache: false,
        pagesize:30,
        type: "POST",
        root: 'Rows',

        filter: function()
        {
            // update the grid and send a request to the server.
            $("#jqxgrid").jqxGrid('updatebounddata','filter');
        },
        beforeprocessing: function(data)
        {   
            source.totalrecords = data[0].TotalRows;
        },
        sort: function()
        {
            // update the grid and send a request to the server.
            $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
        }
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    var grid =  $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                theme: theme,
                virtualmode: true,
                showfilterrow: true,
                sortable: true,
                pageable:true,
                filterable: true,
                altrows: true,
                autoheight: true,
                pageable: true,
                width: '100%',
                pagesizeoptions: ['30', '100', '200'],
                rendergridrows: function(obj){
                     return obj.data;    
                }, 
                enablehover: false,
                selectionmode:'checkbox',

}）

为什么我的记录没有在jqx虚拟数据分页中过滤

2 个答案: