工大后院

 找回密码
 加入后院

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
查看: 2651|回复: 4

html条件格式: DSO & CSS

[复制链接]
发表于 2007-8-6 15:59 | 显示全部楼层 |阅读模式
想知道在html中用DSO绑定的数据如何根据不同的数值以不同的格式显示出来…
发表于 2007-8-6 22:48 | 显示全部楼层
不知道DSO是什么。

请把题目详细描述。

究竟要多少种格式?
回复

使用道具 举报

发表于 2007-8-6 23:21 | 显示全部楼层
其实百度一下你会解决的
回复

使用道具 举报

 楼主| 发表于 2007-8-7 03:53 | 显示全部楼层
DSO是Data Source(Sourcing?) Object. 先用xml存放数据, 再用html的 "datasrc=#xmlxxxx" 在一个容器中显示数据。 其中一些内容需要根据数值(比如超过某值, 或者等于某特定字符串)的不同用不同的样式显示出来, 比如改变字体颜色。现在用javascript在加载完数据后再一个一个改变, 总会有点别扭(加载过程中是一种样式, 加载完一闪一闪的变了个样)。想知道有没办法在加载前就改变。我试过把html标记写在xml中,结果华丽地出错…
回复

使用道具 举报

发表于 2007-8-7 20:26 | 显示全部楼层
原来是指XML的数据岛。

若要实现根据数值不同以不同格式显示,必须对数值进行判断,应该使用javascript读取。https://www.gdutbbs.com/thread-77939-1-1.html 这里有关于DOM模型方式访问XML文件的例子。

同时发现我的电脑里有一个不错的例子。


  1. <?xml version="1.0" encoding="gb2312"?>
  2. <?xml:stylesheet type="text/xsl" href="achie.xsl"?>
  3. <学生成绩单>
  4.                 <学生成绩>
  5.                 <学号>001</学号>
  6.                 <姓名>庄一飞</姓名>
  7.                 <外语>78</外语>
  8.                 <高等数学>70</高等数学>
  9.                 <大学物理>80</大学物理>
  10.                 <政治>75</政治>
  11.                 <体育>80</体育>
  12.                 <总分>383</总分>
  13.         </学生成绩>
  14.         <学生成绩>
  15.                 <学号>002</学号>
  16.                 <姓名>罗不凡</姓名>
  17.                 <外语>80</外语>
  18.                 <高等数学>75</高等数学>
  19.                 <大学物理>75</大学物理>
  20.                 <政治>80</政治>
  21.                 <体育>70</体育>
  22.                 <总分>380</总分>
  23.         </学生成绩>
  24.         <学生成绩>
  25.                 <学号>003</学号>
  26.                 <姓名>樊兴</姓名>
  27.                 <外语>76</外语>
  28.                 <高等数学>69</高等数学>
  29.                 <大学物理>79</大学物理>
  30.                 <政治>85</政治>
  31.                 <体育>82</体育>
  32.                 <总分>391</总分>
  33.         </学生成绩>
  34.         <学生成绩>
  35.                 <学号>004</学号>
  36.                 <姓名>吴正雨</姓名>
  37.                 <外语>80</外语>
  38.                 <高等数学>80</高等数学>
  39.                 <大学物理>75</大学物理>
  40.                 <政治>70</政治>
  41.                 <体育>70</体育>
  42.                 <总分>375</总分>
  43.         </学生成绩>
  44.         <学生成绩>
  45.                 <学号>005</学号>
  46.                 <姓名>曾先锋</姓名>
  47.                 <外语>70</外语>
  48.                 <高等数学>75</高等数学>
  49.                 <大学物理>80</大学物理>
  50.                 <政治>77</政治>
  51.                 <体育>70</体育>
  52.                 <总分>372</总分>
  53.         </学生成绩>
  54.         <学生成绩>
  55.                 <学号>006</学号>
  56.                 <姓名>金星</姓名>
  57.                 <外语>90</外语>
  58.                 <高等数学>80</高等数学>
  59.                 <大学物理>70</大学物理>
  60.                 <政治>65</政治>
  61.                 <体育>60</体育>
  62.                 <总分>365</总分>
  63.         </学生成绩>
  64.         <学生成绩>
  65.                 <学号>007</学号>
  66.                 <姓名>缚寒</姓名>
  67.                 <外语>78</外语>
  68.                 <高等数学>87</高等数学>
  69.                 <大学物理>67</大学物理>
  70.                 <政治>78</政治>
  71.                 <体育>80</体育>
  72.                 <总分>390</总分>
  73.         </学生成绩>
  74.         <学生成绩>
  75.                 <学号>008</学号>
  76.                 <姓名>柳莺</姓名>
  77.                 <外语>90</外语>
  78.                 <高等数学>60</高等数学>
  79.                 <大学物理>70</大学物理>
  80.                 <政治>80</政治>
  81.                 <体育>75</体育>
  82.                 <总分>375</总分>
  83.         </学生成绩>
  84.         <学生成绩>
  85.                 <学号>009</学号>
  86.                 <姓名>成翼</姓名>
  87.                 <外语>78</外语>
  88.                 <高等数学>75</高等数学>
  89.                 <大学物理>86</大学物理>
  90.                 <政治>89</政治>
  91.                 <体育>70</体育>
  92.                 <总分>398</总分>
  93.         </学生成绩>
  94.         <学生成绩>
  95.                 <学号>010</学号>
  96.                 <姓名>熊一丹</姓名>
  97.                 <外语>90</外语>
  98.                 <高等数学>80</高等数学>
  99.                 <大学物理>60</大学物理>
  100.                 <政治>70</政治>
  101.                 <体育>72</体育>
  102.                 <总分>372</总分>
  103.         </学生成绩>
  104. </学生成绩单>
复制代码



achie.xsl

  1. <?xml version="1.0" encoding="GB2312"?>
  2. <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
  3. <!--主模板:调用成绩模板,设计显示界面和布局,计算平均值-->
  4.   <xsl:template match="/">
  5.     <HTML>
  6.       <HEAD>
  7.       <STYLE>
  8.           BODY {margin:0}
  9.           .bg {font:12pt Verdana; background-color:ffffff; color:BLUE}
  10.           H1 {font:bold 14pt Verdana; width:100%; margin-top:1em}
  11.           .row {font:10pt Verdana; border-bottom:1px solid #CC88CC}
  12.           .header {font:bold 9pt Verdana; cursor:hand; padding:2px; border:2px outset gray}
  13.           .up {background-color:#DDFFDD;}
  14.           .down {background-color:#FFcc99;}
  15.         </STYLE>
  16.       </HEAD>
  17.       
  18.       <SCRIPT><xsl:comment><![CDATA[
  19.         function sort(field)
  20.         {
  21.           sortField.value = field;
  22.           <!-- set cursor to watch here? -->
  23.           listing.innerHTML = source.documentElement.transformNode(stylesheet);
  24.         }
  25.       ]]></xsl:comment></SCRIPT>

  26.       <SCRIPT for="window" event="onload"><xsl:comment><![CDATA[
  27.         stylesheet = document.XSLDocument;
  28.         source = document.XMLDocument;
  29.         sortField = document.XSLDocument.selectSingleNode("//@order-by");
  30.       ]]></xsl:comment></SCRIPT>
  31.       
  32.        <BODY>
  33.         <TABLE width="100%" cellspacing="0">
  34.         <TR>
  35.             <TD class="bg"/>
  36.             <TD class="bg">
  37.               <H1><xsl:value-of select="学生成绩单/标题"/></H1>
  38.                  <xsl:apply-templates select="学生成绩单/公布日期"/>            
  39.             </TD>
  40.           </TR>
  41.         
  42.         <TR>
  43.             <TD class="bg" width="120" valign="top">
  44.               
  45.             </TD>
  46.             <TD class="bg" valign="top">
  47.               <DIV id="listing"><xsl:apply-templates match="学生成绩单"/></DIV>
  48.             </TD>
  49.           </TR>
  50.          
  51.         
  52.         </TABLE>   
  53.       </BODY>
  54.     </HTML>
  55.   </xsl:template>

  56. <!--成绩模板:调用各科成绩模板,控制成绩显示表格,排序-->
  57. <xsl:template match="学生成绩单">
  58.     <TABLE STYLE="background-color:white"  >
  59.       <THEAD>
  60.         <TD width="90"><DIV class="header" onClick="sort('学号')">学号</DIV></TD>
  61.         <TD width="90"><DIV class="header" onClick="sort('姓名')">姓名</DIV></TD>
  62.         <TD width="90"><DIV class="header" onClick="sort('外语')">外语</DIV></TD>
  63.         <TD width="90"><DIV class="header" onClick="sort('高等数学')">高等数学</DIV></TD>
  64.         <TD width="90"><DIV class="header" onClick="sort('大学物理')">大学物理</DIV></TD>
  65.         <TD width="90"><DIV class="header" onClick="sort('政治')">政治</DIV></TD>
  66.         <TD width="90"><DIV class="header" onClick="sort('体育')">体育</DIV></TD>
  67.         <TD width="90"><DIV class="header" onClick="sort('总分')">总分</DIV></TD>
  68.       </THEAD>
  69.       <xsl:for-each select="学生成绩" order-by="学号">
  70.         <TR>
  71.           <xsl:for-each select="总分">
  72.             <xsl:if expr="this.nodeTypedValue &gt; 385">
  73.               <xsl:attribute name="class">up</xsl:attribute>
  74.             </xsl:if>
  75.           </xsl:for-each>
  76.           <xsl:for-each select="总分">
  77.             <xsl:if expr="this.nodeTypedValue &lt; 380">
  78.               <xsl:attribute name="class">down</xsl:attribute>
  79.             </xsl:if>
  80.           </xsl:for-each>
  81.          
  82.           <TD><DIV class="row"><xsl:value-of select="学号"/></DIV></TD>
  83.           <TD><DIV class="row"><xsl:value-of select="姓名"/></DIV></TD>
  84.           <TD><DIV class="row"><xsl:value-of select="外语"/></DIV></TD>
  85.           <TD><DIV class="row"><xsl:value-of select="高等数学"/></DIV></TD>
  86.           <TD><DIV class="row"><xsl:value-of select="大学物理"/></DIV></TD>
  87.           <TD><DIV class="row"><xsl:value-of select="政治"/></DIV></TD>
  88.           <TD><DIV class="row"><xsl:value-of select="体育"/></DIV></TD>
  89.           <TD><DIV class="row"><xsl:value-of select="总分"/></DIV></TD>
  90.         </TR>
  91.       </xsl:for-each>
  92.     </TABLE>
  93.   </xsl:template>
  94. <!--各科成绩摸板:取得格式标准的各科成绩数据,其实这里只用给总分加模板-->
  95. <xsl:template match="总分">
  96. <xsl:eval>formatNumber(this.nodeTypedValue, "001.0")</xsl:eval>
  97.   </xsl:template>
  98.   
  99.    <xsl:template match="公布日期">
  100.     <xsl:eval>formatDate(this.nodeTypedValue, " yyyy MMMM dd")</xsl:eval>
  101.                <xsl:eval>formatTime(this.nodeTypedValue, "tt hh:mm")</xsl:eval>
  102.   </xsl:template>
  103.   
  104.   </xsl:stylesheet>
复制代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入后院

本版积分规则

QQ|Archiver|手机版|小黑屋|广告业务Q|工大后院 ( 粤ICP备10013660号 )

GMT+8, 2025-8-30 09:31

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

快速回复 返回顶部 返回列表