利用AJAX+J2EE开发组织机构管理系统(3)

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 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 style="width: 36; height: 21">角色</button>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>

五、 数据接口的实现(见Org.jpg文件)

时间: 2024-08-03 22:24:04

利用AJAX+J2EE开发组织机构管理系统(3)的相关文章

利用AJAX+J2EE开发组织机构管理系统(1)

ajax|j2ee|机构管理 一. 概述 AJAX是今年初才问世的新技术,是Asynchronous JavaScript and XML的缩写.它是一组开发Web应用程序的技术,它使浏览器可以为用户提供更为自然的浏览体验.每当需要更新时,客户端Web页面的修改是异步的和逐步增加的.这样,AJAX在提交Web页面内容时大大提高了用户界面的速度.在基于AJAX的应用程序中没有必要长时间等待整个页面的刷新.页面中需要更新的那部分才进行更改,如果可能的话,更新是在本地完成的,并且是异步的. J2ee是

利用AJAX+J2EE开发组织机构管理系统

ajax|j2ee|机构管理 一. 概述 AJAX是今年初才问世的新技术,是Asynchronous JavaScript and XML的缩写.它是一组开发Web应用程序的技术,它使浏览器可以为用户提供更为自然的浏览体验.每当需要更新时,客户端Web页面的修改是异步的和逐步增加的. 这样,AJAX在提交Web页面内容时大大提高了用户界面的速度.在基于AJAX的应用程序中没有必要长时间等待整个页面的刷新.页面中需要更新的那部分才进行更改,如果可能的话,更新是在本地完成的,并且是异步的. J2ee

利用AJAX+J2EE开发组织机构管理系统(4)

ajax|j2ee|机构管理 Org.JSP文件用来在服务器上运行Java的类与前台web页之间架起一座桥.取到中间件的接口作用. 这里分析部分代码: <%@ page contentType="text/html; charset=GBK" %><%@ page import="java.sql.*" %><%@ page import="javax.naming.*" %><%@ page impor

利用AJAX+J2EE开发组织机构管理系统(2)

ajax|j2ee|机构管理 <body > init方法实现如下: function init(){ //定义personDom为一个XMLDOM'对象 personDom= new ActiveXObject('Microsoft.XMLDOM'); personDom.async = false; //定义stylesheet为一个XMLDOM'对象,且stylesheet为personDom确定显示风格 stylesheet = new ActiveXObject('Microsoft

AJAX+J2EE开发组织机构管理系统(1)

ajax|j2ee|机构管理 一. 概述 AJAX是今年初才问世的新技术,是Asynchronous JavaScript and XML的缩写.它是一组开发Web应用程序的技术,它使浏览器可以为用户提供更为自然的浏览体验.每当需要更新时,客户端Web页面的修改是异步的和逐步增加的. 这样,AJAX在提交Web页面内容时大大提高了用户界面的速度.在基于AJAX的应用程序中没有必要长时间等待整个页面的刷新.页面中需要更新的那部分才进行更改,如果可能的话,更新是在本地完成的,并且是异步的. J2ee

利用ajax.dll进行asp.net ajax开发

Asynchronous JavaScript and XML(AJAX)最近掀起的高潮,要完全归功于Google在Google Suggest和Google Maps中的使用.对ASP.NET而言,AJAX不需要回传就能进行服务器端处理,从而使客户机(浏览器)具有丰富的服务器端能力.换句话说,它为异步指派和处理请求与服务器响应提供了一个框架. AJAX利用了一些不是很新颖的已有技术,但是对这些技术(加到一起就是AJAX)的爱好最近突然升温. 请尝试Michael Schwarz的AJAX .N

使用AJAX技术开发新一代Web应用程序

ajax|web|程序 一.引言 一个理想的用户接口对用户最好是不可见的-仅在用户需要时提供选择,否则并不干涉他们的工作而让其专注于手头的工作.然而,这并不是一件容易的事情.如今,我们变得习惯于通过并不十分令人满意的UI进行日常工作,直到有人向我们展示一种更好的方法. 现在,我们才逐渐认识到我们当前的方法在做这些事情时是多么吃力. 由于用于显示文档内容的基本web浏览器技术又被推进一步进而超出以前它们所能及的范围,所以,如今的互联网正在经历着这样的实现. Ajax(异步JavaScript+XM

使用AJAX技术开发新一代Web应用程序(1)

ajax|web|程序 一.引言 一个理想的用户接口对用户最好是不可见的-仅在用户需要时提供选择,否则并不干涉他们的工作而让其专注于手头的工作.然而,这并不是一件容易的事情.如今,我们变得习惯于通过并不十分令人满意的UI进行日常工作,直到有人向我们展示一种更好的方法.现在,我们才逐渐认识到我们当前的方法在做这些事情时是多么吃力. 由于用于显示文档内容的基本web浏览器技术又被推进一步进而超出以前它们所能及的范围,所以,如今的互联网正在经历着这样的实现. Ajax(异步JavaScript+XML

基于ASP.NET AJAX技术开发在线RSS阅读器(上篇)

[注]本文测试环境:Windows XP专业版+Visual Studio 2005+整套ASP.NET AJAX框架+ASP.NET RSS Toolkit+SQL Server 2005. 一.RSS技术简介 RSS是一种描述和同步网站内容的XML格式,已经成为越来越流行的网站内容订阅技术.通过这种技术,网站可以极大地提高广大网站用户和网站数据之间的数据交互. RSS阅读软件可以分为桌面离线式和在线式两大类.有了这种工具,用户只需要添加初始其所关注的RSS网址,以后系统会自动更新相关内容,网