AJAX+J2EE Development Organization Management System (1)

ajax|j2ee| Institutional Management

I. Overview

Ajax is a new technology that came out early this year, and is an 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. The modification of the client Web page is asynchronous and incremental whenever an update is required.

In this way, Ajax greatly improves the user interface speed when submitting Web page content. There is no need to wait for the entire page to refresh in an AJAX-based application for long periods of time. The part of the page that needs to be updated is changed and, if possible, the update is done locally and asynchronously.

Java EE is an architecture used to develop distributed systems. It mainly uses Java classes to develop business entities. Connect the application server through a JSP.

This article develops an organization management small system, through this example to explain how to use Ajax to develop Web applications. The system has the function of adding, modifying and deleting the organization. At the same time to the organization to assign personnel, 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 the tree, the relationship between the superior and the clear, and the expansion of the contraction to express information convenient, the interface is also more beautiful, so we are keen to use this structure. The organization management is the general software basically has. 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 page 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 another piece 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 be inserted into other controls. The DIV's ID is "Divtree" and the style is set to scroll automatically when it overflows, with a width and height of 100%, and a full range. The code is as follows:



We add a div to section 2 (cell) and insert a table in the Div. The control is dropped on the table, which is simple enough to say in detail.

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, not shown. The code is as follows:

male "

Main code of front page

1. The implementation of the tree

To implement the tree structure on the web, we are also implementing it through Ajax. A custom icon can be displayed on the tree to insert, delete, and node. And the nodes can be moved arbitrarily. Here we do not focus on the implementation of tree technology, we have been packaged, you just follow the requirements to change it.

1) key to the tree-type file

In the and key to our tree-related files, the code is as follows:

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 implements the mount and displays the tree. Set tree properties, and so on. function Doonload () { Orgtree=new Dhtmlxtreeobject (document.getElementById (' Divtree '), "100%", "100%", 0); Dhtmlxtreeobject is a tree object that, by creating a new object, specifies the div that the tree displays to define the tree. 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");//Mount tree node data. The data source, such as org.jsp, returns an XML-formatted string that is loaded dynamically and is loaded when expanded. Orgtree.loadxml ("root.xml?0");//Mount tree node data. The data source Root.xml the file, and the data is read from the ID number of the XML file at 0. Orgtree.loadxml ("org.jsp");//Mount tree node data. The data source, such as org.jsp, returns an XML-formatted string and loads the data 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] } }

[1] [2] [3] [4] [5] [6] Next page