ExtJs6 TreeGrid（级联选择树）

ExtJs6 TreeGrid

 

 

var treeGrid = Ext.create("Ext.tree.Panel", {
    flex: 1,
    store: {
        type: 'tree',
        fields: ['Name', 'ID', 'Type']
    },
    id: 'teleTreeGrid',
    useArrows: true,
    rootVisible: false,
    multiSelect: true,
    singleExpand: false,
    checkModel: 'cascade', // 对树的级联多选
    onlyLeafCheckable: false, // 对树所有结点都可选
    animate: false,
    root: {
        name: 'Root',
        description: 'Root description',
        expanded: true,
        checked: true,
        children: []
    },
    columns: [{
        xtype: 'treecolumn',
        text: '描述',
        dataIndex: 'Name',
        flex: 2
    }, {
        text: 'ID',
        dataIndex: 'ID',
        flex: 1
    }, {
        text: '关键字',
        dataIndex: 'Type',
        flex: 1
    }],
    listeners: {
        afterrender: function(pObj, eOpts) {},
        render: function(conSelf) {

            // 根节点（大当家的--隐藏）
            this.setRootNode({
                text: 'Root',
                expanded: true,
                checked: false,
                children: []
            });
            // 假的根节点（二当家的--显示）
            var root = this.getRootNode();
            var parent = root.appendChild({
                Name: 'Root',
                ID: '0',
                checked: false
            });
            parent.appendChild({
                Name: 'test1',
                ID: '',
                nodeType: 'test1',//自己加的属性
                leaf: false,
                checked: false
            });
            parent.appendChild({
                Name: 'test2',
                ID: '',
                nodeType: 'test2',//自己加的属性
                leaf: false,
                checked: false
            });
            parent.expand();
        },
        'itemdblclick': function(record, node, view, index) {
            // 处理点击事件
            var nodeId = Ext.isEmpty(node.data.ID) ? '' : node.data.ID + '';
            var nodeName = Ext.isEmpty(node.data.Name) ? '' : node.data.Name;
            var nodeType = Ext.isEmpty(node.data.nodeType) ? '' : node.data.nodeType;
			//请开始你的表演
			//业务代码

        },
        beforeitemexpand: function(node, index, item, eOpts) {
            // 假展开所有节点
            self.expandNode(node);
        },
        beforeitemcollapse: function(node, index, item, eOpts) {},
        "checkchange": function(node, checked, eOpts) {
            self.travelChildrenChecked(node, checked, eOpts);
            self.travelParentChecked(node, checked, eOpts);
            //  递归勾选节点
        }
    }
})

 

 

 

树的级联选择

 

/**
 * 递归遍历父节点
 *
 * @param node:节点
 * @param checkStatus:状态
 * @param opts:配置
 */
this.travelParentChecked = function(node, checkStatus, opts) {
    // 父节点
    var upNode = node.parentNode;
    if (upNode != null) {
        var opts = {};
        opts["isPassive"] = true;
        // 父节点当前选中状态
        var upChecked = upNode.data.checked;
        // 选中状态，遍历父节点，判断有父节点下的子节点是否都全选
        if (checkStatus) {
            var allChecked = true;
            // 此时父节点不可能是选中状态
            // 如果有一个节点未选中，可以判断，当前父节点肯定是未选中状态，所以此时不必向上遍历
            upNode.eachChild(function(child) {
                if (!child.data.checked) {
                    allChecked = false;
                    return false;
                }
            });
            upNode.set('checked', allChecked);
            if (allChecked) {
                self.travelParentChecked(upNode, allChecked, opts);
            } else { // 如果后台传递数据时，选择状态正确的话，此处不需要执行
                // self.travelParentChecked(upNode, allChecked, opts);
            }
        } else { // 未选中，让父节点全都 不选
            if (upNode.data.checked) {
                upNode.set('checked', checkStatus);
                self.travelParentChecked(upNode, checkStatus, opts);
            } else {
                // travelParentChecked(upNode, allChecked, opts);
            }
        }
    }
}

	/** 
	 * 递归遍历子节点，复选框
	 * 
	 * @param node:节点
	 * @param checkStatus:状态
	 * @param opts:配置
	 */
	this.travelChildrenChecked = function(node, checkStatus, eOpts) {
		var isLeaf = node.data.leaf;
		if (!isLeaf) {
			node.expand(false, function() {
						if (eOpts["isPassive"] == null) {// 主动点击
							node.eachChild(function(child) {
								child.set('checked', checkStatus);

								self.travelChildrenChecked(child, checkStatus,
										eOpts);
									// child.fireEvent('checkchange',child,
									// checked);//不知什么原因，不起作用
								});
						}
					});
		}
		node.set('checked', checkStatus);
	}