jqGrid + JSON + WebService 完整示例

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

第一步，首先在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示例就完成了，成果展示：

完整示例代码：jqGrid_JSON_WebService_Sample.zip

汗！数据库文件还有版本问题，低版本的数据库文件在这下载, 低版本数据库文件的完整示例代码：jqGrid_JSON_WebService_Sample(v2).zip

jqGrid + JSON + WebService 完整示例相关推荐

jQuery使用getJSON方法获取json数据完整示例
本文实例讲述了jQuery使用getJSON方法获取json数据.分享给大家供大家参考,具体如下: demo.js: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...
Spring Integration完整示例
本文是我们名为" Spring Integration for EAI "的学院课程的一部分. 在本课程中,向您介绍了企业应用程序集成模式以及Spring Integration如 ...
EasyUI(2)：PHP+EasyUI的增、删、改操作的完整示例
想完成一个EasyUI+PHP的完整示例,主要针对一个数据表记录的增加.删除和修改,方便以后写类似的程序. 经过一天多的努力,差不多算完成了,只是后台数据操作部分了. 初始界面: 添加记录: 正确提交 ...
SpringMVC+FastJson+Swagger集成完整示例
一:目录一:基础部分简介 fastjson api 二:实战部分 Spring MVC + fastjson 整合三:Swagger集成二:基础部分 1. FastJson 简介 Fastjs ...
利用json+webservice实现android访问远程数据库,利用JSON+WebService实现Android访问远程数据库...
2013年第9期SCIENCE&TECHNOLOGYINFORMATION ○IT论坛○科技信息利用JSON+WebService实现Android访问远程数据库黄淑静1杨红梅2 (1.山 ...
php消息功能,PHP实现发送微博消息功能完整示例
PHP实现发送微博消息功能完整示例,操作技巧,本文,相关内容,感兴趣,数据结构 PHP实现发送微博消息功能完整示例易采站长站,站长之家为您整理了PHP实现发送微博消息功能完整示例的相关内容. 本文实 ...
使用百度地图api模拟实时定位页面完整示例
使用百度地图api模拟实时定位页面完整示例效果:使用百度地图api在页面上显示车辆的实时位置,并有自动刷新和手动刷新两种方式可以选择.每次刷新后,都会在地图上显示车辆的最新位置. 示例运行效果截图 ...
eclipse 创建maven 项目动态web工程完整示例
需求表均同springmvc案例此处只是使用maven 注意,以下所有需要建立在你的eclipse等已经集成配置好了maven了,说白了就是新建项目的时候已经可以找到maven了没有的话需要安装m ...
ViewPager详解(一)——ViewPager的基本使用完整示例
MainActivity如下: package cn.ww;import java.lang.reflect.Field;import android.app.Activity; import and ...

jqGrid + JSON + WebService 完整示例

jqGrid + JSON + WebService 完整示例相关推荐

最新文章

热门文章