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(""+data.page.outerwrapper.innerwrapper.rows[x].cells[y].links[g].name+""); } }else{ $("td[aria-describedby='myjqgrid_" + cellProp.label + "']").append(""); } } } } } 

我想做什么

每行只有1个单元格 – linkimg 。 我遍历每一行,然后遍历每个单元格,然后计算links数组中的项目数。

如果label = linkimglinks array = 2中的项目数,我希望列的值是超链接

 link1link2 

如果label = linkimglinks数组中的项目数> 2 ,我希望列的值为图像

  

我遇到的问题

使用上面的代码,每行中的列获得以下输出:

 link1link2 

输出应该是

第一行

第二行link1 link2

第三行link1 link2

看看演示 。 它应该解决你的问题。

解决方案的想法是

  1. 将输入数据的cells属性保存在object cellsById以便可以通过rowid获取cellsById[rowid]
  2. 使用自定义格式化程序根据cells属性格式化“linkimg”列的包含。 我们将从自定义格式化程序的rawObject参数中获取cells (作为rawObject.cells ),或者我们将从cellsById获取相同的数据。 我们从options参数中获取当前格式化行的rowid(作为options.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 += "" + linkimgItem[g].name + ""; } } else { val = ""; } } } } 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; } } }