很久以前,我学会了用dhtmlxtree,那是一棵很不错的树,用起来很方便,但是一个问题一直没有解决,从前都是分很多次去数据库中查,遵循的原则是,先查出上级,然后再根据上级ID查出下级ID,这样一层一层的查,于是当数据量大了,树加载的时候会很的很慢,有时候等他开始加载的时候,可以告诉屏幕前的人员,“您可以选择去查喝杯咖啡或者出去逛逛再回来,因为需要很久”,顿时无语。
数据库是这样设计的:
ID 名称 上级ID
1 A
2 B
3 C 1
4 D 1
……
使用dhtmlxtree的方法(自己查看API):
第一步:加载JS,CSS,其中包括dhtmlxcommon.js,dhtmlxtree.js,dhtmlXTreeExtend.js,dhtmlxtree.css
第二步:写入HTML,如下
<table width="100%" class="searchTable">
<tr><td class="searchTdTitle">分类体系结构</td>
</tr>
<tr>
<td class="lefttree"><a href="javascript:void(0);" οnclick="tree.openAllItems(0);">展开</a>
<a href="javascript:void(0);" οnclick="tree.closeAllItems(0);">收拢</a></td>
</tr>
<tr>
<td class="lefttree"><div id="treeboxbox_tree" class="dhtmlxTree" style="width:230px;"></div></td>
</tr>
</table>
<script>
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);//初始化树
tree.setImagePath("<%=path %>/skins/blue/common/dhtmlx/images/csh_yellowbooks/");//设计图片路径
tree.enableCheckBoxes(0);//是否显示复选框
tree.loadXML("<%=path%>/drmsTaxon.do?action=taxonTree"); //XML路径
tree.setOnClickHandler(addChild); //单击函数
</script>
</body>
//单击时所需加载的函数:
//偶喜欢用jquery,所以得需要调用jquery的函数(哎哟,这不需要偶提供了吧,上谷歌,啥都知道了),
function addChild(id){
tree.deleteChildItems(tree.getSelectedItemId(id));//加载之前先删除他的页子结点
var url="<%=path%>/drmsTaxon.do?action=getTaxonChild&taxonId="+tree.getSelectedItemId(id);//发送AJAX的URL
$.getJSON(
url,
function(data){
$.each(data.rows,function(entryIndex,entry){//ajax回调后,类似于for循环.
tree.insertNewChild(tree.getSelectedItemId(id),entry['taxonId'],entry['taxonName'],'','leaf.gif','folderOpen.gif','folderClosed.gif','','');//使用这个函数.
});
}
);
}
函数说明:
insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)
很明显,第一个parentId是父结点. itemId,itemText加载的子结点的ID与名称.itemActionHandler偶没用过,初分析应该是所需调用的函数,image1,image2,image3很明显是图片地址与路径.optionStr,childs偶也没有使用过,下次用了再告诉你