1. 程式人生 > >extjs4 treepanel checkbox 複選框

extjs4 treepanel checkbox 複選框

原部落格地址:https://blog.csdn.net/cdmamata/article/details/47001633?utm_source=blogxgwz4

Extjs4 treePanel checkBox 多選框全選問題,從網上找了幾個,發現都或多或少有點問題,於是乎就自己寫了,

結果發現 fireEvent('checkchange'...) 函式不起作用,於是直接用遞迴代替。

完美解決子節點全選時,父節點自動選擇的問題。

話不多說,直接附原始碼

  1. /** 遞迴遍歷父節點 **/
  2. var travelParentChecked = function(node, checkStatus, opts){
  3. //父節點
  4. var upNode = node.parentNode;
  5. if(upNode != null){
  6. var opts = {};
  7. opts["isPassive"
    ] = true;
  8. //父節點當前選中狀態
  9. var upChecked = upNode.data.checked;
  10. //選中狀態,遍歷父節點,判斷有父節點下的子節點是否都全選
  11. if(checkStatus){
  12. var allChecked = true;
  13. //此時父節點不可能是選中狀態
  14. //如果有一個節點未選中,可以判斷,當前父節點肯定是未選中狀態,所以此時不必向上遍歷
  15. upNode.eachChild(function (child) {
  16. if(!child.data.checked){
  17. allChecked = false;
  18. return false;
  19. }
  20. });
  21. upNode.set('checked', allChecked);
  22. if(allChecked){
  23. travelParentChecked(upNode, allChecked, opts);
  24. }else{//如果後臺傳遞資料時,選擇狀態正確的話,此處不需要執行
  25. //travelParentChecked(upNode, allChecked, opts);
  26. }
  27. }else{//未選中,讓父節點全都 不選
  28. if(upNode.data.checked){
  29. upNode.set('checked', checkStatus);
  30. travelParentChecked(upNode, checkStatus, opts);
  31. }else{
  32. //travelParentChecked(upNode, allChecked, opts);
  33. }
  34. }
  35. }
  36. }
  37. /** 遞迴遍歷子節點,複選框 **/
  38. var travelChildrenChecked = function(node, checkStatus, eOpts){
  39. var isLeaf = node.data.leaf;
  40. if(!isLeaf){
  41. node.expand(false, function(){
  42. if(eOpts["isPassive"] == null){//主動點選
  43. node.eachChild(function (child) {
  44. child.set('checked', checkStatus);
  45. travelChildrenChecked(child, checkStatus, eOpts);
  46. //child.fireEvent('checkchange',child, checked);//不知什麼原因,不起作用
  47. });
  48. }
  49. });
  50. }
  51. node.set('checked', checkStatus);
  52. }
  53. /** 樹 **/
  54. var cdmTree = Ext.create('Ext.tree.Panel', {
  55. title : '測試樹',
  56. store : cdmStore,
  57. tbar : cdmTbar,
  58. listeners : {
  59. load: function(){
  60. if(cdmTreeFirstLoad){//第一次載入時,自動展開root 節點
  61. cdmTreeFirstLoad = false;
  62. this.getRootNode().expand(false);
  63. }
  64. },
  65. checkchange: function(node, checked, eOpts){
  66. travelChildrenChecked(node, checked, eOpts);
  67. travelParentChecked(node, checked, eOpts);
  68. }
  69. }
  70. });

完畢,收工