javascript - JqG​​rid Treegrid 不显示为树

Question

我正在创建一个带有树形 GridView 的 JqGrid，jqgrid 实际上“作为表格”工作，但它不能作为树工作我将在下面向您展示我的代码

 function doTable1(GridData){
    var json1 = {
        "getAdministrationDataResult": {
            "GridModelData": {
                "page": 0, "records": 0, "rows": [
                    { "ID": "1", "Level": "0", "parent": "", "isLeaf": false, "FreezeId": "0", "Fecha Inicio": "", "Fecha Fin": "", "Area Manager": "AMI", "Team Group": "", "Team": "", "Recurso": "", "Motivo": "", "Activo": "", "Acción": "", "Eliminar": "" },
                    { "ID": "2", "Level": "1", "parent": "0", "isLeaf": true, "FreezeId": "0", "Fecha Inicio": "", "Fecha Fin": "", "Area Manager": "AMI", "Team Group": "Ciclo Pasivo", "Team": "", "Recurso": "", "Motivo": "", "Activo": "", "Acción": "", "Eliminar": "" },
                    { "ID": "3", "Level": "2", "parent": "1", "isLeaf": true, "FreezeId": "0", "Fecha Inicio": "", "Fecha Fin": "", "Area Manager": "AMI", "Team Group": "Ciclo Pasivo", "Team": "Modelo de Costos", "Recurso": "", "Motivo": "", "Activo": "", "Acción": "", "Eliminar": "" },
                    { "ID": "4", "Level": "3", "parent": "2", "isLeaf": true, "FreezeId": "0", "Fecha Inicio": "", "Fecha Fin": "", "Area Manager": "AMI", "Team Group": "Ciclo Pasivo", "Team": "Modelo de Costos", "Recurso": "MUNOZ Oscar", "Motivo": "", "Activo": "", "Acción": "", "Eliminar": "" },
                    { "ID": "5", "Level": "2", "parent": "1", "isLeaf": true, "FreezeId": "0", "Fecha Inicio": "", "Fecha Fin": "", "Area Manager": "AMI", "Team Group": "Ciclo Pasivo", "Team": "SAPCIPA", "Recurso": "", "Motivo": "", "Activo": "", "Acción": "", "Eliminar": "" }
                ]
            }
        }
    }
    $("#administration_container").jqGrid('GridUnload');
    $("#administration_container").jqGrid({

        treeGrid: true,
        treeGridModel: "adjacency",
        ExpandColumn: "Level",
        treeDataType: "json",
        colNames: GridData.colNames,
        colModel: GridData.colModel,
        multiselect: false,
        caption: GridData.caption,
        pager: jQuery('#administration_containerPager'),
        rowNum: 1000,
        viewrecords: true,
        gridview: true,
        treeReader : {
            level_field: "level",
            parent_id_field: "parent", // then why does your table use "parent_id"?
            leaf_field: "isLeaf"
        }
    });

    var item;

    for (var i = 0; i < 5; i++) {

        jQuery("#administration_container").jqGrid('addRowData', i, json1.getAdministrationDataResult.GridModelData.rows[0]);
        jQuery("#administration_container").jqGrid('addRowData', i, json1.getAdministrationDataResult.GridModelData.rows[1]);
        jQuery("#administration_container").jqGrid('addRowData', i, json1.getAdministrationDataResult.GridModelData.rows[2]);
        jQuery("#administration_container").jqGrid('addRowData', i, json1.getAdministrationDataResult.GridModelData.rows[3]);
        jQuery("#administration_container").jqGrid('addRowData', i, json1.getAdministrationDataResult.GridModelData.rows[4]);
    }
}

信息来自 wcf vb 服务，我向您展示的 json，它只是服务返回内容的示例

需要一些说明，谢谢你，对英语的马虎表示抱歉

Answer 1

您在对我们问题的评论中写道，您是初学者，不确定您使用的是什么版本。我开发free jqGrid jqGrud 的 fork 。因此，我建议您从GitHub下载最新版本的代码。 (只需单击“下载 zip”按钮)或者您可以使用描述的 URL here .

创建本地(从 JavaScript 对象中已读取的数据)TreeGrid 的代码将非常简单。 The demo显示以下 TreeGrid

相应的JavaScript代码非常简单:

var mydata = [
        {id: "10", name: "Cash",        num: 100, debit: 400.00,  credit: 250.00,  balance: 150.00,   enbl: true,
            level: "0", parent: "null", isLeaf: false, expanded: false, loaded: true},
        {id: "20", name: "Cash 1",      num: 1,   debit: 300.00,  credit: 200.00,  balance: 100.00,   enbl: false,
            level: "1", parent: "10",   isLeaf: false, expanded: false, loaded: true},
        {id: "30", name: "Sub Cash 1",  num: 1,   debit: 300.00,  credit: 200.00,  balance: 100.00,   enbl: true,
            level: "2", parent: "20",   isLeaf: true,  expanded: false, loaded: true},
        {id: "40", name: "Cash 2",      num: 2,   debit: 100.00,  credit: 50.00,   balance: 50.00,    enbl: false,
            level: "1", parent: "10",   isLeaf: true,  expanded: false, loaded: true},
        {id: "50", name: "Bank's",      num: 200, debit: 1500.00, credit: 1000.00, balance: 500.00,   enbl: true,
            level: "0", parent: "null", isLeaf: false, expanded: true,  loaded: true},
        {id: "60", name: "Bank 1",      num: 1,   debit: 500.00,  credit: 0.00,    balance: 500.00,   enbl: false,
            level: "1", parent: "50",   isLeaf: true,  expanded: false, loaded: true},
        {id: "70", name: "Bank 2",      num: 2,   debit: 1000.00, credit: 1000.00, balance: 0.00,     enbl: true,
            level: "1", parent: "50",   isLeaf: true,  expanded: false, loaded: true},
        {id: "80", name: "Fixed asset", num: 300, debit: 0.00,    credit: 1000.00, balance: -1000.00, enbl: false,
            level: "0", parent: "null", isLeaf: true,  expanded: false, loaded: true}
    ];

$("#treeGrid").jqGrid({
    data: mydata,
    colNames: ["Account", "Acc Num", "Debit", "Credit", "Balance", "Enabled"],
    colModel: [
        {name: "name", width: 180 },
        {name: "num", template: "integer", align: "center" },
        {name: "debit", template: "number" },
        {name: "credit", template: "number" },
        {name: "balance", template: "number" },
        {name: "enbl", width: 70, template: "booleanCheckboxFa" }
    ],
    cmTemplate: { width: 80, autoResizable: true },
    iconSet: "fontAwesome",
    treeGrid: true,
    treeGridModel: "adjacency",
    ExpandColumn: "name",
    ExpandColClick: true
});

其中代码最长的部分是输入数据的初始化，其中包含不同类型(整数、小数和 bool 值)的属性。我使用 the wiki article 中描述的 iconSet: "fontAwesome" 选项以及一些简化相应类型数据显示的模板。