Extjs中的树形结构

结果图
树形结构extjs的类能完美解析，后台返回的只是简单list<Map<String,String>>
不过value里的内容要有关系，比如01，0101， 010101以此类推
讲完后台的数据格式再来讲前台的显示
新建权限模型

Ext.define('RightsModel', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        {name: 'funID', type: 'string'},
        {name: 'ffunID', type: 'string'},
        {name: 'funName', type: 'string'},
        {name: 'note', type: 'string'}
    ]
});

解析树形核心代码：树形store，存储树形数据

var storeRights = Ext.create('Ext.data.TreeStore', {
    autoLoad: true,
    model: 'RightsModel',
    folderSort: false,
    proxy: {
        type: 'ajax',
        url: 'Sys/loadPermission',
        reader: {type: 'json'}
    },
    listeners: {
        beforeload: function (store, options) {
            var params = {roleId: _RoleID};
            Ext.apply(store.proxy.extraParams, params);
        }
    }
});

列名：

var cmRights = [{
    xtype: 'treecolumn',
    text: '名称',
    sortable: false,
    dataIndex: 'funName',
    width: 250,
    titleAlign: 'center'
}, {
    text: '编号',
    dataIndex: 'funID',
    width: 100,
    titleAlign: 'center'
}, {
    text: '备注',
    sortable: false,
    flex: 1,
    dataIndex: 'note',
    titleAlign: 'center'
}];

树形面板显示数据

var treeRights = Ext.create('Ext.tree.Panel', {
    title: '权限',
    store: storeRights,
    rootVisible: false,
    frame: false,
    columnLines: true,
    checkModel: "parentCascade",
    multiSelect: false,
    singleExpand: true,
    columns: cmRights,
    height: 390,
    listeners: {
        "checkchange": function (node, state) {
            //-------------------------------------------------
            //级联勾选多个父级节点
            checkedParentNode(node, state)
            //-------------------------------------------------
            //级联勾选子级节点
            node.cascadeBy(function (child) {
                child.set("checked", state);
            });
            //-------------------------------------------------
        }

    }
});

function checkedParentNode(node, state) {
    if (node.parentNode != null) {
        if (state) {
            node.parentNode.set('checked', state);
        }
        checkedParentNode(node.parentNode, state)
    }
}

点击的事件，点击一个节点，把他所有的父节点都选中，并且把他所有的子节点都选中，同级的不选。
新建窗口显示这个面板

  var winPerm = new Ext.window.Window({
        title: 'MODBUS子设备信息',
        width: 520,
        height: 350,
        modal: true,
        resizeable: false,
        collapsible: true,
        closeAction: 'close',
        bodyStyle: 'padding:5px;',
        layout: 'fit',
        buttonAlign: 'center',
        items: [formPerm],
        buttons: [{
            type: 'button',
            text: '关 闭',
            handler: function () { winPerm.close(); }
        }]
    });
}
winPerm.show();

完成。