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;
               }
              };

 

 

注：JS写得有点乱，对大家来说，中间有些是没有用的东西

1.tree.loadXML("<%=request.getContextPath()%>/system/funcNodeAction!getSystemMenuFunc.do?navFuncId="+navFucnId,function(){tree.openItem("root")});
这个主要是加载树，去对应的后台方法将树返回，并展开根结点

2. tree.setOnClickHandler(doOnClick);  其中的doOnClick 为下面的JS方法，相当于单击树结点触发的方法
3. var myUrl = tree.getUserData(id,"url"); 这个是在树中取到当前点击节点的URL，当然，树结点的信息是后台返回的，有url对应信息
上面是我认为对使用这个树有用的地方，希望对看的朋友有帮助吧,网上有许多对其方法及属性的资料的