Question

我正在尝试使用一些博客中提供的示例将jQuery Grid添加到我的应用程序（C＃和Asp.net）中，能够使用Webservice发送的Json数据。现在已经尝试为Grid添加分页并得到了strucked.Script就是这样。

    <script type="text/javascript">
    $(function () {
        $("#table").jqGrid({
            datatype: function (pdata) { getData(pdata); },
            height: 250,
            colNames: ['ID', 'First Name', 'Last Name'],
            colModel: [
            { name: 'ID', width: 60, sortable: false },
            { name: 'FirstName', width: 200, sortable: false },
            { name: 'LastName', width: 200, sortable: false }
        ],

            imgpath: '<%= ResolveClientUrl("styles/redmon/images") %>',

            pager: jQuery('#pager'),
            rowNum: 2,
            rowList: [2, 5, 10, 50, 100, 200, 500, 1000],                
            height: "100%",
            viewrecords: true,
            scrollOffset: 0,
            caption: 'Sample'

        });
    });
    function getData(pData) {
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveClientUrl("~/WebService.asmx/GetListOfPersons") %>',
            data: '{}',
            dataType: "json",
            success: function (data, textStatus) {
                if (textStatus == "success")
                    ReceivedClientData(JSON.parse(getMain(data)).rows);
            },
            error: function (data, textStatus) {
                alert('An error has occured retrieving data!');
            }
        });
    }
    function ReceivedClientData(data) {
        var thegrid = $("#table");
        thegrid.clearGridData();
        for (var i = 0; i < data.length; i++)
            thegrid.addRowData(i + 1, data[i]);
    }
    function getMain(dObj) {
        if (dObj.hasOwnProperty('d'))
            return dObj.d;
        else
            return dObj;
    }
</script>

... html块

     <table id="table" cellpadding="0" cellspacing="0">
</table>
<div id="pager" class="scroll" style="text-align:center;"></div>

Pager div显示并附加但不起作用我错过了什么？

由于塞缪尔

Answer 1

您的主要问题是您忽略了可以转发到ASMX网络服务的pData getData。

您为jqGrid使用非常旧模板。 jqGrid的当前版本现在为4.3，您仍然使用版本3.5中已弃用的imgpath（请参阅the documentation）。非常旧版本的jqGrid对调用Web服务没有很好的支持，但即使在那时，人们已经可以使用addJsonData和addXmlData方法更有效地添加数据了{addRowData和getData方法1}}。记录here。

我建议您更好地修改datatype: 'json'函数使用datatype而不是loadonce: true作为函数。例如，在the old demo中，您可以找到一个如何准确实现此示例的示例。在another answer中，您可以找到一个示例如何使用SqlDataReader参数，以防您不希望在服务器上实现数据分页，而不是希望将所有网格数据发送到客户端并允许jqGrid在客户端为您执行分页，排序和过滤数据。它只能在行数相对较少的情况下有效（例如，几百行）。

更新：如果使用SqlCommand从数据库获取数据，则可以基于rows和{page构建SQL语句（SELECT TOP）。 {1}}您从服务器收到的参数。

在大多数情况下，您需要查询具有唯一ID的数据。因此，您可以使用LEFT OUTER JOIN和dbo.Products构造实现分页。让我们以一个例子来解释它。例如，您需要使用Northwind数据库的SELECT TOP(10) ProductID, ProductName, UnitPrice FROM dbo.Products表中的价格查询Product。要获得第一页数据，您可以使用

其中rows应替换为page参数的值。要获取参数(page-1)*rows定义的其他页面，您需要跳过page项并获取下一个顶级WITH GetAll (Id,ProductName,UnitPrice) AS ( SELECT ProductID,ProductName,UnitPrice FROM dbo.Products ), GetTop (Id,ProductName,UnitPrice) AS ( SELECT TOP(20) * FROM GetAll ), GetNext (Id,ProductName,UnitPrice) AS ( SELECT TOP(10) a.* FROM GetAll AS a LEFT OUTER JOIN GetTop AS t ON t.Id = a.Id WHERE t.Id IS NULL ) SELECT * FROM GetNext项。使用common table expression (CTE)语法，您可以轻松地编写语句：

您应该将上面两个地方的20和rows替换为(page-1)*rows和SELECT TOP(10) a.* FROM (SELECT ProductID,ProductName,UnitPrice FROM dbo.Products) AS a LEFT OUTER JOIN (SELECT TOP(20) ProductID,ProductName,UnitPrice FROM dbo.Products) AS t ON t.ProductID = a.ProductID WHERE t.ProductID IS NULL。如果您有一些不支持公用表表达式（CTE）的数据库，则可以使用子查询重写相同的查询：

{{1}}

为JqGrid添加分页

1 个答案: