Fatal编程技术网
  • jquery/
  • Jquery 为什么不是'；t我的记录未在jqx虚拟数据分页中过滤

Jquery 为什么不是'；t我的记录未在jqx虚拟数据分页中过滤

jquery

Jquery 为什么不是'；t我的记录未在jqx虚拟数据分页中过滤,jquery,jqxgrid,Jquery,Jqxgrid,下面的代码显示可过滤的文本框，但当我在“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 dat

下面的代码显示可过滤的文本框，但当我在“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>


在本演示中，jqxGrid使用虚拟化分页，使您能够在不影响客户端性能的情况下处理非常大的数据集。
$（文档）.ready（函数（）{
var theme=getTheme（）；
//准备数据
var data=新数组（）；
var jsonObject={“联系人列表”：[
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
{“年龄”：1，“SId”：“S1234567”，“性别”：“男性”}，
]，“totalrecords”：18}；
//警报（“jsonObject.totalrecords:+jsonObject.totalrecords”）；
//生成样本数据。
var generatedata=函数（开始索引，结束索引）{
变量数据={}；
对于（var i=startindex；i=source.totalrecords）params.endindex=source.totalrecords；
如果（params.endindex==params.startindex）params.startindex=params.startindex-1；
//警报（“rendergridrows:+params.startindex+”“+params.endindex”）；
var数据=生成数据（params.startindex、params.endindex）；
返回数据；
}
var totalcolumnrenderer=函数（行、列、单元格值）{
var cellvalue=$.jqx.dataFormat.formatnumber（cellvalue，'c2'）；
返回“”+单元格值+“”；
}
var dataAdapter=new$.jqx.dataAdapter（源）；
$（“#jqxgrid”）.jqxgrid(
{
宽度：670，
自动高度：正确，
来源：dataAdapter，
主题:主题,，
virtualmode：没错，
pageable:对，
selectionmode:“multiplerowsextended”，
可排序：是的，
是的，
可过滤：正确，
rendergridrows:rendergridrows，
栏目：[
{文本：'Age'，数据字段：'Age'，宽度：50}，
{文本：'SId'，数据字段：'SId'，宽度：120}，
{文本：“性别”，数据字段：“性别”，宽度：80}，
]
});
});
在虚拟模式下，网格的数据按需加载到网格中，因此本地筛选将不起作用，因为视图中只有记录。有关虚拟模式下的过滤实现，请参见此示例：

在源代码中添加“过滤函数”：

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',
})

谢谢你的回答。该示例似乎没有在每列下面都有文本框，我可以在其中输入值进行搜索。请问我怎么做？这在虚拟分页中是否可能，只是想确定一下。