Dhtmlxtree Introduction (reprint)

Dhtmlxtree is a tree menu that allows us to quickly develop a graceful, Ajax-based JavaScript library.

She allows online editing, drag-and-drop, three states (select All, uncheck, half), check boxes and more. At the same time, when loading large amounts of data, still

Can maintain a very efficient speed. Next, let's experience the visual impact that Dhtmlxtree brings.

demo:http://www.dhtmlx.com/docs/products/dhtmlxtree/samples/
Api:http://docs.dhtmlx.com/doku.php?id=dhtmlxtree:api_toc_alpha

First, a demo chart.

<div id= "Index_tree" style= "height:100%; width:100%; Overflow:auto; Display:block; "oncontextmenu=" return false; " ></div><script type= "Text/javascript" >    tree=new dhtmlxtreeobject ("Index_tree", "100%", "100%", 0 );    Tree.setimagepath ("<%=request.getcontextpath ()%>/js/imgs/csh_dhx_skyblue/");    Tree.enablecheckboxes (1);    Tree.enablethreestatecheckboxes (true);    Tree.loadxml ("<%=request.getcontextpath ()%>/alarmmenutreeaction.do?function=getalarmmenutree&alarmid =${alarmid}&type=${type} ");    Tree.setxmlautoloading ("<%=request.getcontextpath ()%>/alarmmenutreeaction.do?function=getalarmmenutree &alarmid=${alarmid}&type=${type} "); </script>

It's a demo of a project that I wrote myself.

Look at the official survey found thatDhtmlxtree should also be able to support other service-side language, interested can go to the official website to see.

Here is a simple translation of some sample, welcome to shoot Bricks

I. Appearance 1. Set the add minus icon to show the state Tree.showitemsign (Tree.getselecteditemid (), false);(false to hide true display) 2. Sets the direction of the tree Tree2.enablertl (fals e);--default FALSE3. Set node height enablemultilineitems ("300px"); 4. Set the node style Setitemstyle (Tree.getselecteditemid (),    document.getElementById (' TUDs '). Value) <textarea id= "TUDs" rows= "ten" >font-weight:bold; Text-decoration:underline;5. Set the size symbol information tree.enabletreeimages ("-icons");//Set whether the icon Tree.enabletreelines ("-lines") is displayed; /Set whether the connection line tree.enabletextsigns ("Cross Signs") is displayed;//sets whether to display the intersection line (that is, horizontal) 6. Set the Topoffset setitemtopoffset of the selected node (    Tree.getselecteditemid (), "60px") 7. Set Skin Tree.setskin (' dhx_skyblue ');    Tree.setimagepath ("http://www.cnblogs.com/codebase/imgs/");    Tree.setimagepath ("http://www.cnblogs.com/codebase/imgs/csh_scbrblue/"); Tree.setimagepath ("http://www.cnblogs.com/codebase/imgs/csh_yellowbooks/"); 8. Set the node font color Setitemcolor ( Tree.getselecteditemid (), Color1, Color2) color1=color29. Set icon Tree.setitemimage2 (Tree.getselecteditemid (), ' Leaf3.gif ', ' leaf3.gif ', ' lEaf3.gif ') Two, check box/Radio tree.enablecheckboxes (1);//Set check box Tree.enablethreestatecheckboxes (TRUE);//Allow semi-select State 1. Gets the selected node tree. Getallchecked ()--not including parent Node 2. Gets the unselected node tree.getallunchecked () 3. Gets the selected node, including the half-selected state of Tree.getallcheckedbranches () 4.    Gets the partially selected node object (the node of the semi-selected state) tree.getallpartiallychecked () 1+2=3 5. Radio Box tree.enablecheckboxes (1); Enableradiobuttons (' db ', true)--DB is the node ID true is set to a radio box SetCheck (Tree.getselecteditemid (), true)--check SetCheck (tree.g Etselecteditemid (), false)--Do not select Showitemcheckbox (Tree.getselecteditemid (), false)--set the node as a check box Disablecheckbox ( Tree.getselecteditemid (), true)--Remove check box Disablecheckbox (Tree.getselecteditemid (), false)--check box fails Disablecheckbox ( Tree.getselecteditemid (), true)--Restore setsubchecked (Tree.getselecteditemid (), true)--the child nodes under the Settings node are all selected Setsubchecked (        Tree.getselecteditemid (), false)--set node below the child nodes are all unchecked three, event right-click event Menu = new Dhtmlxmenuobject (); Menu.seticonspath ("..        /common/images/");        Menu.renderascontextmenu (); Menu.attacheveNT ("OnClick", OnButtonClick); Menu.loadxml ("..        /common/_context.xml ");        Menu.renderascontextmenu ();        Menu.attachevent ("OnClick", OnButtonClick);        Tree.enablecontextmenu (menu);                Drag event Tree.enabledraganddrop (true); Event Tree.attachevent before the Click event is triggered ("Onbeforecontextmenu", function (itemId) {if (Tree.haschildren (itemId) >            0) {menu.hideitem (' outher ');            } else {Menu.showitem (' outher ');        } return true;    }); pre/post-load event Tree.setonloadingstart (FUNC_A);    Tree.setonloadingend (Func_b);    Right-click event Tree.setonrightclickhandler (_rclick), double-click event Setondblclickhandler Tree.setonopenhandler (Tonopen); Tree.attachevent ("Onopenend", Function (NodeId, event) {});

A common method is also attached, for reference only

Constructor Dhtmlxtreeobject (htmlobject, width, height, rootid)//rootid Virtual root node, not displayed on interface, general value 0replace IMG tag with background Images-solve problem with IE image caching, not the works for IE6 sp1enableieimagefix (mode) destructor destructor () implementation inherits the Clone () node construction letter Number Dhtmlxtreeitemobject (Itemid,itemtext,parentobject,treeobject,actionhandler,mode)//Mode-do not show Images loading tree from XML string loadxmlstring (Xmlstring,aftercall)//aftercall-function which would be called after XML Loading a new child node from the XML file Load Tree Loadxml (File,aftercall), the first three parameters are required Insertnewitem (Parentid,itemid,itemtext,itemactionhandler , Image1,image2,image3,optionstr,childs) Insertnewchild (parentid,itemid,itemtext,itemactionhandler,image1,image2 , image3,optionstr,childs) node expansion and contraction: [1-close 2-open]_hideshow (Itemobject,mode) Get node Status: 0-No child nodes, 1-node closure, 1-node Expansion _ Getopenstate (node) getopenstate (itemId) Gets the selected node Idgetselecteditemid () Select node _selectitem (node,e) Gets the node's Indexgetindexbyid (itemId) Settings right-click event Setonrightclickhandler (func) setting mouse click event Setonclickhandler (func) Set node state Change event Setonselectstatechange (fUNC) settings allow dynamic load XML file (asynchronous load) setxmlautoloading (filePath) Settings checkbox Click event Setoncheckhandler (Func) Settings node expand/ Collapse Event Setonopenhandler (func) Set node start/collapse Open event Setonopenstarthandler (func) Set node expansion/closure End Event Setonopenendhandler (func) Set the node double-click event Setondblclickhandler (func) to expand the node and all sub-nodes below _xopenall (node)//increase the judgment of non-delivery itemId (1494) Openallitems (itemId)// If the ItemId parameter is not passed, the node _globalidstoragefind (itemId) node and all its child nodes _xcloseall (node) are obtained by the closure root node, based on the ID. An error in the original logic was modified (1521) Closeallitems (itemId)//Do not pass the ItemId parameter then the node is closed to add user-defined data//fix an error (1548) Setuserdata (Itemid,name, Value) Gets the user-defined data getuserdata (itemid,name) Gets the node color getitemcolor (itemId) Settings node color Setitemcolor (Itemid,defaultcolor, Selectedcolor) Gets the node name--(with HTML formatting, if any) GetItemText (ItemId) Gets the parent node Idgetparentid (itemId) Change node Idchangeitemid (itemid,newitemid) to mark the clipped node docut () Paste the clipped node under the new parent node Dopaste (itemId) empty the clipped node clearcut () Move Node _ MoveNode (itemobject,targetobject) allows check boxes for three states (select all, unselected, partially selected) enablethreestatecheckboxes (mode)//1-on, 0-off; Set the mouse hover event Setonmouseinhandler (func) to set whether the mouse move event Setonmouseouthandler (func) setting allows the tree picture to be displayed EnabletreeimagEs=function (Mode)//1-on, 0-off sets whether to allow the fixed mode (the interface that displays the check box is beautiful, but there is no horizontal scrollbar) Enablefixedmode (mode)//-1-on, 0-off whether the check box is displayed enabl Echeckboxes (mode, hidden)//mode 0/1 hidden 0/1 set node picture setstdimages (Image1,image2,image3)//a0-image for node without Childrens a1-image for closed node A2-image for opened node sets whether to show tree line enabletreelines (mode) settings picture setimagearrays (arrayname,i MAGE1,IMAGE2,IMAGE3,IMAGE4,IMAGE5)//image1-line crossed image image2-image with top line image3-image with bottom Li Ne image4-image without line image5-single root image expands the current node (section) _openitem (node) openItem (itemId) closes the current node (section) Closeitem ( ITEMID) Gets the number of nodes of the node Getlevel (itemId) sets whether the node is allowed to be collapsed setitemcloseable (itemid,flag)//flag 0/1 The number of child nodes returned for the expansion node, For nodes that do not load child nodes (asynchronously loaded) returns the number of child nodes under the Truehaschildren (ITEMID) Acquisition node _getleafcount (itemnode) sets the node name Setitemtext (Itemid,newlabel, Newtooltip) Get node Tipgetitemtooltip (itemId) Refresh node Refreshitem (itemId) Settings node picture setItemImage2 (ItemId, Image1,image2,image3 )//image1-node without childrens image image2-closed node Image Image3-open nodE Image Settings node picture setitemimage (itemid,image1,image2)//image1-node without childrens image or closed node image (if Image2 spe cified) image2-open node image (optional) Gets all child node IDs under the node with comma-separated getsubitems (itemId) getallsubitems (itemId) gets all the child nodes of the node _ Getallscraggyitems (node) Gets the name of the selected node-(with HTML formatting, if any) Getselecteditemtext () sets the selected state of the node SetCheck (itemId, State)//state-checkbox states (0/1/unsure) Settings node and all child nodes are selected setsubchecked (itemid,state) Gets the selected state of the node Return:node States (0- unchecked,1-checked, 2-third State) isitemchecked (itemId) Delete all child nodes of the node Deletechilditems (itemId) Delete node DeleteItem (itemId, Selectparent)//selectparent-if True parent of deleted item get selection, else no selected items leaving in tree. Create under Node One node, the first three parameters are required Insertnewnext (itemid,newitemid,itemtext,itemactionhandler,image1,image2,image3,optionstr,childs) The Idgetchilditemidbyindex (Itemid,index)//itemid Node ID of the node under index gets nodes to set whether drag event Setdraghandler (func) settings allow drag//mode- enabled/disabled [can be true/false/temporary_disabled-last value mean that Tree can be d-n-d can is switched to true later]//rmode-enabled/disabled drag and drop on Super Rootenabledraganddrop ( Mode,rmode) Set whether IE cache preventiecashing=function (mode)//mode-enable/disable random seed (disabled by default) is allowed Sets whether to allow selected node name highlighting enablehighlighting (mode)//mode-1-on, 0-off allows the picture to be clicked and dragged (clickable and dragable) Enableactiveimages ( mode)//Mode-1-on, 0-off set node get focus Focusitem (itemId) Get all nodes without child nodes idgetallchildless () Getallleafs () Gets all nodes with child nodes Idgetallitemswithkids () gets all the selected node IDs, excluding nodes in the third State (partially selected nodes) getallchecked () gets all the selected node IDs, Nodes that include the third State (partially selected nodes) Getallcheckedbranches () gets all the unselected node IDs under the node, and does not pass itemId to find getallunchecked (itemId) starting from the root node Gets all partially selected node IDs (nodes selected due to partial child nodes selected) getallpartiallychecked () Set node style Setitemstyle (itemid,style_string) Set whether to allow dragging pictures Enableimagedrag (mode) Set function called when tree item draged over another Itemsetondragin (func) Set drag to allow auto-scrolling enabledraganddropscrolling: When loading a tree, you must ensure that the IDs of all nodes are not duplicated, otherwise the control will automatically generate a random number (the original id+ "_" + the current date) for the duplicate ID. Added a dhtmlxtreeextend.js to extend the original class, adding Getallcheckedleaf (), Getalluccheckedleaf () two functions modified 1 bug:1 to perform expansion when no nodes are selected Shrinks the selected node times no parentid bugdhtmlxtreeobject.prototype.setsubchecked=function (itemid,state) {if (itemId) {var snode=this . _globalidstoragefind (ItemId); this._setsubchecked (State,snode); this._correctcheckstates (Snode.parentobject);}} 1 The ItemId parameter is incremented by default when you expand Dhtmlxtreeobject.prototype.openallitems=function (itemId) {if (itemid==window.undefined) from the root node. Itemid=this.rootid;var Temp=this._globalidstoragefind (itemId); if (!temp) return 0;this._xopenall (temp);};

Dhtmlxtree Introduction (reprint)