2

我想知道通过单击相关按钮对 xml/xslt 表进行排序的最简单方法。我对 xslt 非常熟悉,但对 Javascript 很陌生,所以请放轻松。

我在互联网上查看了许多示例,但似乎没有什么真正适合我正在尝试做的事情,或者我的编码技能可能达不到标准。

我可能会走得很远,但我在想一些事情……

xslt:

<button onclick="title()">sort by title</button>
<!--some xsl code-->
<xsl:for each select="record">
<xsl:sort id="title" select="dates/year"/>
<!--more xsl code-->

Javascript:

function title() {
document.getElementById(title).select="titles/title";
}

我也不清楚将 Javascript 代码放在哪里。我已经有一个 .js 文件,它将我的 xml 和 xsl 文件显示为 html。我可以把这段代码放在那里吗?还是我的 xsl 文件需要内联脚本?我见过很多将 Javascript 附加到 xsl 文件的方法,但我不确定哪种方法最适合我的目的

4

2 回答 2

1

如果您对 XSLT 感到满意,但对 Javascript 不满意,那么您可能想看看 Saxon-CE,它在浏览器中提供了 XSLT 2.0,并带有处理用户交互事件的扩展。有一个简单的示例演示了如何对表进行排序以响应鼠标点击:

http://www.saxonica.com/ce/doc/samples/booklist.xml

于 2012-09-25T09:08:14.857 回答
0

这就是我最终做的,而且效果很好!

HTML:xml 文档加载有一个 div

<button type="button" id="sorttitle" onclick="sorttitle()">sort by title</button>
<button type="button" id="sortauthor" onclick="sortauthor()">sort by author</button>
<button type="button" id="sortyear" onclick="sortyear()">sort by year</button>
<button type="button" id="sortpublisher" onclick="sortpublisher()">sort by publisher</button>

JAVASCRIPT

function sorttitle(){
document.getElementById("sortauthor").style.backgroundColor="#000";
document.getElementById("sortyear").style.backgroundColor="#000";
document.getElementById("sortpublisher").style.backgroundColor="#000";
document.getElementById("sorttitle").style.backgroundColor="#666";
xsl=loadXMLDoc("sorttitle.xsl");
if (window.ActiveXObject)
  {
  sortedDocument=xml.transformNode(xsl);
  document.getElementById('content').innerHTML=sortedDocument;
}
else {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  sortedDocument = xsltProcessor.transformToFragment(xml,document);
  document.body.replaceChild(sortedDocument,document.getElementById('content'));
}}

function sortauthor(){
document.getElementById("sorttitle").style.backgroundColor="#000";
document.getElementById("sortyear").style.backgroundColor="#000";
document.getElementById("sortpublisher").style.backgroundColor="#000";
document.getElementById("sortauthor").style.backgroundColor="#666";
xsl=loadXMLDoc("sortauthor.xsl");
if (window.ActiveXObject)
  {
  sortedDocument=xml.transformNode(xsl);
  document.getElementById('content').innerHTML=sortedDocument;
}
else {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  sortedDocument = xsltProcessor.transformToFragment(xml,document);
  document.body.replaceChild(sortedDocument,document.getElementById('content'));
}}

function sortyear(){
document.getElementById("sorttitle").style.backgroundColor="#000";
document.getElementById("sortauthor").style.backgroundColor="#000";
document.getElementById("sortpublisher").style.backgroundColor="#000";
document.getElementById("sortyear").style.backgroundColor="#666";
xsl=loadXMLDoc("sortyear.xsl");
if (window.ActiveXObject)
  {
  sortedDocument=xml.transformNode(xsl);
  document.getElementById('content').innerHTML=sortedDocument;
}
else {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  sortedDocument = xsltProcessor.transformToFragment(xml,document);
  document.body.replaceChild(sortedDocument,document.getElementById('content'));
}}

function sortpublisher(){
document.getElementById("sorttitle").style.backgroundColor="#000";
document.getElementById("sortauthor").style.backgroundColor="#000";
document.getElementById("sortyear").style.backgroundColor="#000";
document.getElementById("sortpublisher").style.backgroundColor="#666";
xsl=loadXMLDoc("sortpublisher.xsl");
if (window.ActiveXObject)
  {
  sortedDocument=xml.transformNode(xsl);
  document.getElementById('content').innerHTML=sortedDocument;
}
else {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  sortedDocument = xsltProcessor.transformToFragment(xml,document);
  document.body.replaceChild(sortedDocument,document.getElementById('content'));
}}

XML:然后我有多个 xsl 文件,其中指定了某种类型。每个函数调用一个不同的样式表。

于 2012-10-24T18:47:01.017 回答