JqGrid+json完整示例
来源:互联网 发布:java哪些字符需要转义 编辑:程序博客网 时间:2024/06/05 19:33
真没找到这样的例子,于是自已写了个,分享出来。
第一步,首先在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); },
0 0
- JqGrid+json完整示例
- jqgrid json
- JqGrid 完整例子
- Asp中利用Json联动下拉框完整示例
- Android利用Volley异步加载(JSON和图片)完整示例
- JQGrid的数据格式JSON
- jqGrid绑定Json数据
- jqgrid json数据格式
- jqGrid学习笔记 完整整理
- JqGrid treegrid 树形表格示例
- jqgrid的json对象抓取
- jqgrid--动态传递json数据
- 使用完整jqGrid作为子表格
- ASP.NET中使用JqGrid完整实现
- ASP.NET中使用JqGrid完整实现
- JQuery以POST方法从ASP.NET服务器获取Json数据完整示例
- Android利用Volley异步加载数据(JSON和图片)完整示例
- Android利用Volley异步加载数据(JSON和图片)完整示例
- 工作流Activiti的学习总结(八)Activiti自动执行的应用
- Service二——Android系统服务
- 用过的linux命令
- RESTful API 设计指南
- 敌兵布阵
- JqGrid+json完整示例
- Java的位运算符详解实例——与(&)、非(~)、或(|)、异或(^)
- Ubuntu 上 chkconfig 的替代物
- java设计模式大纲
- iOS 在一个UILabel上显示不同颜色
- struts1多文件上传、下载实例
- Qt中QPixmap载入24位深度图片的问题
- 配置wildfly 可以使用https 访问
- 第13章windows内存体系架构上