ajax|j2ee| Institutional Management
I. Overview
Ajax is the new technology that came out early this year and is the abbreviation for asynchronous JavaScript and XML . It is a set of technologies for developing Web applications that enable browsers to provide users with a more natural browsing experience . Changes to the client Web page are asynchronous and incremental whenever an update is required . In this way, Ajax greatly improves the user interface when submitting Web page content . There is no need to wait for the entire page to refresh in an AJAX-based application for a long time . The part of the page that needs to be updated is changed and, if possible, the update is done locally and is asynchronous .
Java EE is an architecture for developing distributed systems . It primarily uses Java classes to develop business entities . Connecting to applications via JSP Server .
This article develops an organization management small system, through this example to introduce how to use Ajax to develop the Web application . The system has the function of adding, modifying and deleting the organization. . At the same time assign personnel to the organization, can add, modify, delete personnel .
second, interface design
Tree structure is a kind of structural form commonly used in most software systems. . Because of the hierarchical structure of tree type, clear relationship between superior and subordinate, and easy to express information, the interface is also more beautiful, so we are keen to use this structure . The management of organization is the basic of general software . Organization refers to the organization structure of a company . The group may include the subsidiary company and the department below. . Employees belong to the company in which they are located . The interface of the system after running is as follows:
Orgmanager.htm is the main body of organization management . Web application interface design is very important . How to Layout, sample organization can directly reflect a person's design level .
Organizations mainly include tree structure, organization editor, staff editors, such as three large chunks, how to divide into three, but the general tree structure of the form often first two, tree-type structure of the exclusive piece, and the other divided into the upper and lower two parts, above is the mechanism code, the following is the personnel code . Solid can divide the page into the following diagram form:
| Tree structure Area 1 |
Organization Code Area 2 |
| Personnel Admin District 3 |
Obviously we do it through a table. . This is a table with two rows and two columns, and the left column of row first to second merges the cells . The code is as follows:
TABLE border= "1" width= "100%" height= "100%"
|
| |
|
| |
We add a div to area 1 (cell) because the DIV can scroll dynamically and can insert other controls . Div's ID is "Divtree" and the style is set to automatically scroll when overflow, width and height are 100%, and full area . The code is as follows:
We add a div to section 2 (cell) and insert a table in the DIV . Drop the control on the table, it's simple, it's not detailed. .
We add a div to area 3 (cell) . The ID of this div is "divcontent", and style set to vertical overflow automatically scrolling, wide and high are 100%, and full area, this div used to load personnel information; In the DIV, insert a table, the ID of this table is "Tblist", is used to input, show people rest and relax, Also insert some controls such as checkbox, text, select, and so on in this table . Description, the second column of the table is used to put the person's unique number and does not show . The code is as follows:
main code of front page
1. The implementation of the tree
To implement the tree structure on the web, we also implement it through Ajax . The tree can display a custom icon, you can insert, Delete, node . And the nodes can move arbitrarily. . Here we do not focus on the implementation of the tree technology, we have been packaged, you just follow the requirements to change it .
1) key to the tree-type file
In the
2) Loading method
Loading a custom method when the document on the page is opened, preloadimages the method implements the icon definition for the tree control, doonload the icon definition code for the implementation tree control as follows:
3) Writing method
Doonload implementation mount and display tree. Setting tree properties, and so on.
function Doonload () {
Orgtree=new Dhtmlxtreeobject (document.getElementById (' Divtree '), "100%", "100%", 0);
Dhtmlxtreeobject is a tree object that specifies the div-definable tree that the tree displays by creating a new object.
Orgtree.setimagepath ("imgs/");/set the location of the picture of the tree
Orgtree.setdraghandler ()//Set tree node drag
Orgtree.enabledraganddrop (TRUE)//Set whether the tree node can be dragged
Orgtree.setdraghandler (Mydraghandler); To set the method that is executed when a tree node is dragged
Orgtree.setonclickhandler (Myselecthandler); Sets the method that is executed when the tree clicks
Orgtree.setxmlautoloading ("org.jsp");//Load Tree node data. A data source, such as the XML-formatted string returned by org.jsp, which is dynamically loaded and loaded when expanded.
Orgtree.loadxml ("root.xml?0");//Load Tree node data. Data source Root.xml file, and read data from ID number 0 of XML file.
Orgtree.loadxml ("org.jsp");//Load Tree node data. The data source is the XML format string returned by org.jsp, and the data is loaded all at once.
}
Preloadimages method implements the icon definition of a tree control
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. The realization of organizational management
Organizations can add, delete, edit . Also, when selecting a tree node, the organization should be displayed for editing, viewing . In order to achieve these functions, you just need to change as required. .
1 The definition of global variables
In many places we want to use some common variables, we define global variables between <script> and </script>, the code is as follows:
var orgtree = null; Organization Tree DOM
var nextseq = sequential number of 0;//personnel management (serial number)
var persondom;//staff Dom
var currnodeid;//current Node ID |
2) Initialization
When the page is open we want to control the good part of the show, that part to hide . and assigning values to global variables, the organization type mounts . Load Custom Method init () when the page's document is opened, Init method implementation initialization .
