Javascript JqGrid Treegrid不'；我不能表现得像一棵树

我正在用treegrid视图创建一个JqGrid，JqGrid实际上是“作为一个表”工作的，但它不作为一个树工作 我将在下面向您展示mi代码

 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]);
    }
}

函数doTable1（GridData）{
var json1={
“getAdministrationDataResult”：{
“GridModelData”：{
“页面”：0，“记录”：0，“行”：[
{“ID”：“1”，“Level”：“0”，“parent”：“isLeaf”：false，“FreezeId”：“0”，“Fecha Inicio”：“Fecha Fin”：“区域经理”：“AMI”，“团队组”：“Team”：“Recurso”：“Motivo”：“Activo”：“Acción”：“Eliminar”：“}，
{“ID”：“2”，“Level”：“1”，“parent”：“0”，“isLeaf”：true，“FreezeId”：“0”，“Fecha Inicio”：“Fecha Fin”：“区域经理”：“AMI”，“团队组”：“Ciclo Pasivo”，“团队”：“Recurso”：“Motivo”：“Activo”：“Acción”：“Eliminar”：，
{“ID”：“3”，“级别”：“2”，“父项”：“1”，“isLeaf”：true，“冻结ID”：“0”，“Fecha Inicio”：“Fecha Fin”：“区域经理”：“AMI”，“团队组”：“Ciclo Pasivo”，“团队”：“Modelo de Costos”，“Recurso”：“Motivo”：“Activo”：“Acción”：“Eliminar”：”，
{“ID”：“4”，“级别”：“3”，“家长”：“2”，“isLeaf”：true，“冻结ID”：“0”，“Fecha Inicio”：“Fecha Fin”：“区域经理”：“AMI”，“团队组”：“Ciclo Pasivo”，“团队”：“Modelo de Costos”，“Recurso”：“MUNOZ Oscar”，“Motivo”：“Activo”：“Acción”：“Eliminar”：，
{“ID”：“5”，“级别”：“2”，“父项”：“1”，“isLeaf”：true，“冻结ID”：“0”，“Fecha Inicio”：“Fecha Fin”：“区域经理”：“AMI”，“团队组”：“Ciclo Pasivo”，“团队”：“SAPCIPA”，“Recurso”：“Motivo”：“Activo”：“Acción”：“Eliminar”：“}
]
}
}
}
$（“#管理_容器”）.jqGrid（'GridUnload'）；
$（“#管理_容器”）.jqGrid({
特雷格里德：没错，
树模型：“邻接”，
扩展列：“级别”，
treeDataType:“json”，
colNames:GridData.colNames，
colModel:GridData.colModel，
多选：错，
标题：GridData.caption，
寻呼机：jQuery（“#管理"容器管理器”），
rowNum:1000，
viewrecords：是的，
gridview：没错，
树阅读器：{
级别字段：“级别”，
parent\u id\u字段：“parent”，//那么为什么表使用“parent\u id”？
叶_字段：“isLeaf”
}
});
var项目；
对于（变量i=0；i<5；i++）{
jQuery（“管理容器”）.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，它只是服务返回内容的一个示例

---

需要了解一下这一点，谢谢你，很抱歉你在对我们的问题的评论中说你是初学者，不知道你使用的是什么版本。我开发了jqGrud的分叉。因此，我建议您从下载最新版本的代码（只需单击“下载zip”按钮），或者您可以使用所描述的URL

创建本地（从JavaScript对象中已经读取的数据）TreeGrid的代码非常简单。显示以下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
});

---

其中，如果代码是包含不同类型属性（整数、十进制和布尔）的输入数据的初始化，则最长部分。我使用了中描述的

iconSet:“fontAwesome”

选项和一些模板，这些模板简化了相应类型数据的显示。

您在对问题的评论中写道，您是初学者，不确定使用的是什么版本。我开发了jqGrud的分叉。因此，我建议您从下载最新版本的代码（只需单击“下载zip”按钮），或者您可以使用所描述的URL

创建本地（从JavaScript对象中已经读取的数据）TreeGrid的代码非常简单。显示以下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
});

---

其中，如果代码是包含不同类型属性（整数、十进制和布尔）的输入数据的初始化，则最长部分。我使用了中描述的

iconSet:“fontAwesome”

选项和一些模板，这些模板简化了相应类型数据的显示。

您使用的是哪个版本的jqGrid？jqGrid的哪个分支（，或者@Oleg版本中的一个旧jqGrid，我不确定，它是什么版本，我很新，正在修复这个，我在哪里可以检查？同时尝试您的更改，谢谢！：）您使用哪个版本的jqGrid？jqGrid的哪个分支（，或者@Oleg版本中的一个旧jqGrid，我不确定，它是什么版本，我很新，正在修复这个，我在哪里可以检查？同时尝试您的更改，谢谢！：）谢谢，它成功了；如果它对某人有用，我在指向“父”字段时会遇到问题，在区分大小写的字段时也会遇到问题，但在这个示例中，一切都很好。@David：不客气！JavaScript是区分大小写的语言，您必须保留名称的大小写。您应该在输入数据中使用

“id”

而不是

“id”

，因为jqGrid需要小写的

id

名称。如果你的问题现在解决了，你应该给出答案；如果对某人有用的话，我会