使用jQGrid插件，远程获取json数据绑定

最新推荐文章于 2021-02-17 04:18:25 发布

原创最新推荐文章于 2021-02-17 04:18:25 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

ASP.NET 专栏收录该内容

3 篇文章

订阅专栏

这篇博客展示了如何在网页中利用jQuery的jQGrid插件，通过远程请求获取JSON数据并将其绑定到表格中。博主详细解释了如何设置数据源、定义列模型、设置分页参数，并提供了完整的示例代码来展示如何实现这一功能。

$(document).ready(function() {

    $("head").append("<script src=' http://192.168.0.124:1117/zhidanServices/ShangjianAjax.svc/getShangjianGoods?billno=16034757052&voyageno=00007181&jsoncallback=getdata'></script>");

});
function getdata(data) {
    $("#list").jqGrid({
        datatype: 'json',
        mytype: 'post',
        data: '',
        colNames: ['serialno', 'hsNo', 'produceCountryNo', 'valueType', 'weightUnit', 'packType1', 'goodsNameCn'],
        colModel: [
    { name: 'serialno', index: 'serialno', width: 55 },
    { name: 'hsNo', index: 'hsNo', width: 90 },
    { name: 'produceCountryNo', index: 'produceCountryNo', width: 80, align: 'right' },
    { name: 'valueType', index: 'valueType', width: 80, align: 'right' },
    { name: 'weightUnit', index: 'weightUnit', width: 80, align: 'right' },
    { name: 'packType1', index: 'packType1', width: 150, sortable: false },
    { name: 'goodsNameCn', index: 'goodsNameCn', width: 80, align: 'right'}],

        jsonReader: {
            root: "GoodList",
            page: "currpage",
            total: "totalpages",
            records: "totalrecords",
            repeatitems: false,
            id: "0"
        },

        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'invid',
        sortorder: 'desc',
        viewrecords: true,
        gridview: true,
        caption: 'My first grid'
    });

    $('#list')[0].addJSONData(data);

}

var deleteContact = function() {
var rowId = $("#list").jqGrid("getGridParam", "selrow");
if (rowId != null) {
    $("#list").jqGrid('delRowData', selectedId);
    }
};

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm.aspx.cs" Inherits="jQueryGrid.WebForm" %>

<%@ Register Assembly="Trirand.Web" TagPrefix="trirand" Namespace="Trirand.Web.UI.WebControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.8.0.js" type="text/javascript"></script>

    <script src="js/grid.locale-en.js" type="text/javascript"></script>

    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

    <script src="js/DataSource.js" type="text/javascript"></script>

    <style type="text/css">
        body
        {
            font-size: 75%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <table id="list" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager" style="text-align: center;">
       
    </div>
    </form>
</body>
</html>

需要引用jQGrid网站的js和一些css