Treegrid с данными JSON в jqgrid

Question

Я тестирую деревья в jqgrid, но пока могу создавать только что-то вроде ниже

Я хочу что-то вроде Демонстрационная страница jqGrid

Я придумал приведенный ниже код, но не представляю, как мне расширить каждую строку в дереве из заданного формата json

$('<table id="list2" cellspacing="0" cellpadding="0"></table></div>').appendTo('#topics');

var grid = jQuery("#list2");
grid.jqGrid({
    datastr:topicjson,
    datatype: "jsonstring",
    height: "auto",
    pager: false,
    loadui: "disable",
    colNames: ["id","Items","url"],
    colModel: [
        {name: "id",width:1,hidden:true, key:true},
        {name: "elementName", width:150, resizable: false},
        {name: "url",width:1,hidden:true}
    ],
    treeGrid: true,

    caption: "jqGrid Demos",
    ExpandColumn: "elementName",
    autowidth: true,
    //width: 180,
    rowNum: 200,
    //ExpandColClick: true,
    treeIcons: {leaf:'ui-icon-document-b'},
    jsonReader: {
        repeatitems: false,
        root: "response"
    }
});

формат Json

var topicjson={
    "response": [
                 {
                     "id": "1",
                     "elementName": "Grouping",
                     "sub": [
                         {
                             "subelementName": "Simple Grouping"
                         },
                         {
                             "subelementName": "May be some other grouping"
                         }
                     ]
                 },
                 {
                     "id": "2",
                     "elementName": "CustomFormater",
                     "sub": [
                         {
                             "subelementName": "Image Formatter"
                         },
                         {
                             "subelementName": "Anchor Formatter"
                         }
                     ]
                 }
             ]
         };

Answer 1

Вы пытаетесь использовать Tree Grid с абсолютно неверно отформатированными данными. Вы должны увидеть сетку дерева как сетку с некоторыми дополнительными скрытыми столбцами, которые определяют структуру дерева. Имена столбцов зависят от значения параметра treeGridModel. Я рекомендую вам использовать treeGridModel: "adjacency". В случае, если имена скрытых столбцов будут:

level, parent, isLeaf, expanded, loaded, icon

В случае treeGridModel: 'nested' вместо столбца parent есть lft и rgt.

Поскольку каждый элемент дерева (корневые узлы и все подэлементы) представляет строку сетки, которая будет помещена в сетку, каждый элемент должен иметь идентификатор. В исходной версии переменной topicjson идентификаторы были определены только для корневых элементов (элементов уровня 0).

Мы можем изменить ваш исходный пример следующим образом:

var topicjson={
    "response": [
           {
               "id": "1",
               "elementName": "Grouping",
               level:"0", parent:"", isLeaf:false, expanded:false, loaded:true
           },
           {
               "id": "1_1",
               "elementName": "Simple Grouping",
               level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
           },
           {
               "id": "1_2",
               "elementName": "May be some other grouping",
               level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
           },
           {
               "id": "2",
               "elementName": "CustomFormater",
               level:"0", parent:"", isLeaf:false, expanded:true, loaded:true
           },
           {
               "id": "2_1",
               "elementName": "Image Formatter",
               level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
           },
           {
               "id": "2_1",
               "elementName": "Anchor Formatter",
               level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
           }
       ]
    },
    grid;

$('<table id="list2"></table>').appendTo('#topics');

grid = jQuery("#list2");
grid.jqGrid({
    datastr: topicjson,
    datatype: "jsonstring",
    height: "auto",
    loadui: "disable",
    colNames: [/*"id",*/"Items","url"],
    colModel: [
        //{name: "id",width:1, hidden:true, key:true},
        {name: "elementName", width:250, resizable: false},
        {name: "url",width:1,hidden:true}
    ],
    treeGrid: true,
    treeGridModel: "adjacency",
    caption: "jqGrid Demos",
    ExpandColumn: "elementName",
    //autowidth: true,
    rowNum: 10000,
    //ExpandColClick: true,
    treeIcons: {leaf:'ui-icon-document-b'},
    jsonReader: {
        repeatitems: false,
        root: "response"
    }
});

Вы можете увидеть результаты модификации на демоверсии здесь :

В примере я установил свойство expanded:true для узла CustomFormater, чтобы продемонстрировать, что вы можете указать, какие узлы должны напрямую отображаться в развернутом виде.

Я удалил скрытый столбец id из сетки дерева, поскольку идентификатор будет дополнительно сохранен как атрибут id соответствующего элемента <td>. Если вы не планируете делать столбец видимым, я бы рекомендовал размещать свойство id только во входных данных дерева (в topicjson).

Еще одно важное замечание. Все строки сетки будут заполнены в том же порядке, в котором они находятся во входных данных. Таким образом, вы должны разместить дочерние узлы узла сразу после его родителя. Я разместил соответствующий запрос на изменение на форуме trirand. Поэтому, вероятно, требование о строгом порядке входных данных для древовидной сетки будет изменено где-то позже.

ОБНОВЛЕНО : Для правильной работы сортировки необходимо использовать parent:null или parent:"null" вместо parent:"", см. здесь для получения более подробной информации.