乖，别哭的薄壳
～一份耕耘，一份收获~
posts - 23,comments - 260,trackbacks - 0
xml+xsl+javascript取值及修改数据
前几天公司要用xml快速方便的存取属性N多的数据,跟sinoly合作研究了一下.做了一个小例子.

1.example.xml--主要数据文件

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

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

<projects id="1">
    <project title="一级标题1" index="1">
        <items isTrunk="false" title="二级标题1.1" id="items_1">
            <result type="2">1</result>
            <officer><![CDATA[]]></officer>
            <classified>1</classified>
            <eligibility>0</eligibility>
            <remark></remark>
        </items>
        <items isTrunk="false" title="二级标题1.2" id="items_2">
            <result type="2">3</result>
            <officer><![CDATA[]]></officer>
            <classified>1</classified>
            <eligibility>0</eligibility>
        </items>
    </project>
    <project title="一级标题2" index="2">
        <items isTrunk="false" title="二级标题2.1" id="items_3">
            <result type="3">3</result>
            <officer><![CDATA[]]></officer>
            <classified>1</classified>
            <eligibility>0</eligibility>
        </items>
        <items isTrunk="true" title="二级标题2.2">
            <item title="三级标题2.2.1" id="item_1">
                <result type="1">2</result>
                <officer><![CDATA[居然是乱码]]></officer>
                <classified>1</classified>
                <eligibility>0</eligibility>
            </item>
            <item title="三级标题2.2.2" id="item_2">
                <result type="1">3</result>
                <officer><![CDATA[<><>]]></officer>
                <classified>1</classified>
                <eligibility>0</eligibility>
            </item>
        </items>            
        <items isTrunk="true" title="二级标题2.3">
            <item title="三级标题2.3.1" id="item_3">
                <result type="2">1</result>
                <officer><![CDATA[]]></officer>
                <classified>1</classified>
                <eligibility>0</eligibility>
            </item>
            <item title="三级标题2.3.2" id="item_4">
                <result type="2">1</result>
                <officer><![CDATA[]]></officer>
                <classified>1</classified>
                <eligibility>0</eligibility>
            </item>
        </items>            
    </project>
    <project title="一级标题3" index="3">
        <items isTrunk="false" title="二级标题3.1" id="items_4">
            <result type="4" units="元">25345</result>
            <officer><![CDATA[sinoly]]></officer>
            <classified>1</classified>
            <eligibility>0</eligibility>
        </items>
        <items isTrunk="false" title="二级标题3.2" id="items_5">
            <result type="4" units="元">9865764</result>
            <officer><![CDATA[]]></officer>
            <classified>1</classified>
            <eligibility>0</eligibility>
        </items>
        <items isTrunk="false" title="二级标题3.3" id="items_6">
            <result type="2">0</result>
            <officer><![CDATA[]]></officer>
            <classified>1</classified>
            <eligibility>0</eligibility>
        </items>
        <items isTrunk="true" title="二级标题3.4">
            <item title="三级标题3.4.1" id="item_5">
                <result type="1">0</result>
                <officer><![CDATA[]]></officer>
                <classified>1</classified>
                <eligibility>0</eligibility>
            </item>
            <item title="三级标题3.4.2" id="item_6">
                <result type="1">0</result>
                <officer><![CDATA[]]></officer>
                <classified>1</classified>
                <eligibility>0</eligibility>
            </item>
            <item title="三级标题3.4.3" id="item_7">
                <result type="1">0</result>
                <officer><![CDATA[]]></officer>
                <classified>1</classified>
                <eligibility>0</eligibility>
            </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>
            <button type="submit" class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" title="提交"> 下一步</button>
        </h6>
    </xsl:template>
    
    <!--主题模板-->
    <xsl:template match="project">
        <TABLE border="0" cellspacing="0" cellpadding="0" class="table">
            <tr>
                <td colspan="5" align="center" class="tright">
                    <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>
            <td colspan="2" class="tright">
                <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 colspan="3" class="tright" style="color:blue;font-weight:bolder">
                        注意以下几点
                    </td>
                    <xsl:apply-templates select="item"/>
                </xsl:otherwise>
            </xsl:choose>
        </tr>
    </xsl:template>
    
        <!--二级题干模板-->
    <xsl:template match="item">

      <tr>
        <td class="tright" style="padding-left:20px" colspan="2">
            <h4><xsl:number value="position()" format="(a)."/><xsl:value-of select="@title"/></h4>
        </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'">
                            <td width="15%">
                            <xsl:element name="select">
                                <xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>
                                <!--<select name="select">-->
                                    <xsl:choose>
                                        <xsl:when test=".='0'">
                                            <option value="0" selected="selected">请选择　</option>
                                            <option value="1">符合</option>
                                            <option value="2">基本符合</option>
                                            <option value="3">不符合</option>
                                        </xsl:when>
                                        <xsl:when test=".='1'">
                                            <option value="0">请选择　</option>
                                            <option value="1" selected="selected">符合</option>
                                            <option value="2">基本符合</option>
                                            <option value="3">不符合</option>
                                        </xsl:when>
                                        <xsl:when test=".='2'">
                                            <option value="0">请选择　</option>
                                            <option value="1">符合</option>
                                            <option value="2" selected="selected">基本符合</option>
                                            <option value="3">不符合</option>
                                        </xsl:when>
                                        <xsl:when test=".='3'">
                                            <option value="0">请选择　</option>
                                            <option value="1">符合</option>
                                            <option value="2">基本符合</option>
                                            <option value="3" selected="selected">不符合</option>
                                        </xsl:when>                                        
                                    </xsl:choose>
                                    <!--</select>-->
                                </xsl:element>
                            </td>
                        </xsl:when>
                        <xsl:when test="@type = '2'">
                            <td width="15%">
                                <xsl:element name="select">
                                <xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>
                                    <xsl:choose>
                                        <xsl:when test=".='0'">
                                            <option value="0" selected="selected">请选择　</option>
                                            <option value="1">是</option>
                                            <option value="2">否</option>
                                        </xsl:when>
                                        <xsl:when test=".='1'">
                                            <option value="0">请选择　</option>
                                            <option value="1" selected="selected">是</option>
                                            <option value="2">否</option>
                                        </xsl:when>
                                        <xsl:when test=".='3'">
                                            <option value="0">请选择　</option>
                                            <option value="1">是</option>
                                            <option value="2" selected="selected">否</option>
                                        </xsl:when>                        
                                    </xsl:choose>
                                </xsl:element>
                            </td>
                        </xsl:when>
                        <xsl:when test="@type = '3'">
                            <td width="15%">
                                <xsl:element name="select">
                                <xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>
                                    <xsl:choose>
                                        <xsl:when test=".='0'">
                                            <option value="0" selected="selected">请选择　</option>
                                            <option value="1">有</option>
                                            <option value="2">无</option>
                                        </xsl:when>
                                        <xsl:when test=".='1'">
                                            <option value="0">请选择　</option>
                                            <option value="1" selected="selected">有</option>
                                            <option value="2">无</option>
                                        </xsl:when>
                                        <xsl:when test=".='3'">
                                            <option value="0">请选择　</option>
                                            <option value="1">有</option>
                                            <option value="2" selected="selected">无</option>
                                        </xsl:when>                        
                                    </xsl:choose>
                                </xsl:element>
                            </td>
                        </xsl:when>

                        <xsl:otherwise>
                            <td width="15%">
                            <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">
        <td width="9%" class="tright">责任人</td>
        <td width="11%">
        <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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
</head>
<link rel="Stylesheet" type="text/css" href="focusform.css"/>
<script language="javascript" src="form.js"></script>
<script type="text/javascript" src="detect.js"></script>
<script type="text/javascript" src="xmldom.js"></script>
<script type="text/javascript">
//载入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>
<form name="form1" action="test.jsp" method="post" onsubmit="return btnSub();">
<script type="text/javascript">
    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 小祝 阅读(4571) 评论(7)  编辑  收藏 所属分类: Javascript

FeedBack:
# re: xml+xsl+javascript取值及修改数据
2007-07-08 11:14 | sinoly
汗一个。呵呵。。。
是不是可以找你要点费用？貌似有部分我的代码哦：）
ps：北漂对你们是一种历练，有需要的时候给我电话就好。我想，北京怎么我还能活动一下的  回复  更多评论
  
# re: xml+xsl+javascript取值及修改数据
2007-07-08 15:43 | 小祝
@sinoly
呵呵，我又不是拿来商业目的，开源的。。。给你留个名好了，呵呵~
先谢谢了，我还是先找找看了，不行再找你帮忙，呵呵~  回复  更多评论
  
# re: xml+xsl+javascript取值及修改数据
2007-07-08 16:40 | 飘摇
看见代码就头疼  回复  更多评论
  
# re: xml+xsl+javascript取值及修改数据
2007-07-10 10:48 | sinoly
@小祝
呵呵，我开个玩笑咯。。。
不过经过这一次的处理，坚定了我以后在项目中使用统一xml处理方式的想法了。以前最为头痛的统计对服务器的负载问题现在转移到了客户端，而服务器仅仅只进行数据规整，感觉应该是处理之道吧  回复  更多评论
  
# re: xml+xsl+javascript取值及修改数据
2009-03-28 16:18 | sdjl

下载不了  回复  更多评论
  
# re: xml+xsl+javascript取值及修改数据
2009-03-31 08:58 | 小祝
@sdjl
不好意思，blogjava把这个文件弄丢失了，我这也没备份了，
detect.js 和 xmldom.js 在我的博文 《javascript学习笔记(六)－－资料》里有，另外两个其实无关紧要，有没有都无所谓，只是样子难看了点~~~  回复  更多评论
  
# re: xml+xsl+javascript取值及修改数据
2010-05-14 12:54 | 在线建模
恩，先看看能不能用，呵呵  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 小祝 Powered By博客园 模板提供：沪江博客