我是jqGrid的新手,但发现很难按照jqGrid文档进行操作
我无法弄清楚设置JQGrid时如何调用WebMethod。我已经成功进行了Ajax调用以获取数据,然后使用本地数据设置JQGrid。我认为这是设置过程中的一个额外步骤,我应该能够使用url属性提供webmethod的路径。
editurl属性是相同的方式。我从未真正收到过发布到服务器的帖子。
原始码
尝试了JQGrid设置
function GetData() { $('#list').jqGrid({ type: "POST", url: "Default.aspx/GetUsersJSON", datatype: "json", height: 250, colName: ['Username', 'Email'], colModel: [ ... }).jqGrid( 'navGrid', '#pager', { edit: true, add: true, del: true }); }
Web方法
[WebMethod] public static string GetUsersJSON() { var users = new List(); using(UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext()) { users = uasd.GetUserList(); } JavaScriptSerializer serializer = new JavaScriptSerializer(); return serializer.Serialize(users); }
当前代码
我现在知道它可以正常工作,但是我还有最后一个问题。为什么必须设置“ repeatitems:false”才能显示内容?
要使它起作用的一些注意事项包括设置ajax请求的不同方法。
(Ajax:type)是(jqgrid:mtype)(Ajax:contentType)是(jqgrid:ajaxGridOptions:{contentType:})
最后,从文档中了解如何设置JSONReader的文档。
希望这对其他人有所帮助,并感谢Oleg的所有帮助。
JS
function GetUserDataFromServer() { $('#list').jqGrid({ url: "Default.aspx/GetUsersJSON", mtype: 'POST', ajaxGridOptions: { contentType: "application/json" }, datatype: "json", serializeGridData: function (postData) { return JSON.stringify(postData); }, jsonReader: { root: function (obj) { return obj.d; }, page: function (obj) { return 1; }, total: function (obj) { return 1; }, records: function (obj) { return obj.d.length; }, id:'0', cell:'', repeatitems: false }, datatype: "json", height: 250, colName: ['Username', 'Email'], colModel: [ { name: 'Username', index: 'Username', width: 100, editable: true }, { name: 'Email', index: 'Email', width: 220, editable: true }, { name: 'IsLockedOut', index: 'IsLockedOut', width: 100, editable: true, edittype: 'checkbox' } ], caption: "Users" }) }
网络方法
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static List GetUsersJSON() { using (UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext()) { return uasd.GetUserList(); } }
列表中的一个JSON对象
{"__type":"UserAdministrationSandbox.UserData","PKID":"00000000-0000-0000-0000-000000000001","Username":"TestUser","ApplicationName":"Test","Email":"TestUser@test.com","Comment":"TestUser","Password":"D41D8CD98F00B204E9800998ECF8427E","PasswordQuestion":"Is this a blank Password?","PasswordAnswer":null,"IsApproved":true,"LastActivityDate":"\/Date(1298869200000)\/","LastLoginDate":"\/Date(1298869200000)\/","LastPasswordChangedDate":"\/Date(1298869200000)\/","CreationDate":"\/Date(1298869200000)\/","IsOnLine":false,"IsLockedOut":false,"LastLockedOutDate":"\/Date(1298869200000)\/","FailedPasswordAttemptCount":0,"FailedPasswordAttemptWindowStart":null,"FailedPasswordAnswerAttemptCount":null,"FailedPasswordAnswerAttemptWindowStart":null}
首先,我希望答案中的代码示例可以为您提供帮助。主要思想是,您应该使用以下附加jqGrid参数
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, serializeGridData: function (postData) { return JSON.stringify(postData); }, jsonReader: { root: "d.rows", page: "d.page", total: "d.total", records: "d.records" };
如果服务器没有设置rows,page,total和records参数的响应,只是在你的情况下,返回的数据列表一样,你可以使用下面的jsonReader
rows
page
total
records
jsonReader
jsonReader: { root: function (obj) { return obj.d; }, page: function (obj) { return 1; }, total: function (obj) { return 1; }, records: function (obj) { return obj.d.length; } }
(请参见此处)。如果您不想实现服务器端数据分页,排序和过滤,我建议您使用loadonce:true。
loadonce:true
而且您的代码有一些问题。第一个是您JavaScriptSerializer.Serialize在网络方法中手动调用。如果使用dataType: "json"JSON响应,则将通过转换为object $.ajax。您的情况也是如此。因此,处理程序的msg参数success具有d属性。但这msg.d不是对象,而是另一个JSON字符串,您可以使用将该字符串转换为对象eval(msg.d)。原因是您的方法的结果将再次转换为JSON。
JavaScriptSerializer.Serialize
dataType: "json"
$.ajax
msg
success
d
msg.d
eval(msg.d)
要解决此问题,您应该将Web方法GetUsersJSON更改为以下内容:
GetUsersJSON
[WebMethod] [ScriptMethod (ResponseFormat = ResponseFormat.Json)] public static List<User> GetUsersJSON() { using(UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext()) { return uasd.GetUserList(); } }
那么您可以将data: eval(msg.d)上一个示例放置到中data: msg.d。
data: eval(msg.d)
data: msg.d
通常,一种使用web方法的附加属性[ScriptMethod (ResponseFormat = ResponseFormat.Json)]或[ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]属性,但是在许多情况下(在您的情况下似乎也是如此)不需要使用此方法。
[ScriptMethod (ResponseFormat = ResponseFormat.Json)]
[ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
使用和之后ajaxGridOptions,jqGrid将能够读取数据页面,但是数据应为JSON格式,而不是两次编码的JSON格式。serializeGridData``jsonReader
ajaxGridOptions
serializeGridData``jsonReader
更新 :您要求我发表评论, 为什么 您需要使用中的repeatitems:false设置jsonReader才能读取您的数据。这是了解jsonReader工作方式的重要问题,但答案将占很小的位置。
repeatitems:false
通常,有两种主要样式可以为jqGrid格式化JSON数据。它应该是网格行的数据数组。数组的每一项都代表网格中的行,并且该行应为两个主形式中的一个
1)作为具有命名属性的对象,例如
{"Username":"TestUser","Email":"TestUser@test.com","Comment":"..","IsApproved":true}
或2)像这样的字符串数组
["TestUser","TestUser@test.com","true"]
要么
["TestUser","TestUser@test.com","1"]
jqGrid在edittype:'checkbox'设置的情况下将“ true”和“ 1”值都映射到布尔值“ true” 。如何了解网格中是否有许多复选框列,使用“ 1” /“ 0”格式可以减小传输数据的大小。
edittype:'checkbox'
该repeatitems:false选项意味着jqGrid应该扫描JSON数据以查找数据的第一个(对象样式)表示形式。该repeatitems:true装置的第二个(阵列式)表示。
repeatitems:true
顺便说一句,如果您使用对象样式(repeatitems:false)cell,jsonReader则 不会使用的cell:''设置,您可以删除使用的设置。
cell
cell:''
如果网格中的一列具有唯一值id,则jsonReader采用数字形式的选项很实用。该选项id:'0'意味着“用户名”列的值将用作行ID。如果使用IE或Chrome开发人员工具的Firebug检查网格,则会看到相应的<tr>元素具有属性id="TestUser"(用于数据中)。由于在一个HTML页面上不允许在ID中重复ID,因此您可以理解,使用正确的唯一ID定义网格非常重要。如果不jqGrid的数据中找到ID列它将使用ID为“1”,“2”,......所以,如果你看到你的网格有你应该寻找在错误的价值id的财产jsonReader。
id
id:'0'
<tr>
id="TestUser"
接下来的重要事情是数据表示的两种方式的优缺点:对象样式(repeatitems:false)和数组样式(repeatitems:true)
对象样式在两种主要情况下具有优势
在所有其他情况下,数组样式(repeatitems:true)与对象样式相比具有优势。从那里主要
因此,如果您想减少传输数据的大小,并且可以在服务器端进行更改,我建议您使用repeatitems:true数据表示形式的数组样式()。在这种情况下的cell:''该财产jsonReader可以很好的使用。
我建议你看看,虽然jqGrid的文档的部分约jsonReader,xmlReader和localReader。
xmlReader
localReader