• 欢迎访问搞代码网站，推荐使用最新版火狐浏览器和Chrome浏览器访问本网站！
  • 如果您觉得本站非常有看点，那么赶紧使用Ctrl+D 收藏搞代码吧
> 前端 > jquery > 利用AJAX+J2EE开发组织机构管理系统(3)_jquery

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

jquery 搞代码 7年前 (2018-06-12) 177次浏览 已收录 0个评论

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文件）

欢迎大家阅读《利用AJAX+J2EE开发组织机构管理系统(3)…_jquery》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：利用AJAX+J2EE开发组织机构管理系统(3)_jquery

喜欢 (0)赏
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址