extjs4 treepanel checkbox 複選框
阿新 • • 發佈:2018-12-17
原部落格地址:https://blog.csdn.net/cdmamata/article/details/47001633?utm_source=blogxgwz4
Extjs4 treePanel checkBox 多選框全選問題,從網上找了幾個,發現都或多或少有點問題,於是乎就自己寫了,
結果發現 fireEvent('checkchange'...) 函式不起作用,於是直接用遞迴代替。
完美解決子節點全選時,父節點自動選擇的問題。
話不多說,直接附原始碼
- /** 遞迴遍歷父節點 **/
- var 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){
- travelParentChecked(upNode, allChecked, opts);
- }else{//如果後臺傳遞資料時,選擇狀態正確的話,此處不需要執行
- //travelParentChecked(upNode, allChecked, opts);
- }
- }else{//未選中,讓父節點全都 不選
- if(upNode.data.checked){
- upNode.set('checked', checkStatus);
- travelParentChecked(upNode, checkStatus, opts);
- }else{
- //travelParentChecked(upNode, allChecked, opts);
- }
- }
- }
- }
- /** 遞迴遍歷子節點,複選框 **/
- var 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);
- travelChildrenChecked(child, checkStatus, eOpts);
- //child.fireEvent('checkchange',child, checked);//不知什麼原因,不起作用
- });
- }
- });
- }
- node.set('checked', checkStatus);
- }
- /** 樹 **/
- var cdmTree = Ext.create('Ext.tree.Panel', {
- title : '測試樹',
- store : cdmStore,
- tbar : cdmTbar,
- listeners : {
- load: function(){
- if(cdmTreeFirstLoad){//第一次載入時,自動展開root 節點
- cdmTreeFirstLoad = false;
- this.getRootNode().expand(false);
- }
- },
- checkchange: function(node, checked, eOpts){
- travelChildrenChecked(node, checked, eOpts);
- travelParentChecked(node, checked, eOpts);
- }
- }
- });
完畢,收工