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方法来处理:
这是修改后的函数代码:
- 1. dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
- 2. if (!this.tscheck) return;
- 3. if (!dhtmlObject) return;
- 4. if (dhtmlObject.id==this.rootId) return;
- 5. //calculate state
- 6. var act=dhtmlObject.childNodes;
- 7. var flag1=0; var flag2=0;
- 8. if (dhtmlObject.childsCount==0) return;
- 9. for (var i=0; i<dhtmlObject.childsCount; i++){
- 10. if (act[i].dscheck) continue;
- 11. if (act[i].checkstate==0) flag1=1;
- 12. else if (act[i].checkstate==1) flag2=1;
- 13. else { flag1=1; flag2=1; break; }
- 14. }
- 15.
- 16. if ((flag1)&&(flag2)) this._setCheck(dhtmlObject,"unsure");
- 17. else if (flag1) {
- 18. //add by polarbear, 2008.10.18, change checkbox, when child not check , parent aslo check
- 19. //this._setCheck(dhtmlObject,false);
- 20. }
- 21. else this._setCheck(dhtmlObject,true);
- 22.
- 23. this._correctCheckStates(dhtmlObject.parentObject);
- 24. }
问题2:
在调用获取已选中的checkbox的方法的时候,tree.getAllChecked();,有可能会碰到获取的id不是你要的id的情况, 比如:节点的id为a001,结果取成了a001_12254121454214,后面一长串的东西明显是一个时间戳,这个问题暂时没有查明是因为什么原 因导致的,只是简单的在获取item的时候加了一个id的处理方法:
( 哪位仁兄如果知道问题原因,麻烦转告一下)
- 1. function getTureItemId(itemId) {
- 2. var resultId = itemId;
- 3. if(itemId.indexOf("_") > 0) {
- 4. var itemId1 = itemId.substring(0,itemId.indexOf("_"));
- 5. var itemId2 = itemId.substring(itemId.indexOf("_")+1,itemId.length);
- 6. if(itemId2.length == 13) {
- 7. resultId = itemId1;
- 8. }
- 9. }
- 10. return resultId;
- 11. }