首頁新隨筆新文章聯系聚合

posts - 23,comments - 260,trackbacks - 0

<

2009年3月

>

日

一

二

三

四

五

六

22

23

24

25

26

27

28

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

常用鏈接

留言簿(5)

隨筆分類

隨筆檔案

好友的BLOG

crespo
同學，朋友，同事。。。匪夷所思
愛友
愛友的博客
神行梅
shenxingmei是個啥意思呢？
章章
!@#$%^&*()_+|

搜索

積分與排名

積分 - 67840
排名 - 800

閱讀排行榜

評論排行榜

xml+xsl+javascript取值及修改數據

前幾天公司要用xml快速方便的存取屬性N多的數據,跟sinoly合作研究了一下.做了一個小例子.

1.example.xml--主要數據文件

<?xml version="1.0" encoding="UTF-8"?>

<?xml:stylesheet type="text/xsl" href="example.xsl"?>

</items>

</items>

</project>

</items>

</item>

</item>

</items>

</item>

</item>

</items>

</project>

</items>

</items>

</items>

</item>

</item>

</item>

</items>

</project>

</projects>

2.example.xsl--樣式文件,很方便的取到xml數據

<?xml version="1.0" encoding="gb2312"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"/>

<xsl:template match="/">

<xsl:apply-templates select="projects/project"/>

<h6>

</h6>

</xsl:template>

<xsl:template match="project">

<tr>

<h2>

<xsl:number value="position()" format="一、"/><xsl:value-of select="@title"/>

</h2>

</td>

</tr>

<xsl:apply-templates select="items"/>

</TABLE>

<BR/>

</xsl:template>

<xsl:template match="items">

<tr>

<xsl:number value="position()" format="1."/><xsl:value-of select="@title"/>

</td>

<xsl:choose>

<xsl:when test="@isTrunk[.='false']">

<xsl:apply-templates select="result"/>

<xsl:apply-templates select="officer"/>

</xsl:when>

<xsl:otherwise>

注意以下幾點

</td>

<xsl:apply-templates select="item"/>

</xsl:otherwise>

</xsl:choose>

</tr>

</xsl:template>

<xsl:template match="item">

<tr>

</td>

<xsl:apply-templates select="result"/>

<xsl:apply-templates select="officer"/>

</tr>

</xsl:template>

<xsl:template match="result">

<xsl:choose>

<xsl:when test="@type = '1'">

<xsl:element name="select">

<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>

<xsl:choose>

<xsl:when test=".='0'">

</xsl:when>

<xsl:when test=".='1'">

</xsl:when>

<xsl:when test=".='2'">

</xsl:when>

<xsl:when test=".='3'">

</xsl:when>

</xsl:choose>

</xsl:element>

</td>

</xsl:when>

<xsl:when test="@type = '2'">

<xsl:element name="select">

<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>

<xsl:choose>

<xsl:when test=".='0'">

</xsl:when>

<xsl:when test=".='1'">

</xsl:when>

<xsl:when test=".='3'">

</xsl:when>

</xsl:choose>

</xsl:element>

</td>

</xsl:when>

<xsl:when test="@type = '3'">

<xsl:element name="select">

<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>

<xsl:choose>

<xsl:when test=".='0'">

</xsl:when>

<xsl:when test=".='1'">

</xsl:when>

<xsl:when test=".='3'">

</xsl:when>

</xsl:choose>

</xsl:element>

</td>

</xsl:when>

<xsl:otherwise>

<xsl:element name="textarea">

<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute><xsl:value-of select="."/>

</xsl:element>

<xsl:value-of select="@units"/>

</td>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template match="officer">

<xsl:element name="textarea">

<xsl:attribute name="name">of_<xsl:value-of select="../@id"/></xsl:attribute>

<xsl:value-of select="."/>

</xsl:element>

</td>

</xsl:template>

</xsl:stylesheet>

3.index.html--用javascript導入數據并能修改xml里的數據.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

//載入xml與xsl文件

var oxml = new XmlDom();

var oxsl = new XmlDom();

oxml.async = false;//同步載入

oxsl.async = false;

oxml.load("example.xml");

oxsl.load("example.xsl");

if (oxml.parseError != 0) {

var oError = oxml.parseError;

alert("An error occurred:\nError Code: "

+ oError.errorCode + "\n"

+ "Line: " + oError.line + "\n"

+ "Line Pos: " + oError.linepos + "\n"

+ "Reason: " + oError.reason);

}

if (oxsl.parseError != 0) {

var oError = oxsl.parseError;

alert("An error occurred:\nError Code: "

+ oError.errorCode + "\n"

+ "Line: " + oError.line + "\n"

+ "Line Pos: " + oError.linepos + "\n"

+ "Reason: " + oError.reason);

}

var sResult = oxml.transformNode(oxsl);

//alert(sResult);

//一些操作

function btnSub(){

var fes = document.forms[0].elements;

for(var i = 0;i<fes.length;i++){

var name = fes[i].name;

if(name.indexOf('re_')!=-1){

var xmlid=name.substring(3,name.length);

var obj;// = oxml.getElementById("items_1");//xml的dom里沒有這個方法?

var oItems1 = oxml.getElementsByTagName("items");//也可以用xpath實現。

var oItems2 = oxml.getElementsByTagName("item");

for(var j=0;j<oItems1.length;j++){

if(oItems1[j].getAttribute('id')==xmlid){

obj = oItems1[j];

break;

}

for(var j=0;j<oItems2.length;j++){

if(oItems2[j].getAttribute('id')==xmlid){

obj = oItems2[j];

break;

}

if(obj){

obj.childNodes[0].text = fes[i].value;

}else{

alert("在xml中未找到id為"+xmlid+"的items或item");

}

if(name.indexOf('of_')!=-1){

var xmlid=name.substring(3,name.length);

var oItems1 = oxml.getElementsByTagName("items");

var oItems2 = oxml.getElementsByTagName("item");

for(var j=0;j<oItems1.length;j++){

if(oItems1[j].getAttribute('id')==xmlid){

obj = oItems1[j];

break;

}

for(var j=0;j<oItems2.length;j++){

if(oItems2[j].getAttribute('id')==xmlid){

obj = oItems2[j];

break;

}

if(obj){

obj.childNodes[1].text = fes[i].value;

}else{

alert("在xml中未找到id為"+xmlid+"的items或item");

}

alert(oxml.xml);

//alert(oxml.childNodes[2].xml);

return false;

}

</script>

</head>

<body>

document.write(sResult);

</script>

</form>

</body>

</html>

需要用到的輔助文件
4.focusform.css--樣式文件
5.form.js文本框的效果
6.detect.js--瀏覽器及操作系統識別(取自javascript高級程序設計)
7.xmldom.js--不同瀏覽器xml操作統一(取自javascript高級程序設計)

下載地址

posted on 2007-07-07 00:12 小祝閱讀(4590) 評論(7) 編輯收藏所屬分類: Javascript

FeedBack: