1. Tree implementation
Tree Structure is implemented on the web, which is also implemented through Ajax. Custom icons can be displayed on the tree, including insertion, deletion, and node. Nodes can be moved at will. Here we will not focus on the Implementation Technology of the tree. We have encapsulated it. You only need to change it as required.
1) Key-based tree file
Key the tree-related files between CodeAs follows:
<LINK rel = "stylesheet" type = "text/CSS" href = "CSS/dhtmlxtree.css">
<SCRIPT src = "JS/dhtmlxcommon. js"> </SCRIPT>
<SCRIPT src = "JS/dhtmlxtree. js"> </SCRIPT>
2) Loading Method
The document on the page opens the custom loading method. The preloadimages method defines the icons of the tree control. The code for defining the icons of the doonload implementation tree control is as follows:
<Body onload = "preloadimages (); doonload ();">
3) Writing Method
// Doonload implements loading and display the tree. Set tree attributes.
Function doonload (){
Orgtree = new dhtmlxtreeobject (document. getelementbyid ('divtree'), "100%", "100%", 0 );
// Dhtmlxtreeobject is a tree object. By creating a new object, you can specify the DIV definable tree displayed in the tree.
Orgtree. setimagepath ("IMGs/"); // you can specify the Image Location of the tree.
Orgtree. setdraghandler (); // you can drag a tree node.
Orgtree. enabledraganddrop (true) // you can specify whether the tree node can be dragged.
Orgtree. setdraghandler (mydraghandler); // sets the method to be executed when the tree node is dragged.
Orgtree. setonclickhandler (myselecthandler); // set the method to be executed when the tree is clicked
// Orgtree. setxmlautoloading ("org. jsp"); // load the tree node data. The data source is a string in XML format returned by org. jsp. The data is dynamically loaded and is loaded only when it is expanded.
Orgtree. loadxml ("root. xml? 0 "); // load the tree node data. The data source is the root. xml file, and the idnumber of the XML file is 0.
// Orgtree. loadxml ("org. jsp"); // load the tree node data. The data source is a string in XML format returned by org. jsp, and all data is loaded at a time.
}
// Implement the icon definition of the tree control using the preloadimages Method
Function preloadimages (){
VaR imsrcar = new array ("line1.gif", "line2.gif", "line3.gif", "line4.gif", "minus2.gif", "minus3.gif ",
"Minus4.gif", "plus2.gif", "plus3.gif", "plus4.gif", "book.gif", "books_open.gif", "books_close.gif ",
"Magazine_open.gif", "magazine_close.gif", "tombs.gif", "tombs_mag.gif", "book_titel.gif ")
VaR IMAR = new array (0 );
For (VAR I = 0; I <imsrcar. length; I ++ ){
IMAR [imar. Length] = new image ();
IMAR [imar. Length-1]. src = "IMGs/" + imsrcar [I]
}
}
2. Organization Management Implementation
Organizations can be added, deleted, or edited. At the same time, the Organization should be displayed for editing and viewing when Tree nodes are selected. To implement these functions, you only need to change as required.
1) definitions of global variables
In many cases, we need to use some public variables. We define global variables between <SCRIPT> and </SCRIPT>. The Code is as follows:
VaR orgtree = NULL; // The DOM of the organizational tree
VaR nextseq = 0; // Personnel Management sequence number (sequential number)
VaR persondom; // personnel dom
VaR currnodeid; // the ID of the current node.
2) initialization
When the page is opened, we need to control that part of the display, that part should be hidden. Assign values to global variables and organize them. In the document on the page, the custom Loading Method Init () is opened, and the init method is initialized.
<Body onload = "Init ();">
The init method is implemented as follows:
Function Init (){
// Define the persondom as an xmldom object
Persondom = new activexobject ('Microsoft. xmldom ');
Persondom. async = false;
// Define stylesheet as an xmldom object, and stylesheet as the persondom to determine the display style
Stylesheet = new activexobject ('Microsoft. xmldom ');
Stylesheet. async = false;
Stylesheet. Load ("addorgperson. XSL"); // load the stylesheet style definition file
// Load Organization type data
var XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
XMLHTTP. open ("Post", "org. JSP? Mode = getorgtype ", false);
XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded");
XMLHTTP. send ();
retxml = XMLHTTP. responsetext;
// alert (retxml);
// Insert the organization type to the drop-down list control.
var orgdoc = new activexobject ('Microsoft. xmldom ');
orgdoc. async = false;
orgdoc. loadxml (retxml);
var root = orgdoc.doc umentelement;
onodelist = root. childnodes;
txttype. options. length = onodelist. length;
for (VAR I = 0; I {< br> item = onodelist. item (I);
var orgtypeid = item. childnodes (0 ). text;
var orgtypename = item. childnodes (1 ). text;
txttype. options [I]. value = orgtypeid;
txttype. options [I]. TEXT = orgtypename;
// txttype. options [0].
}< BR >}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
