Using AJAX+J2EE to develop organizational management systems (3)

ajax|j2ee| Institutional Management

function Addperson () { var seqno = nextseq; Nextseq ++; var peorsonnode = Persondom.createnode ("1", "Peorsone", ""); Peorsonnode.setattribute ("IsNew", "Y"); Peorsonnode.setattribute ("Isdelete", "N"); Peorsonnode.setattribute ("Seqno", seqno); PersonDom.documentElement.appendChild (Peorsonnode); var personid= persondom.createnode ("1", "PersonId", ""); Peorsonnode.appendchild (PersonId); var personcode= persondom.createnode ("1", "Personcode", ""); Peorsonnode.appendchild (Personcode); var personname= persondom.createnode ("1", "PersonName", ""); Peorsonnode.appendchild (personname); var sex= persondom.createnode ("1", "Sex", ""); Peorsonnode.appendchild (SEX); var tr = tblist.insertrow (tbList.rows.length); Tr.setattribute ("Seqno", seqno); var td = Tr.insertcell (0); td.innerhtml = Peorsonnode.transformnode (stylesheet); }

2) Delete the person

The deletion of a person is also done by calling the Deleteperson method in the org.jsp file, which passes the person ID that was deleted . How to determine the person ID is by reading the hidden ID and scanning the entire table to see those selected . Here we should pay attention to provide a number of options .

function Deleteperson () { for (var i=0; i var row=tblist.rows[i].cells[0].children[0].rows[0]; if (row.cells[0].children[0].checked) { var Personid=row.cells[1].children[0].value; if (personid>0) { var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); Xmlhttp.open ("POST", "org.jsp?mode=deleteperson&personid=" + PersonId, false); Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); Xmlhttp.send (); } Tblist.deleterow (i); i--; } } }

3) Editorial Staff

Staff modification we have to determine which lines have been modified . Rows that have just been added but not saved should be new instead of modified .

function Save () { if (modifyorg () = = "N") { Return } for (var i=0; i<tblist.rows.length; i++) { var row=tblist.rows[i].cells[0].children[0].rows[0]; var Personid=row.cells[1].children[0].value; var seqno = Tblist.rows[i].getattribute ("seqno"); var staffnode = Persondom.selectsinglenode ("//peorsone[@seqNo = '" + seqno + "']"); var Personcode=row.cells[2].children[0].value; var Personname=row.cells[3].children[0].value; var Sex=row.cells[4].children[0].value; alert (Staffn;ode); if (Staffnode.getattribute ("isnew") = = "Y") { Createperson (Currnodeid,personcode,personname,sex); } Else { var strxml = "<?xml version= ' 1.0 ' encoding= ' gb2312 '" > "+ "<data>" + "<personCode>! [cdata[+ personcode+ "]]> </personCode>" + "<personName>! [cdata[+ personname + "]]> </personName>" + "<sex>! [cdata[+ sex+ "]]> </sex>" + "<personId>! [cdata[+ personid+ "]]> </personId>" + "</data>"; alert (strxml); var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); Xmlhttp.open ("POST", "Org.jsp?mode=modifyperson", false); Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); Xmlhttp.send (strxml); } } }

Iv. XML and XSL file design

XML is an Extensible markup language that has an open, extensible, self-describing language structure that has become the standard for data and document transmission on the Web . The purpose of XSLT is to separate information content from Web display, and HTML to achieve device independence by defining the display by abstract concepts such as paragraph, focus, and numbered lists . XSLT is used to display controls and to set the control style .

Ajax mainly uses XML and XSLT for data exchange and processing .

1. xml file for tree information (see Root.xml file)

XML is the markup language, and elements must appear in pairs . tree is the root node, the item is the node body, the attribute text indicates the text displayed by the node, and the ID indicates the unique identification number .

>

This file is not necessary, only added for the system to operate independently. . Truth is, it's not necessary to connect background data. . Just change the Orgtree.loadxml ("root.xml?0") to Orgtree.loadxml ("org.jsp"). .

2. Personnel information XML file (see Peorson.xml file)

Description! [cdata[]] can insert any other character in any text that is displayed in any format . This document is not necessary. .

3. xsl file for Personnel information presentation (see Addorgperson.xsl file)

XSL files are also XML format files . So comply with XML standards . The main lines are explained below:

<?xml version= "1.0" encoding= "gb2312"? This is the first line of the definition XML file. Used to indicate the version and character set <xsl:stylesheet xmlns:xsl= "http://www.w3.org/TR/WD-xsl" language= "JavaScript" This defines the stylesheet element. and the organization and language of its international designation. <xsl:template match= "/" > <xsl:apply-templates select= "Peorsones"/> </xsl:template> There's a matching rule.. "/" indicates starting from root knot to match. Match to the peorsones tag below. This is the knowledge of regular expressions. We just have to understand.. <xsl:template match= "Peorsones" When it comes to matching the peorsones.. <table id= "Tblist" border= "1" width= "100%" Define a table with ID "tblist". This table is displayed on the Web <xsl:for-each select= "Peorsone" Loop Match Peorsone <tr> Define a row for the Tblist table and add a property name called Seqno on the line, with a value matching to the seqno (ordinal) <xsl:attribute name= "seqno" ><xsl:value-of select= "@seqNo"/> </xsl:attribute> <td> Defines a column on a row, and the column matches <xsl:apply-templates select= "." /> </td> </tr> </xsl:for-each> </table> </xsl:template> <xsl:template match= "Peorsone" <table border= "1" width= "100%" <tr> Define a column with a width of 5%, insert a CheckBox control over the column <TD width= "5%" > <input type= "checkbox" Value= "on" size= "ten" > </input> </td> Defines a column that does not appear, inserts a text control on the column, and the value of text is matched to the PersonID (person ID) <TD style= "Display:none" <input type= "text" size= "25" <xsl:attribute name= "value" ><xsl:value-of select= "personId"/> </xsl:attribute> </input> </td> <TD width= "30%" > <input type= "text" size= "20" <xsl:attribute name= "value" ><xsl:value-of select= "Personcode"/> </xsl:attribute> </input> </td> <TD width= "40%" > <input type= "text" size= "40" <xsl:attributename= "value" ><xsl:value-of select= "PersonName"/> </xsl:attribute> </input> </td> Defines a column with a width of 28%, where a drop-down list select control is inserted, and the value of select is "male" if it matches to 0, and "female" 1 o'clock <TD width= "28%" > <select size= "1" > <option value= "0" > <xsl:if test= ". [Sex=0] "> <xsl:attribute name= "selected" >true </xsl:attribute> </xsl:if> Man </option> <option value= "1" > <xsl:if test= ". [Sex=1] "> <xsl:attribute name= "selected" >true </xsl:attribute> </xsl:if> Female </option> </select> </td> Defines a column in which a button control is inserted, and the onclick event is a custom method that passes the button currently clicked <TD width= "*" > <button style= "WIDTH:36; Height:21 "> role </button> </td> </tr> </table> </xsl:template> </xsl:stylesheet>

v. Implementation of data Interface(See Org.jpg file)