ajax|j2ee|机构管理
| 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) 删除人员
人员删除同样是调用Org.jsp 文件中的deletePerson方法来实现，该方法传递所删除的人员ID。如何确定人员ID是通过读取隐藏的ID，并扫描整个表，看那些被选中。这里我们要注意是提供多项选择的。
| function deletePerson(){ for(var i=0; i＜tbList.rows.length; 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) 编辑人员
人员修改我们要判定哪些行被修改了。刚增加但没保存的行应该是新增而不是修改的。
| 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 ); } } } |
四、 XML与XSL文件设计
XML是种可扩展的标记语言，它具有开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。XSLT的目的是将信息内容与 Web 显示分离，HTML 通过按抽象概念（如段落、重点和编号列表）定义显示来实现设备独立性。XSLT用来具体显示控件，设置控件风格。
Ajax主要使用XML和XSLT进行数据交换与处理。
1. 树信息的XML文件(见root.xml文件)
XML是标记语言，元素必须成对出现。树结构中以tree为根结点，以item为结点体，属性text指出结点所显示的文本，id指出唯一的所标识号。
| ＜?xml version='1.0' encoding='gb2312'?＞ ＜tree id="0"＞ ＜item child="1" text="组织" id="1" ＞ ＜/item＞ ＜/tree＞ |
这文件并不是必要的，只是为了系统能独立运行才加的。事实如果连接了后台数据是不需要的。只要吧OrgTree.loadXML("root.xml?0")改为OrgTree.loadXML("Org.jsp")就可以了。
2. 人员信息XML文件(见peorson.xml文件)
说明![CDATA[]]可在任何显示任何格式的文本，文本中可插入其它任何字符。这文件也不是必要的。
3. 人员信息展现的xsl文件（见addOrgPerson.xsl文件）
xsl文件同样是XML格式文件。所以一律遵守XML标准。下面对主要的行讲解：
| ＜?xml version="1.0" encoding="gb2312"?＞ //这是定义xml文件的首行。用来指明版本及字符集 ＜xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript"＞ //这里定义了stylesheet 元素。并指出其国际命名的组织及语言。 ＜xsl:template match="/"＞ ＜xsl:apply-templates select="peorsones"/＞ ＜/xsl:template＞ //上面是匹配的规则。"/"表示从根结开始去匹配。匹配到下面的peorsones标记。这是正则表达式有关的学问。我们只要理解就可以。 ＜xsl:template match="peorsones"＞ //当匹配上peorsones时所要做的事情。 ＜table id="tbList" border="1" width="100%"＞ //定义一个id为"tbList的表格。此表格是显示在WEB上的 ＜xsl:for-each select="peorsone"＞ //循环匹配peorsone ＜tr＞ //定义tbList表格的一行，并在行上增加一个叫seqNo的属性名，值为匹配到的seqNo（序号） ＜xsl:attribute name="seqNo"＞＜xsl:value-of select="seqNo"/＞＜/xsl:attribute＞ ＜td＞ //定义行上的一列，列又去匹配 ＜xsl:apply-templates select="."/＞ ＜/td＞ ＜/tr＞ ＜/xsl:for-each＞ ＜/table＞ ＜/xsl:template＞ ＜xsl:template match="peorsone"＞ ＜table border="1" width="100%"＞ ＜tr＞ //定义宽为5%的一列，在该列上插入一个checkbox控件 ＜td width="5%"＞ ＜input type="checkbox" value="on" size="10"＞＜/input＞ ＜/td＞ //定义一个不显示的列，在该列上插入一个text控件，text的值为匹配到的personId（人员Id） ＜td 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＞ //定义一个width为28%的列，在该列上插入一个下拉列表select 控件，select的值如果匹配到为0时则为"男"，1时则为"女" ＜td width="28%"＞ ＜select size="1"＞ ＜option value="0"＞ ＜xsl:if test=".[sex=0]"＞ ＜xsl:attribute name="selected"＞true＜/xsl:attribute＞ ＜/xsl:if＞ 男 ＜/option＞ ＜option value="1"＞ ＜xsl:if test=".[sex=1]"＞ ＜xsl:attribute name="selected"＞true＜/xsl:attribute＞ ＜/xsl:if＞ 女＜/option＞ ＜/select＞ ＜/td＞ //定义一列，在该列上插入一个button控件，onclick 事件为自定义的方法，该方法传递当前单击的按纽 ＜td width="*"＞ ＜button 36; height: 21"＞角色＜/button＞ ＜/td＞ ＜/tr＞ ＜/table＞ ＜/xsl:template＞ ＜/xsl:stylesheet＞ |
五、 数据接口的实现（见Org.jpg文件）
