我正在尝试将以下json数据读入jqgrid。
var myStr = { "version" : 2,
"query" : "java",
"location" : "suwanee, ga",
"dupefilter" : true,
"highlight" : true,
"radius" : 25,
"start" : 1,
"end" : 10,
"totalResults" : 826,
"pageNumber" : 0,
"results" : [
{
"jobtitle" : "Software Development Team Lead Job",
"company" : "GM",
"city" : "Roswell",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Roswell, GA",
"source" : "General Motors",
"date" : "Tue, 24 Dec 2013 08:21:00 GMT",
"snippet" : "principles, techniques and best practices. - Demonstrated expert knowledge in <b>Java<\/b> and\/or .NET. - Demonstrated expert knowledge in building, debugging and... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=778874434418454d&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 34.021976,
"longitude" : -84.35714,
"jobkey" : "778874434418454d",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Roswell, GA",
"formattedRelativeTime" : "1 day ago"
}
,
{
"jobtitle" : "Software Systems Engineer (Java\/J2EE)",
"company" : "Universal Business Solutions",
"city" : "Alpharetta",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Alpharetta, GA",
"source" : "Universal Business Solutions",
"date" : "Tue, 17 Dec 2013 18:37:25 GMT",
"snippet" : "years experience with <b>Java<\/b> & J2EE Must be motivated... environment. Experienced with <b>Java<\/b>, J2EE, Oracle, UNIX, SQL, Unix Shell script, <b>Java<\/b> Script, MVC Desired... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=7066b95f71004292&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 34.074177,
"longitude" : -84.29121,
"jobkey" : "7066b95f71004292",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Alpharetta, GA",
"formattedRelativeTime" : "8 days ago"
}
,
{
"jobtitle" : "Software Engineer",
"company" : "ACI Worldwide",
"city" : "Norcross",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Norcross, GA",
"source" : "ACI Worldwide",
"date" : "Thu, 19 Dec 2013 11:51:00 GMT",
"snippet" : "\u2022 Experienced <b>Java<\/b> engineer for developing commercial... development experience \u2022 2 years of professional <b>Java<\/b> development with 2+ years of J2EE. \u2022 2 years of... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=7ac5988d9e5f0990&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 33.93956,
"longitude" : -84.20879,
"jobkey" : "7ac5988d9e5f0990",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Norcross, GA",
"formattedRelativeTime" : "6 days ago"
}
]
};
$("#myGrid").jqGrid({
//url: "testData.xml",
dataType:"json",
data : myStr,
jsonReader: {
repeatitems: false,
root: "results"
},
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto",
loadonce: true
});
我尝试使用jsonreader读取数据,将数据类型设置为“json”,将root设置为“results”。
jqgrid中没有填充数据,有人教育我,我在这里缺少什么?
答案 0 :(得分:1)
您的代码中存在错误,因为对jqGrid选项的含义存在很小的误解。如果您在代码中定义了myStr
之类的变量
var myStr = {
"version" : 2,
...
"results" : [
{
...
}
]
};
你不使用JSON 。它只是使用对象文字来创建新对象。这种语法是在JavaScript中创建和初始化对象的最简单有效的方法。只有属性具有特殊字符时,才需要在"
或'
中包含属性名称。所以相同的代码可以重写为
var myStr = {
version : 2,
...
results : [
{
...
}
]
};
所以我想强调一下,上面根本不使用JSON。 datatype
参数(不是dataType
)的正确值应为"local"
而不是"json"
。在这种情况下,将忽略选项jsonReader
或loadonce
。输入数据应该是由jqGrid的data
选项指定的项目数组。
因此固定代码应如下所示
$("#myGrid").jqGrid({
datatype: "local",
data: myStr.results,
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
(见the demo)。
如果您的实际代码确实从服务器加载数据,则应使用url
参数。如果可以使用选项jsonReader
或loadonce
,代码如下所示
$("#myGrid").jqGrid({
url: "Sri2.json",
datatype: "json",
jsonReader: {
repeatitems: false,
root: "results"
},
loadonce: true,
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
(见another demo)。
您的代码具有奇怪的属性,例如onmousedown
。如果您需要在某个单元格上设置onmousedown
属性,则可以在cellattr
中使用colModel
属性。它允许您将任何附加属性设置为<td>
元素,该元素代表网格的单元格。例如,one more demo使用以下代码
function indeed_clk (obj, id) {
alert("onmousedown with id=" + id);
}
$(function () {
var myStr = {
...
"results" : [
{
...
"onmousedown" : "indeed_clk(this, '1050');",
...
}
]
};
$("#myGrid").jqGrid({
datatype: "local",
data: myStr.results,
colNames: ["Trending Jobs"],
colModel: [
{
name: "url",
title: false,
cellattr: function (rowId, cellValue, rawObject) {
if (rawObject.onmousedown) {
return 'onmousedown="' + rawObject.onmousedown + '"';
}
}
}
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
});
设置onmousedown
属性,该属性调用全局函数indeed_clk
。将使用onmousedown
属性在url
列中的单元格上设置cellattr
。