`
happmaoo
  • 浏览: 4309365 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

阅读更多

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

一、 概述

  AJAX是今年初才问世的新技术,是Asynchronous JavaScript and XML的缩写。它是一组开发Web应用程序的技术,它使浏览器可以为用户提供更为自然的浏览体验。每当需要更新时,客户端Web页面的修改是异步的和逐步增加的。

这样,AJAX在提交Web页面内容时大大提高了用户界面的速度。在基于AJAX的应用程序中没有必要长时间等待整个页面的刷新。页面中需要更新的那部分才进行更改,如果可能的话,更新是在本地完成的,并且是异步的。

  J2ee是一种用来开发分布式系统的体系结构。它主要是用Java类开发业务实体。通过JSP来连接应用服务器。

  本文开发一个组织机构管理小系统,通过这个实例来介绍如何用Ajax开发WEB应用程序。本系统具有增加、修改、删除组织机构的功能。同时给机构分配人员,能增加、修改、删除人员。

  二、 界面设计

  树结构是大多软件系统中常采用的结构形式。由于树型结构层次分明、上下级关系清楚、且展开收缩表达信息方便、界面也较美观,所以是大家热衷于用此结构。组织机构管理是一般软件基本具有的。组织机构是指公司的组织结构。集团公司可包括分公子公司,公司下面又有科室。员工归属于所在的公司。系统运行后的界面如下:

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 0.75pt; HEIGHT: 0.75pt" o:button="t" target="_blank" href="http://www.pcdog.comhttp:/www.pcdog.com/ArtImage/20051011/76600-1.jpg" alt="利用AJAX+J2EE开发组织机构管理系统(图一)" type="#_x0000_t75"><imagedata o:href="http://www.pcdog.comhttp:/www.pcdog.com/ArtImage/20051011/76600-1.jpg" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.gif"></imagedata></shape>


  orgManager.htm是组织机构管理的主页面。WEB应用程序界面设计是非常重要的。如何布局、么样组织可直接体现一个人的设计水平。
组织机构主要包括树结构、组织机构编辑、人员编辑等三大块,如何分成三块呢,然而一般树型结构的窗体常先二块,树型结构独占一块,另一块又分成上下二部分,上面是机构编码,下面是人员编码。固可以把页面划分成如下图形式:

树结构区1

组织编码区2

人员管理区3


  显然我们是通过表来实现。这是一个二行二列的表,且第一、二行的左边列合并单元格。代码如下:

TABLE border="1" width="100%" height="100%"
TR
TD rowspan="2"></TD
TD></TD
/TR
TR
TD></TD
/TR
/TABLE


  我们在1区(单元格)上加上一个DIV,因为DIV可以动态地滚动,并且可以插入其它控件。DIVid"divTree",且风格设置为溢出时自动滚动,宽与高都为100%,及满区域。代码如下:

div id="divTree" style="width:100%; height:100%;background-color:#f<chmetcnv w:st="on" unitname="F" sourcevalue="5" hasspace="False" negative="False" numbertype="1" tcsc="0">5f</chmetcnv><chmetcnv w:st="on" unitname="F" sourcevalue="5" hasspace="False" negative="False" numbertype="1" tcsc="0">5f</chmetcnv>5;border :1px solid Silver;overflow:auto;"
/div


  我们在2区(单元格)上也加上一个DIV,在DIV里再插入一个表格。表格上放下控件,这很简单,就不详细说了。

  我们在3区(单元格)上加上一个DIV。此DIVid" divContent ",且风格设置为竖直溢出时自动滚动,宽与高都为100%,及满区域,此DIV用来装载人员信息;DIV里再插入一个表格, tableid" tbList ",是用来输入、显示人员作息,同时在此表中插入一些如checkbox textselect等控件。说明,表的第二列是用来放人员唯一编号的,不显示。代码如下:

div id="divContent" style="height:100%; overflow-y:auto;" width="100%"
table id="tbList" border="1" width="100%"
tr seqNo="1"><td
table border="1" width="100%"
tr
td width="5%"><input type="checkbox" value="on"></input /td
td width="0%" style="display:none" input type="text" size="20"></input></td
td width="40%"><input type="text" size="20"></input></td
td width="25%"
select size="1" name="D1"
option value="0"&#30007;/option
option selected="true" value="1"&#22899;/option
/select
/td
/tr
/table
/td></tr
/table
/div

三、 前端页面的主要编码

  1. 树的实现

  在WEB上实现树结构,同样我们是通过Ajax来实现的。树上可以显示自定义的图标,可以插入、删除、结点。并且结点可任意移动。这里我们不重点讲树的实现技术,我们已经封装好了,你只要按要求去改动就是了。

  1) 键接树型文件

  在<head>与</head>之间键接我们的与树有关的文件, 代码如下:

link rel="STYLESHEET" type="text/css" href="css/dhtmlXTree.css"
script src="js/dhtmlXCommon.js"></script
script src="js/dhtmlXTree.js"></script


  2) 装载方法

  在页面的文档打开时装载自定义方法, preLoadImages方法实现树控件的图标定义,doOnLoad实现树控件的图标定义代码如下:

body onload="preLoadImages();doOnLoad();"


  3) 编写方法

//doOnLoad实现装载并显示树。设置树属性等。
function doOnLoad(){
 OrgTree=new dhtmlXTreeObject(document.getElementById('divTree'),"100%","100%",0);
 //dhtmlXTreeObject是树对象,通过新建对象,指定树显示的DIV可定义树。
 OrgTree.setImagePath("imgs/");//设置树的图片所在位置
 OrgTree.setDragHandler();//设置树结点拖动
 OrgTree.enableDragAndDrop(true) //设置树结点是否可拖动
 OrgTree.setDragHandler(myDragHandler); //设置树结点拖动时所执行的方法
 OrgTree.setOnClickHandler(mySelectHandler); //设置树单击时所执行的方法
 //OrgTree.setXMLAutoLoading("Org.jsp");//装载树结点数据。数据来源如Org.jsp所返回的XML格式的字符串,数据是动态装载,且当展开时才装载。
 OrgTree.loadXML("root.xml?0");//装载树结点数据。数据来源root.xml文件,并且从xml文件的ID号为0处读取数据。
 //OrgTree.loadXML("Org.jsp");//装载树结点数据。数据来源如Org.jsp所返回的XML格式的字符串,并且是一次性全部装载数据。
}
//preLoadImages
方法实现树控件的图标定义
function preLoadImages(){
 var imSrcAr = new Array("line1.gif","line2.gif","line3.gif","line4.gif","minus2.gif","minus3.gif",
  "minus4.gif","plus2.gif","plus3.gif","plus4.gif","book.gif","books_open.gif","books_close.gif",
  "magazine_open.gif","magazine_close.gif","tombs.gif","tombs_mag.gif","book_titel.gif")
 var imAr = new Array(0);
 for(var i=0;iimSrcAr.length;i++){
  imAr[imAr.length] = new Image();
  imAr[imAr.length-1].src = "imgs/"+imSrcAr[i]
 }
}


  2. 组织管理的实现

  组织可以增加、删除、编辑。同时当选择树结点时应该把组织显示出来供编辑,查看。为了实现这些功能,你只要按要求去改动就是了。

  1) 全局变量的定义

  许多地方我们要用到一些公共变量,我们在<script>与</script>之间定义全局变量, 代码如下:

var OrgTree = null; //组织树Dom
var nextSeq = 0;//
人员管理的顺序号(流水号)
var personDom;//
人员Dom
var CurrNodeId;//
当前结点Id


  2) 初始化

  当页面打开时我们要控件好那部分该显示,那部分要隐藏。且对全局变量的赋值等,组织类型装载。在页面的文档打开时装载自定义方法init(), init方法实现初始化。

body onload="init();"


  init方法实现如下:

function init(){
 //定义personDom为一个XMLDOM'对象
 personDom= new ActiveXObject('Microsoft.XMLDOM');
 personDom.async = false;
 //定义stylesheet为一个XMLDOM'对象,且stylesheetpersonDom确定显示风格
 stylesheet = new ActiveXObject('Microsoft.XMLDOM');
 stylesheet.async = false;
 stylesheet.load("addOrgPerson.xsl"); //装载stylesheet的风格定义文件

 //装载组织类型数据
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 xmlhttp.open("POST","Org.jsp?mode=GetOrgType", false);
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlhttp.send();
 retXml=xmlhttp.responseText;
 // alert(retXml);
 //把组织类型插入下拉列表控件中
 var OrgDoc = new ActiveXObject('Microsoft.XMLDOM');
 OrgDoc.async = false;
 OrgDoc.loadXML(retXml);
 var root = OrgDoc.documentElement;
 oNodeList = root.childNodes;
 txtType.options.length =oNodeList.length;
 for (var i=0; ioNodeList.length; i++)
 {
  Item = oNodeList.item(i);
  var OrgTypeId=Item.childNodes(0).text;
  var OrgTypeName=Item.childNodes(1).text;
  txtType.options[i].value=OrgTypeId;
  txtType.options[i].text=OrgTypeName;
  // txtType.options[0].
 }
}


  3) 编写树拖动及选择结点的方法

// myDragHandler实现树结点拖动时重新指定父子关系。
function myDragHandler(idFrom,idTo){
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 xmlhttp.open("POST","Org.jsp?mode=moveOrg&orgId=" + idFrom + "&newparentOrgId=" + idTo, false);
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlhttp.send();
 retXml=xmlhttp.OrgponseText;

 return true;
}
// mySelectHandler
实现选择树结点对系统的控制,同时显示组织信息及该组织下的人员。
function mySelectHandler(id){
 tbOrg.style.display="block";
 divOrgMemo.style.display="none";
 divOrgInfo.style.display="none";

 if(id==1)
 {
  divOrgMemo.style.display="block";
  div1.style.display="none";
  div2.style.display="none";
  div3.style.display="none";
  divContent.style.display="none";
  div5.style.display="none";
 }
 else
 {
  divOrgInfo.style.display="block";
  div1.style.display="block";
  div2.style.display="block";
  div3.style.display="block";
  divContent.style.display="block";
  div5.style.display="block";
 }
 CurrNodeId=id;
 //装载组织信息并显示在编码和名称的文本控件上。
 loadOrg(id);
 //装载某组织下人员信息
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 xmlhttp.open("POST","Org.jsp?mode=GetPerson&orgId=" + id, false);
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlhttp.send();

 retXml=xmlhttp.responseText;
 personDom.loadXML (retXml);
 //给人员信息的每行加上序号
 for(var i=0; ipersonDom.documentElement.childNodes.length; i++){
  personDom.documentElement.childNodes[i].setAttribute("seqNo", nextSeq);
  nextSeq++;
 }
 //人员信息显示在divContent上面
 divContent.innerHTML = personDom.transformNode(stylesheet);
};
//
装载组织信息并显示在编码和名称的文本控件上。
function loadOrg(OrgId){
 if(OrgId == null){
  OrgId = OrgTree.getSelectedItemId();
 }
 if(OrgId == ""){
  tbOrg.style.display = "none";
  return;
 }
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 xmlhttp.open("POST","Org.jsp?mode=loadOrg&OrgId=" + OrgId, false);
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlhttp.send();
 retXml=xmlhttp.responseText;
 var OrgDoc = new ActiveXObject('Microsoft.XMLDOM');
 OrgDoc.async = false;
 OrgDoc.loadXML(retXml);
 if(OrgId != 1){
  txtCode.value = OrgDoc.selectSingleNode("//OrgCode").text;
  txtName.value = OrgDoc.selectSingleNode("//OrgName").text;
 }
 tbOrg.style.display = "block";
}


  4) 建立组织

  组织建立主要是通过调用XMLHTTP对象来实现。我们主要学会如何调用XMLHTTP。组织建立应该在后台实现,把组织信息插入数据库中。这里我们通过JSP来实现。我们的Org.jsp 文件中有个createOrg方法,该方法传递一个父ID

function createOrg(parentOrgId){
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 xmlhttp.open("POST","Org.jsp?mode=createOrg&parentOrgId=" + parentOrgId, false);
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlhttp.send();
 retXml=xmlhttp.responseText;
 var orgId = (new Number(retXml)).toString();
 return orgId;
}


  5) 删除组织

  组织删除同样是调用Org.jsp 文件中的deleteOrg方法来实现,该方法传递所删除的结点ID

function deleteOrg(){
 var OrgId = OrgTree.getSelectedItemId();
 font-size: 9pt; color: #666666; font-family: Tahom

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics