jqgrid-json循环问题 [英] jqgrid - json looping issue
本文介绍了jqgrid-json循环问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
JSON
{
"mypage":{
"outerwrapper":{
"page":"1",
"total":"3",
"records":"15",
"innerwrapper":{
"rows":[
{
"id":"1",
"read": true,
"cells": [
{
"label":"linkimg",
"value": "Link-A",
"links": [
{
"name":"link1"
},
{
"name":"link2"
},
{
"name":"link3"
}
]
}
]
},
{
"id":"2",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-B",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"3",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-C",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"4",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-D",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"5",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-E",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"6",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-F",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"7",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-G",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"8",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-H",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"9",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-I",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"10",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-J",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"11",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-K",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"12",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-L",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"13",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-M",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"14",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-N",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"15",
"read": true,
"cells": [
{
"label":"linkimg",
"value": "Link-O",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
}
]
}
}
}
}
JQGrid定义
$("#myjqgrid").jqGrid({
url: "jqgrid.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['linkimg'],
colModel:[
{name:'linkimg',index:'linkimg', width:100, align:"center", resizable:false}
],
jsonReader: {
root: "mypage.outerwrapper.innerwrapper.rows",
repeatitems: false
}
})
loadComplete
loadComplete: function(data){
var x, y, cellProp, item;
for (x = 0; x < data.mypage.outerwrapper.innerwrapper.rows.length; x++) {
item = data.mypage.outerwrapper.innerwrapper.rows[x];
var cellCount = data.mypage.outerwrapper.innerwrapper.rows[x].cells.length;
for (y = 0; y < cellCount; y += 1) {
cellProp = data.mypage.outerwrapper.innerwrapper.rows[x].cells[y];
if (cellProp.label === "linkimg") {
var linkimgItem = data.mypage.outerwrapper.innerwrapper.rows[x].cells[y].links;
var linkimgCount = data.mypage.outerwrapper.innerwrapper.rows[x].cells[y].links.length;
var g;
if (linkimgCount === 2) {
for (g = 0; g < linkimgCount; g += 1) {
$("td[aria-describedby='myjqgrid_" + cellProp.label + "']").append("<span style='padding-right:5px'><a href='#'>"+data.page.outerwrapper.innerwrapper.rows[x].cells[y].links[g].name+"</a></span>");
}
}else{
$("td[aria-describedby='myjqgrid_" + cellProp.label + "']").append("<img src='images/icon.gif' width='10' height='10'>");
}
}
}
}
}
我要做什么
每行只有1个单元格-linkimg.我先遍历每一行，然后遍历每个单元格，然后计算links数组中的项数.
Each row has only 1 cell - linkimg. I loop through each row and then each cell, then count the number of items in the links array.
如果label = linkimg且links数组中的项目数 = 2 ，我希望该列的值为超链接
If label = linkimg and the number of items in links array = 2, I want the value of the column to be hyperlinks
<span><a>link1</a><span><span><a>link2</a></span>
如果label = linkimg和links数组中的项目数> 2 ，我希望该列的值为图像
If label = linkimg and the number of items in links array > 2, I want the value of the column to be an image
<img src='images/icon.gif' width='10' height='10'>
我遇到的问题
使用上面的代码，每一行中的列将获得以下输出:
With the above code, the column in each row gets the following output:
<img src='images/icon.gif' width='10' height='10'><span><a>link1</a><span><span><a>link2</a></span>
输出应为
第一行-<img src='images/icon.gif' width='10' height='10'>
第二行-<span><a>link1</a> <span><span><a>link2</a></span>
第三行-<span><a>link1</a> <span><span><a>link2</a></span>
推荐答案
Look at the demo. It should solve your problem.
解决方案的想法是
- 将输入数据的
cells属性保存在对象cellsById中，以便可以相对于cellsById[rowid]通过rowid获取cells. - 要使用自定义格式化程序基于
cells属性来格式化"linkimg"列的包含内容.我们将从自定义格式化程序的rawObject参数(如rawObject.cells)获得cells，或者从cellsById获得相同的数据.我们从options参数(如options.rowId)获取当前格式化行的rowid.
- To save the
cellsproperty of the input data in the objectcellsByIdso that one can get thecellsby therowidwith respect ofcellsById[rowid]. - To use custom formatter to format the contain of the 'linkimg' column based on the
cellsproperty. We will getcellsfrom therawObjectparameter of the custom formatter (asrawObject.cells) or we will get the same data fromcellsById. We get the rowid of the current formatted row from theoptionsparameter (asoptions.rowId).
最重要的代码片段是
formatter: function (val, options, rawObject) {
var l, i, cellProp, linkimgItem, linkimgCount, g,
cells = $.isEmptyObject(cellsById) ?
rawObject.cells :
cellsById[options.rowId];
if (typeof cells !== "undefined" && cells.length > 0) {
for (i = 0, l = cells.length; i < l; i++) {
cellProp = cells[i];
if (cellProp.label === "linkimg") {
linkimgItem = cellProp.links;
linkimgCount = linkimgItem.length;
if (linkimgCount === 2) {
val = '';
for (g = 0; g < linkimgCount; g += 1) {
val += "<span style='padding-right:5px'><a href='#'>" +
linkimgItem[g].name + "</a></span>";
}
} else {
val = "<img src='images/icon.gif' width='10' height='10'>";
}
}
}
}
return val;
}}
和
loadComplete: function (data) {
var rows, i, l, item;
if (typeof data.mypage !== "undefined") {
rows = data.mypage.outerwrapper.innerwrapper.rows;
for (i = 0, l = rows.length; i < l; i++) {
item = rows[i];
cellsById[item.id] = item.cells;
}
}
}
这篇关于jqgrid-json循环问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
