jqgrid - проблема с циклом json

Question

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.

Если label = linkimg и количество элементов в массиве links * =2 , я хочу, чтобы значением столбца были гиперссылки

<span><a>link1</a><span><span><a>link2</a></span>

Если label = linkimg и количество элементов в links массиве > 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>

Answer 1

Посмотрите на демо . Это должно решить вашу проблему.

Идея решения

1. Чтобы сохранить свойство cells входных данных в объекте cellsById, чтобы можно было получить cells на rowid относительно cellsById[rowid].
2. Использование пользовательского форматера для форматирования содержимого столбца 'linkimg' на основе свойства cells. Мы получим cells из параметра rawObject пользовательского форматера (как rawObject.cells), или мы получим те же данные из cellsById. Мы получаем идентификатор текущей отформатированной строки из параметра options (как 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 += "<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;
        }
    }
}