Use Ajax + J2EE to develop organizational unit 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 applications for development.ProgramTechnology, which allows the browser 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.CodeAs follows:

<Table border = "1" width = "100%" Height = "100%">
<Tr>
<TD rowspan = "2"> <font face = ""> </font> </TD>
<TD> </TD>
</Tr>
<Tr>
<TD> </TD>
</Tr>
</Table>

We add a div to area 1 (cell) 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 on 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.

We add a div to area 3 (cell. 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" >&# 30007; </option>
<Option selected = "true" value = "1" >&# 22899; </option>
</SELECT>
</TD>
</Tr>
</Table>
</TD> </tr>
</Table>
</Div>

7 pages in total. 1 2 3 4 5 6 7 8: