Question

为什么我的虚拟jqxgrid无法正常工作？

我正在复制虚拟数据分页。

我有9条记录的JsonObject。每次文本框输入更改时，在Ajax调用之后加载JsonObject。然后，网格也会在JsonObject中重新加载新数据。但是在这里我手动添加了Json数据来尝试虚拟分页。

它会调用rendergridrows（），但不会加载记录。它只是说loading ..有什么想法吗？感谢。

<!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="../../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"},

], "totalrecords":9};

//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;
            }
            var source =
            {
                datatype: "array",
                localdata: {},
                totalrecords: jsonObject.totalrecords
            };

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

        alert("rendergridrows : " + source.totalrecords);
        //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,
                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

因为，对于循环的最后一项，您的jsonObject为null。你有9条记录和一个从0到10的循环。

为什么我的虚拟jqxgrid不能正常工作

1 个答案: