博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jqGrid + JSON + WebService 完整示例
阅读量:6250 次
发布时间:2019-06-22

本文共 2856 字,大约阅读时间需要 9 分钟。

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

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

namespace jqGrid_JSON_WebService_Sample.Services {
/// /// Summary description for WebServiceGrid /// [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
(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" %> 

注意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示例就完成了,成果展示:

完整示例代码:

汗!数据库文件还有版本问题,低版本的数据库文件在这, 低版本数据库文件的完整示例代码:

转载地址:http://jmria.baihongyu.com/

你可能感兴趣的文章
记一次gitHook带来的思考
查看>>
'ascii' codec can't decode byte 0x8b in position 6: ordinal not in range(128)
查看>>
使用阿里云 身份证号正反面拍照图片识别信息
查看>>
遗传算法入门--连载10
查看>>
centos下fdisk和parted磁盘分区实战
查看>>
HTML DOM 之 DOM对象:Document Object Model (文档对象模型)
查看>>
【网络编程】大端模式和小端模式(大头序和小头序)
查看>>
windows 2012添加桌面图标
查看>>
Kubernetes部分Volume类型介绍及yaml示例--NFS(网络数据卷)
查看>>
我的友情链接
查看>>
JNA调用的参数结构体内含二维数组及结构体内含结构体数组的解决办法
查看>>
C语言中的选择排序
查看>>
深入理解CNN的细节
查看>>
centos 6.5安装vncserver 并开启远程桌面
查看>>
在RHEL上配置epel的yum源及其他开源YUM源
查看>>
Git的学习之路02 Git的工作流程、工作区、暂存区、版本库及创建版本库
查看>>
CC430F6137 芯片上集成的外设寄存器地址<-->cc430f6137.cmd
查看>>
Ubuntu14.04 LTS下安装Composer
查看>>
tomcat session会话复制
查看>>
Spring 获取当前web的根路径
查看>>