Extjs4 Tree Grid 综合示例（展开、编辑列、获取数据）

用json数据模拟后端传回来的结果，Extjs tree支持两种类型的结构，一种是带children属性的嵌套式的数据，一种是扁平的，每条记录带pid的数据，带pid的添加配置项可以自动解析成树形结构。

{
  "text": "根目录",
  "children": [
    {
      "id": "1",
      "name": "基础设置",
      "children": [
        {
          "id": "1-1",
          "name": "部门档案",
          "total": 3,
          "children": [
            {
              "id": "1-1-1",
              "name": "增加部门",
              "nd": "1"
            }, {
              "id": "1-1-2",
              "name": "修改部门"
            }
          ]
        }, {
          "id": "1-2",
          "name": "客户档案",
          "nd": "2",
          "total": 1,
          "children": [
            {
              "id": "1-2-1",
              "name": "增加客户"
            }, {
              "id": "1-2-2",
              "name": "客户设置"
            }
          ]
        }
      ]
    }, {
      "id": "2",
      "name": "综合业务",
      "children": [
        {
          "id": "2-1",
          "name": "凭证",
          "nd": "1",
          "total": 3,
          "children": [
            {
              "id": "2-1-1",
              "name": "填制凭证"
            }, {
              "id": "2-1-2",
              "name": "凭证审核"
            }
          ]
        }, {
          "id": "2-2",
          "name": "采购",
          "nd": "3",
          "total": 1,
          "children": [
            {
              "id": "2-2-1",
              "name": "采购订单"
            }, {
              "id": "2-2-2",
              "name": "采购结算"
            }
          ]
        }
      ]
    }
  ]
}

Tree grid代码

Ext.require([ 'Ext.form.*', 'Ext.tip.QuickTipManager' ]);

Ext.onReady(function() {

    Ext.define('myTreeModel', {
        extend : 'Ext.data.Model',
        idProperty: 'id',
        fields : [
            {name : 'id'},
            {name : 'name'},
            {name : 'nd'},
            {name : 'total'},
        ]
    });

    // tree组件要求数据的叶子节点必须有leaf=true，此函数递归tree数据检查和自动添加leaf=true
    function recursiveSetLeaf(treeNode) {
        if (treeNode.children) {

            console.log('当前节点有children');
            Ext.each(treeNode.children, function(child){
                recursiveSetLeaf(child);
            });
        } else {
            console.log('当前节点为末级节点');
            treeNode.leaf = true;
        }
    }

    // 创建grid
    var sdPaperRules = Ext.create('Ext.tree.Panel', {
        id : "sdPaperRules",
        store : new Ext.data.TreeStore({
            model: "myTreeModel",
            proxy: {
                type: 'ajax',
                url: '/exam_admin/admin/service/gkpapers_rule/tree_grid_test.json',
                extractResponseData(response) {
                    // 非pid
                    /**
                     * 如果是扁平的带pid的记录，可参考
                     * http://t.zoukankan.com/love-omnus-p-4196603.html
                     *
                     */
                    // var json = Ext.loadFilter(Ext.JSON.decode(response.responseText),{parentField : 'pid'});
                    console.log('response', response);
                    var rootNode = Ext.JSON.decode(response.responseText);
                    recursiveSetLeaf(rootNode);
                    response.responseText = Ext.JSON.encode(rootNode);
                    return response
                },
            },
            folderSort: true
        }),// 指定数据源
        // 可编辑单元格插件，配置此插件后就可以在列配置中启用列的编辑
        plugins: Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit : 1,
        }),
        viewConfig: {
            // 给表格行添加样式
            getRowClass(record, rowIndex, rowParams, store){
                if (rowIndex % 2 !== 0) {
                    return "treegrid-row-style-even"; // 给偶数行设置样式
                }
            }
        },
        autoScroll : true,
        bodyStyle : 'overflow-x:auto; overflow-y:auto',
        autoHeight : true,
        autoWidth : true,
        rootVisible: false,
        // border : true,
        columns : [
            {
                xtype : 'treecolumn',
                text : "功能点",
                width : 250,
                dataIndex : 'name',
                headersDisabled : true,
                menuDisabled : true,
                editable: false
            },
            {
                dataIndex: 'nd',
                text: '难度',
                width : 250,
                // flex: 1,
                align: 'left',
                headersDisabled : true,
                menuDisabled : true,
                renderer(value, metaData, record, rowIndex, colIndex, store, view) {
                    if (!value) return;
                    var html = '';
                    html += `<div style="display:flex;justify-content: flex-start;align-items: center;">`;
                    var radioOptions = [{ "value": "1", "label": "简单" }, { "value": "2", "label": "普通" }, { "value": "3", "label": "困难" }];
                    for (option of radioOptions) {
                        // console.log('option', option);
                        var checked = option.value == value ? `checked='checked'` : '';
                        var name =  "grid_column_radio_" + record.data.id;
                        var domId = 'radio_' + record.data.id + '_' + option.value;
                        html += `<div style="display:flex;justify-content: center;align-items: center;margin-right:16px;">`;
                        html += `    <input id="${domId}" name='${name}' type='radio' ${checked} value='${option.value}'/>`;
                        html += `    <label for="${domId}">&nbsp;${option.label}</label>`;
                        html += `</div>`;
                    }
                    html += `</div>`;
                    return html;
                }

            },
            {
                text : "数量",
                width : 100,
                dataIndex : 'total',
                headersDisabled : true,
                menuDisabled : true,
                border: 1,
                editor : {
                    xtype : 'textfield'
                }
            }
        ],
        listeners: {
            beforeitemcollapse() {
                console.log('beforeitemcollapse');
                return false; // 禁止收缩节点
            },
            itemclick(treePanel, record, rowTag, rowIndex, event) {
                // 处理单选按钮选择事件
                var radio = event.getTarget('input[type="radio"]');
                if (radio) {
                    console.log('要更改的nd', radio.value);
                    record.set({nd: radio.value});
                }
            },
            beforeedit(treePanel, cell, events) {
                console.log('record', cell.record.data);
                if (!cell.record.data.nd) { // 如果当前节点没有难度设置，则禁止编辑
                    return false;
                }
            }
        },
        bbar : Ext.create("Ext.toolbar.Toolbar", {
            items: [
                {
                    xtype: 'button',
                    text: '获取结果数据',
                    handler() {
                        getTreeGridData(sdPaperRules.getRootNode());
                        // console.log('1:1', sdPaperRules.getView().getCell(1, 1));

                        // Ext.encode(record.data)
                        // 好像grid有个dirty属性，判断修改过没有，可以把有修改的record过滤出来
                    }
                },
                {
                    xtype : 'tbtext',
                    text: 'test...<span style="color:red;">lsdjfoiej</span>'
                }
            ]
        })
    });

    window.getTreeGridData = function(node) {
        // console.log('node', node);
        if (node.data.nd) {
            console.log('nd', node.data.nd)
        }
        if (node.childNodes) {
            for (n of node.childNodes) {
                getTreeGridData(n);
            }
        }
    }
    // 获得当前选中的tab，下面将向这个tab添加模块组件
    var tab = Ext.getCmp("treeGridTest");

    // 展开所有节点
    sdPaperRules.expandAll();

    // 向tab里添加一个按钮
    tab.add(sdPaperRules);

});

由于Extjs的Tree组件和grid结合的话，默认情况数据行没有样式，在多列情况下，不易区分当前单元格属于哪一样。因此需要添加全局样式控制补充效果。

        .treegrid-row-style-even .x-grid-cell {
            border-top: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            background-color: #fafafa;
        }
        .treegrid-row-style-even:hover .x-grid-cell {
            background-color: #ededed;
        }