JqGrid+json完整示例

转载 2016年08月29日 14:56:36

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

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

复制代码
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
    {
    }
}
复制代码

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

复制代码
        [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 } })
            });
        }
复制代码

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

复制代码
<%@ 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>
复制代码

注意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,来作数据映射:

复制代码
 jsonReader:
                {
                    root: "d.rows",
                    page: "d.page",
                    total: "d.total",
                    records: "d.records"
                },
复制代码

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

复制代码
                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);
                },
复制代码

相关文章推荐

jqgrid--动态传递json数据

直接从json文件中读取数据 html文件 json文件[{ "sno": "20160801", "sname": "张三", "ssex": "女"...

JQGRID读取json数据的格式要求

* jqGrid默认期望返回的json对象格式要求如下: * {"page":"1","total":"2","records":"13", * "rows":[ * {id:"1",cell:...

jqGrid简单使用、json格式和jsonReader介绍

广大的读者朋友们大家好,很高兴又可以在博客中和大家分享我的开发经验了。 此次,我准备向大家介绍一个非常好用的jQuery表格插件——jqGrid。 如果您在实际项目中遇到web端表格展示功...
  • AinUser
  • AinUser
  • 2017年03月30日 08:41
  • 3570

JqGrid 完整例子

JqGrid 例子  可以参考   http://blog.mn886.net/jqGrid/ 完整实例压缩包  http://download.csdn.net/detail/ruthywei/9...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Jqgrid+Spring实现的增删改查(一)

最近基于之前jqgrid+struts的基础上,做了一个jqgrid+spring的例子,大家请上眼。 零: 工程项目图: 一 View jqgrid demo...

jqgrid-parmNames和jsonReader的使用,以及json的返回格式

prmNames : { 02. page:"page", // 表示请求页码的参数名称 03. rows:"rows", // 表示请求行数的参数名称 04....

jqGrid初始化加载本地json数据

$(function(){ $("#gridTable").jqGrid({ width:930, dataType:'local', colNames:["国家...
  • z_p_h
  • z_p_h
  • 2012年04月01日 12:54
  • 8586

jqGrid 能获取json 数据,前端数据显示不出!(解决)

jqGrid 从后台能获取json 数据,但是前台grid数据显示不出!(最后朋友帮忙解决的) 一、首先要确认json格式要正确(是否拼接错误了)格式不清楚的可以去百度一下。 二、错误处理jQuer...

jqgrid使用ajax获取数据赋值

有时候使用jqgrid的赋值url来获取数据很不方便,当同时给多个grid赋值时,便会请求多次,造成很大的资源浪费,于是,本例采用ajax获取到数据源后给多个jqgrid赋值,示例代码如下: $....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JqGrid+json完整示例
举报原因:
原因补充:

(最多只允许输入30个字)