Ext.js中树勾选的四种操作
最近在做控件优化的时候产品提了一个需求,对树的勾选要满足四种勾选方案:
1.点击一次根节点,当根节点和子节点均未选中的情况下,根节点和子节点全都选中。
2.第二次点击根节点,当根节点和部分或全部子节点都选中的情况下,仅选中根节点,子节点不选中。
3.第三次点击根节点,当根节点未选中,且无子节点全未选中的情况下,选中所有子节点,根节点不选中。
4.第四次点击根节点,当根节点未选中,但存在选中的子节点的情况下,根节点和子节点均不选中。
5.点击子节点,可以选中取消。
完整代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
操作位代码: { xtype: 'actioncolumn', width: 48, text:'选择', align: 'center', stopSelection: true, sortable: false, menuDisabled: true, items: [{ width: 13, height: 13, handler: function (view, rowIdx, colIdx, item, evt) { var sto = view.getStore(); var rec = sto.getAt(rowIdx); var check = rec.get('Checked'); if (isNaN(check)) check = 0; if (check == -1) return; me.setLoading("loading"); if (check == 1) { //点击的节点是选中状态 check = 0; me.checkNode(rec, false); } else { //点击的节点是未选中状态 check = 1; me.checkNode(rec, true); } me.setLoading(false); } }] } 核心代码: checkNode: function (rec, checked) { var me = this; var check = 0; var hasCheckedNode = false; //是否有子节点选中 var hasNodes = false; //是否有子节点 rec.cascade(function (r) { //遍历子节点 var len = r.get('children'); if (len) { hasNodes = true; } if (!r.isLeaf() && !r.isExpanded()) { r.expand(); } if (r.get('Checked') == 1 && !len ) { //节点有选中,而且选中的不是父节点本身 hasCheckedNode = true; } }); if (!checked) { if (hasCheckedNode && hasNodes) { //前提:父子节点都选中;效果:父节点选中,子节点不选中。 check = 1; //下级全部取消 rec.cascade(function (r) { if (r.get('Checked') !== 0) r.set('Checked', 0); }); } else if (!hasCheckedNode && hasNodes) { //前提:父节点选中,子节点未选中;效果:父节点不选中,子节点选中。 check = 0; //下级全部选中 rec.cascade(function (r) { if (r.get('Checked') !== 1) r.set('Checked', 1); }); } else if (!hasCheckedNode && !hasNodes) { //该节点是无子节点的节点 check = 0; } } else { if (hasCheckedNode && hasNodes) { //前提:父节点不选中,子节点选中;效果:父节点都不选中。 check = 0; //下级全不选中 rec.cascade(function (r) { if (r.get('Checked') != 0) { r.set('Checked', 0); } }); } else if (!hasCheckedNode && hasNodes) { //前提:父子节点不选中;效果:父子节点都选中。 check = 1; //下级选中 rec.cascade(function (r) { if (r.get('Checked') != 1) { r.set('Checked', 1); } }); } else if (!hasCheckedNode && !hasNodes) { //该节点是无子节点的节点 check = 1; } } rec.set('Checked', check); } });
核心点分析:
1.首先要确定我们点击的是根节点还是子节点。所以定义了
var hasNodes = false; //是否有子节点
2.要分别控制根节点跟子节点的话,那点击根节点的时候要查看是否有子节点选中,所以继续定义了
var hasCheckedNode = false; //是否有子节点选中
3.再根据点击的该节点的初始状态就可以进行逻辑判断,达到效果。