0

为什么我的虚拟 jqxgrid 不工作？

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

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

它调用 rendergridrows() 很好，但它不加载记录。它只是说正在加载..有什么想法吗？谢谢。

<!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>
4

1 回答 1

1

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

于 2013-01-07T20:22:47.187 回答