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);}