DIV CSS 佈局教程網

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 onclick="openPersonRolePage(this)" style="width: 36; height: 21"＞角色＜/button＞
＜/td＞
＜/tr＞
＜/table＞
＜/xsl:template＞
＜/xsl:stylesheet＞
五、 數據接口的實現（見Org.jpg文件）