树型控件dhtmlxtree使用注意事项~

Dhtmlx是一种非常强大的javascript组件库,每个组件相对独立,相对Ext,它的使用要简明多了,如果是对原有系统的改造建议使用该库。Dhtmlx的官方网站:http://www.dhtmlx.com/

Dhtmlx有很多组件库,这里只是讲讲在使用dhtmlxtree中碰到的问题。

关于dhtmlxtree的Checkbox:


树形控件支持两种checkbox方式
第一种就是简单的checkbox,钩中和不钩中
第二种比较复杂,在dhtmlxtree中称之为multicheckbox,这种checkbox需要通过设置enableThreeStateCheckboxes这个选项才能生效。
multicheckbox处理方式:单击父亲节点,子节点会自动被全部选中,单击子节点,父亲节点也会被全部选中,当然很多情况下你不希望是这 样的处理方式,因此你可以通过修改dhtmlxtree.js来设置,具体修改 dhtmlXTreeObject.prototype._correctCheckStates 处理方法即可。

问题1:
因为项目中要求当所有的子节点取消选中后,父亲节点的选中也必须被保留(默认会跟着一起取消掉),所以必须通过修改_correctCheckStates方法来处理:
这是修改后的函数代码:

Code:
  1.  1. dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){    
  2.  2.    if (!this.tscheck) return;    
  3.  3.    if (!dhtmlObject) return;    
  4.  4.    if (dhtmlObject.id==this.rootId) return;    
  5.  5.    //calculate state    
  6.  6.    var act=dhtmlObject.childNodes;    
  7.  7.    var flag1=0; var flag2=0;    
  8.  8.    if (dhtmlObject.childsCount==0) return;    
  9.  9.    for (var i=0; i<dhtmlObject.childsCount; i++){    
  10. 10.       if (act[i].dscheck) continue;    
  11. 11.       if (act[i].checkstate==0) flag1=1;    
  12. 12.       else if (act[i].checkstate==1) flag2=1;    
  13. 13.          else { flag1=1; flag2=1; break; }    
  14. 14.          }    
  15. 15.     
  16. 16.    if ((flag1)&&(flag2)) this._setCheck(dhtmlObject,"unsure");    
  17. 17.    else if (flag1)  {    
  18. 18.     //add by polarbear, 2008.10.18, change checkbox, when child not check , parent aslo check    
  19. 19.     //this._setCheck(dhtmlObject,false);    
  20. 20.    }    
  21. 21.       else  this._setCheck(dhtmlObject,true);    
  22. 22.     
  23. 23.       this._correctCheckStates(dhtmlObject.parentObject);    
  24. 24. }    


问题2:
在调用获取已选中的checkbox的方法的时候,tree.getAllChecked();,有可能会碰到获取的id不是你要的id的情况, 比如:节点的id为a001,结果取成了a001_12254121454214,后面一长串的东西明显是一个时间戳,这个问题暂时没有查明是因为什么原 因导致的,只是简单的在获取item的时候加了一个id的处理方法:
( 哪位仁兄如果知道问题原因,麻烦转告一下)

Code:
  1.  1. function getTureItemId(itemId) {    
  2.  2.         var resultId = itemId;    
  3.  3.         if(itemId.indexOf("_") > 0) {    
  4.  4.             var itemId1 = itemId.substring(0,itemId.indexOf("_"));    
  5.  5.             var itemId2 = itemId.substring(itemId.indexOf("_")+1,itemId.length);    
  6.  6.             if(itemId2.length == 13) {    
  7.  7.                 resultId = itemId1;    
  8.  8.             }    
  9.  9.         }    
  10. 10.         return resultId;    
  11. 11.     }    

 

你可能感兴趣的:(JavaScript,function,ext)