Question

我正在使用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]);
    }
}

信息来自wcf vb服务，json我告诉你，它只是服务返回的样本

对此有所了解，谢谢你，对于草率的英语感到抱歉

Answer 1

您在我们的问题评论中写道，您是初学者，并且您不确定您使用的是哪个版本。我开发了jqGrud的free jqGrid分叉。因此，我建议您从GitHub下载最新版本的代码（只需点击“下载zip”按钮），或者您可以使用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
});

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

JqGrid Treegrid不显示为树

1 个答案:

JqG​​rid Treegrid不显示为树

1 个答案:

JqGrid Treegrid不显示为树