jqGrid JS之TreeGrid (树形表格)- yellowcong

JqGrid的版本是jqGrid JS - v5.1.0，然后根据中文的API，咋整都没有弄出来，当时真是心累啊，主要注意的有id隐藏列定义、Grid数据定义（注意parent、id的数据类型以及Grid数据格式），Grid的数据设定

TreeGrid数据格式

//输入的tree的数据格式
    var jsonData = {total: 1,
                page: 1,
                records: jsonGridData.length,
                rows: jsonGridData
            };

TreeGrid的注意事项

定义隐藏列

定义的列需要有一个为id的列，并且为隐藏，用于TreeGrid的显示用，其次还有一个id，用于显示展开列用，这个id的名称可以随便定义，但是需要和ExpandColumn的属性对应上

var colNames = [
                    "",
                    "",
                    "subNode",
                    ];
var colModel = [
                        {name:"id",hidden:true}, //这个id是用于treegrid显示的，必须是隐藏的
                        {name:"newId",sortable:false, width:70,hidden:false}, //这个是显示可以看到的节点
                        {name:"subNode",sortable:false, width:70,hidden:true}, //这个是我自己定义的子节点，数据都放到这个了，后面又做处理，把这些数据拆开了
    ];

定义Grid的数据

数据的格式中，必须有id 、parent 、level 、isLeaf 这个几个节点，其他的节点expand也可以有，但是非必须的，而且接收的数据格式是不是直接一个Array

var jsonData = data;
    var jsonGridData = new Array();
    var index = 1;
    for(var i=1;i<=jsonData.length;i++){
        //父类节点
        var parentId = index+"";
        var rowNow = jsonData[i-1];
        rowNow.id = index+""; //id设定为string类型
        rowNow.parent = "";//父节点设定为string类型，""
        rowNow.level = "0"; //第一级别
        rowNow.isLeaf = false; //是否是最后一级
        jsonGridData.push(rowNow);
        index++;
        //子节点
        var subRows = JSON.parse(rowNow.subNode);
        for(var j=1;j<=subRows.length;j++){
            var subRowNow = subRows[j-1];
            subRowNow.id = index+"";
            subRowNow.parent = parentId;
            subRowNow.level = "1";
            subRowNow.isLeaf = true;
            jsonGridData.push(subRowNow);
            index++;
        }
    }
    //输入的tree的数据格式
    var jsonData = {total: 1,
                page: 1,
                records: jsonGridData.length,
                rows: jsonGridData
            };

设定Grid

Grid初期化的时候，数据是data:[]，没有数据，在grid创建后，使用函数$("#denOutList")[0].addJSONData(jsonData);来设定grid的数据

    $("#denOutList").jqGrid({
        treeGrid:true, //树grid
        treeGridModel:"adjacency",
        ExpandColumn:"newId", //我们显示的节点
        ExpandColClick:true,//点击展开
        data:[], //没有数据
        datatype:"local",
        colNames:colNames,
        colModel:colModel,
        height:140,
        width:600,
        shrinkToFit:false,
        regional:"ja",
        onSelectRow: function(id){
            var curRowData = $("#denOutList").jqGrid('getRowData', id);
            if(curRowData.subNode == null || curRowData.subNode == ""){
                //詳細ボタン使用可能
                sofia.disable("btnSubPreview",false);
            }else{
                sofia.disable("btnSubPreview",true);
            }
        }
//添加JSON数据
    $("#denOutList")[0].addJSONData(jsonData);