AJAX + J2EE development organization management system (1)

I. Overview
AJAX is a new technology that came out earlier this year. It is short for Asynchronous JavaScript and XML. It is a group of Web application development technologies that allow browsers to provide users with a more natural browsing experience. Whenever an update is required, modifications to the client web page are asynchronous and gradually added. In this way, AJAX significantly increases the speed of the user interface when submitting Web page content. In AJAX-based applications, there is no need to wait for a long time to refresh the entire page. The part of the page that needs to be updated is changed. If possible, the update is done locally and asynchronous.
J2ee is an architecture used to develop distributed systems. It is mainly used to develop business entities using Java classes. Use JSP to connect to the application server.
This document describes how to use Ajax to develop WEB applications. The system can add, modify, and delete organizations. Allocate personnel to the organization to add, modify, and delete personnel.
Ii. Interface Design
Tree Structure is often used in most software systems. Because the tree structure is well-defined, the relationship between the upper and lower levels is clear, the information is easy to expand and contract, and the interface is also more beautiful, so everyone is keen to use this structure. Organization Management is basic to general software. An organizational unit refers to the organizational structure of a company. The group company can include branch companies, and there are departments below the company. The employee belongs to the company. The system running interface is as follows:

OrgManager.htm is the homepage of organizational unit management. WEB application interface design is very important. How to deploy and organize images can directly reflect a person's design level.

An organizational unit consists of three main parts: tree structure, organizational unit editing, and personnel editing. How to divide them into three parts, the other part is further divided into two parts: the Organization Code above and the Personnel code below. You can divide the page into the following forms:

Tree Structure area 1	Organization coding area 2
	Personnel Management Area 3

Obviously, we implement it through tables. This is a table with two rows and two columns, and the left columns of the first and second rows merge cells. The Code is as follows:

<TABLE border = "1" width = "100%" height = "100%"> <TR> <TD rowspan = "2"> <FONT face = ""> </FONT> </TD> <TD> </TD> </TR> <TR> <TD> </TD> </TR> </TABLE>

Add a DIV to cell 1, because the DIV can be dynamically rolled and other controls can be inserted. The DIV id is "divTree", and the style is set to automatically scroll when overflow occurs. The width and height are both 100% and full. The Code is as follows:

<Div id = "divTree" style = "width: 100%; height: 100%; background-color: # f5f5f5; border: 1px solid Silver; overflow: auto;"> </Div>

We add a DIV to the cell 2) and insert a table into the DIV. Put down the control on the table. This is very simple and I will not elaborate on it.
Add a DIV to cell 3. The id of this DIV is "divContent", and the style is set to automatically scroll when vertical overflow occurs. The width and height are both 100% and full. This DIV is used to load personnel information; insert another table in the DIV. the id of this table is "tbList", which is used to enter and display the work schedule. Meanwhile, some controls such as checkbox, text, and select are inserted in this table. Note: The second column of the table is used for unique personnel numbers and is not displayed. The Code is as follows:

<Div id = "divContent" style = "height: 100%; overflow-y: auto;" width = "100%"> <Table id = "tbList" border = "1" width = "100%"> <Tr seqNo = "1"> <td> <Table border = "1" width = "100%"> <Tr> <Td width = "5%"> <input type = "checkbox" value = "on"> </input> </td> <Td width = "0%" style = "display: none"> <input type = "text" size = "20"> </input> </td> <Td width = "40%"> <input type = "text" size = "20"> </input> </td> & Lt; td width = "25%" & gt; <Select size = "1" name = "D1"> <Option value = "0"> male </option> <Option selected = "true" value = "1"> female </option> </Select> </Td> </Tr> </Table> </Td> </tr> </Table> </Div>

Iii. Front-end page Encoding
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
The Code is as 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] } }