乖,别哭的薄壳
~一份耕耘,一份收获~
posts - 23,comments - 260,trackbacks - 0
前几天公司要用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 小祝 阅读(4562) 评论(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 | 在线建模
恩,先看看能不能用,呵呵  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: