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'>");
}
}
}
}
}
我正在尝试做什么
每行只有一个单元格 - linkimg。我遍历每一行，然后遍历每个单元格，然后计算links数组中的项目数。
如果label = linkimg以及links数组 = 2 中的项目数量，我希望该列的值为超链接
<span><a>link1</a><span><span><a>link2</a></span>
如果label = linkimg以及links数组中的项目数＆gt; 2 ，我希望列的值为图像
<img src='images/icon.gif' width='10' height='10'>
我遇到的问题
使用上面的代码，每行中的列获得以下输出：
<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>
答案 0 :(得分：1)
看看the demo。它应该可以解决你的问题。
解决方案的想法是
cells属性保存在对象cellsById中，以便cells可以rowid获取cellsById[rowid] cells cells属性格式化“linkimg”列的包含。我们将从自定义格式化程序的rawObject参数（rawObject.cells）获取cellsById，否则我们将从options获取相同的数据。我们从options.rowId参数获取当前格式化行的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;
}
}
}
和
{{1}}