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 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> //定义一个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 οnclick="openPersonRolePage(this)" style="width: 36; height: 21">角色</button> </td> </tr> </table> </xsl:template> </xsl:stylesheet> |
五、 数据接口的实现(见Org.jpg文件)