日期:2014-05-17  浏览次数:20712 次

dhtmlXTreeObject 树实现

dhtmlXTreeObject这种树还是挺实用的,首先我觉得其配置不是特别复杂,也可以实现右键功能,异步加载等;当然,要说的是,这个不是效果特别绚的树,在此给大家仅作参考:

?

需导入的JS或CSS如下:

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/dhtmlxtree.css">

<script type="text/javascript" src="<%=request.getContextPath()%>/js/dhtmlxcommon.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/dhtmlxtree.js"></script>

?

下面为部分实现:

????????? //功能菜单树
???????????????? ?var navFucnId=<%=navFucnId%>;
??????????? ??tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%","root");?
??????????? ??tree.setSkin("dhx_skyblue");
??????????? ??tree.setImagePath("<%=request.getContextPath()%>/images/tree/");
??????????? ??tree.setOnClickHandler(doOnClick);
??????????? ??tree.loadXML("<%=request.getContextPath()%>/system/funcNodeAction!getSystemMenuFunc.do?navFuncId="+navFucnId,function(){tree.openItem("root")});
??????????? ??//tree.loadXML("tree.xml",function(){tree.openItem("root")});
??????????? ??function doOnClick(id){?
??????????? ????var nowStr = "";
??????????? ????var setlectNode = tree.getSelectedItemId().split(",");
??????????? ????var temp = tree._globalIdStorageFind(setlectNode[0]);
??????????? ???//?alert(temp.label);
??????????? ????if(temp.parentObject.id != 0){
??????????? ????while(typeof(temp.parentObject) == "object" ){
??????????? ?????nowStr =? temp.label + ">>" + nowStr;
??????????? ?????temp = temp.parentObject;
??????????? ????}?????
??????????? ???
??????????? ????var $now = $(window.parent.frames["mainRightFrame"].frames["currentFrame"].document).find("span#now");
??????????? ????var str = $now.text().toString().substr(0,5);
??????????? ???//?alert(str);
??????????? ????????? ?$now.html("<font color='#36106B' >"+str+nowStr.substr(0,nowStr.length-2)+"</FONT>" );
??????????? ????????? ?
??????????? ????????? ?//把节点id等相关信息传入到当前位置页面
??????????? ???????? // ?var $treeInfo = $(window.parent.frames["mainRightFrame"].frames["currentFrame"].document).find("span#treeInfo");
??????????? ????????? ?var $treeInfo = $(window.parent.frames["navFrame"].document).find("span#treeInfo");
??????????? ????????? ?var selectNodeId=tree.getSelectedItemId();
??????????? ????????? ?//alert(selectNodeId);
??????????? ????????? ?var hasChildren=tree.hasChildren(selectNodeId);
??????????? ????????? ?
??????????? ????????? ?var initTreeId=selectNodeId;
??????????? ????????? ?if(hasChildren==0){?
??????????????? ????????? ?//根结点
??????????? ????????? ??while(tree.getParentId(selectNodeId)!='root'){
??????????? ????????? ???var parentId=tree.getParentId(selectNodeId);
??????????? ????????? ???initTreeId=initTreeId+','+parentId;
??????????? ????????? ???selectNodeId=parentId;
??????????? ????????? ??}
??????????? ????????? ??//alert(initTreeId);
??????????? ????????? ??initTreeId=initTreeId+','+'11000000'+',99999999';
??????????? ????????? ??//alert(initTreeId);
??????????? ????????? ??$treeInfo.html("<input type='hidden' value='"+initTreeId+"' id='funcNodeId' name='funcNodeId' />");
??????????? ????????? ?}else{
??????????? ????????? ??$treeInfo.html("<input type='hidden' value='' id='funcNodeId' name='funcNodeId' />");
??????????? ????????? ?}
??????????? ???}
??????????? ???
??????????? ???var myUrl = tree.getUserData(id,"url");?
??????????????//?alert("myUrl="+myUrl)
??????????? ???if(myUrl != undefined){
??????????? ????// window.parent.frames["mainRightFrame"].frames["workAreaFrame"].location.href=myUrl;
??????????? ????openPage(tree._globalIdStorageFind(setlectNode[0]).label, myUrl);
??????????? ????return true;
??????????? ???}
??????????? ??};

?