JqGrid+json完整示例

一时失言乱红尘 2022-07-17 03:20 171阅读 0赞

真没找到这样的例子，于是自已写了个，分享出来。

第一步，首先在WebService上，添加\[System.Web.Script.Services.ScriptService\]属性标签，让WebServer支持JSON.

![复制代码][copycode.gif]

namespace jqGrid_JSON_WebService_Sample.Services
    {
        /// <summary>
        /// Summary description for WebServiceGrid
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
        [System.Web.Script.Services.ScriptService]
        public class WebServiceGrid : System.Web.Services.WebService
        {
        }
    }

![复制代码][copycode.gif]

接着，添加ajax调用的后端代码，获取数据，返回JSON对象:

![复制代码][copycode.gif]

[WebMethod]
            public object Grid(bool? _search, string nd, int page, int rows, string sidx, string sord, string searchField, string searchString, string searchOper)
            {
                int count;
                var data = dc.Query<Issue>(string.IsNullOrWhiteSpace(searchField) ? null : new string[] { searchField }, new string[] { searchOper }, new object[] { searchString }, null, new string[] { string.IsNullOrWhiteSpace(sidx) ? "IssueID" : sidx }, new string[] { sord }, (page - 1) * rows, rows, out count);
                return (new
                {
                    total = Math.Ceiling((float)count / (float)rows),
                    page = page,
                    records = count,
                    rows = data.Select(item => new { id = item.IssueID, cell = new object[] { item.IssueID, item.Title, item.Description, item.Progress, item.CreateTime, item.Locked } })
                });
            }

![复制代码][copycode.gif]

第二步，添加前台页面，首先添加各种的js,css引用，然后添加jqGrid所需的<div>和js代码：

![复制代码][copycode.gif]

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebFormGrid.aspx.cs" Inherits="jqGrid_JSON_WebService_Sample.WebFormGrid" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <link href="/Content/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
        <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
        <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
        <link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
        <script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function ()
            {
                $("#list #grid").jqGrid(
                {
                    url: '/Services/WebServiceGrid.asmx/Grid',
                    mtype: 'POST',
                    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                    serializeGridData: function (postData)
                    {
                        if (postData.searchField === undefined) postData.searchField = null;
                        if (postData.searchString === undefined) postData.searchString = null;
                        if (postData.searchOper === undefined) postData.searchOper = null;
                        return JSON.stringify(postData);
                    },
                    jsonReader:
                    {
                        root: "d.rows",
                        page: "d.page",
                        total: "d.total",
                        records: "d.records"
                    },
                    datatype: "json",
                    colNames:
                    [
                        'IssueID',
                        'Title',
                        'Description',
                        'Progress',
                        'CreateTime',
                        'Locked'
                    ],
                    colModel:
                    [
                        { name: 'IssueID', width: 100, index: 'IssueID' },
                        { name: 'Title', width: 100, index: 'Title' },
                        { name: 'Description', width: 300, index: 'Description' },
                        { name: 'Progress', width: 150, index: 'Progress' },
                        { name: 'CreateTime', width: 100, index: 'CreateTime', formatter:'date',  sorttype:'datetime', datefmt:'M d h:i' },
                        { name: 'Locked', width: 100, index: 'Locked' }
                    ],
                    rowNum: 10,
                    rowList: [10, 15, 20, 25, 40],
                    pager: '#pager',
                    viewrecords: true,
                    sortorder: "desc",
                    width: 900,
                    height: 240,
                });
    
                $("#list #grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
            });
    </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <div id="list">
        <table id="grid">
        </table>
        <div id="pager">
        </div>
    </asp:Content>

![复制代码][copycode.gif]

注意jqGrid函数据前面的部分代码：

url: '/Services/WebServiceGrid.asmx/Grid',
                    mtype: 'POST',
                    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },

通过url指定WebService方法，mtype指定使用POST方法，contentType指定为json，这样WebService才会返回json对象。

可是，返回的数据是放在一个属性名为d的对象里，所以还要添加 jsonReader，来作数据映射:

![复制代码][copycode.gif]

jsonReader:
                    {
                        root: "d.rows",
                        page: "d.page",
                        total: "d.total",
                        records: "d.records"
                    },

![复制代码][copycode.gif]

最后，为了保证查询时能够POST正确的参数，还要对POST的参数值进行检查：

![复制代码][copycode.gif]

serializeGridData: function (postData)
                    {
                        if (postData.searchField === undefined) postData.searchField = null;
                        if (postData.searchString === undefined) postData.searchString = null;
                        if (postData.searchOper === undefined) postData.searchOper = null;
                        return JSON.stringify(postData);
                    },

![复制代码][copycode.gif]

[copycode.gif]: /images/20220717/0e32e15321294b4c939034b4a8ba05fb.png