2

我已经生成了与此类似的 HTML（我无法控制）：

<ul id="list">
  <li id="I">one</li>
  <li id="II">two</li>
  <li id="III">three</li>
  <li id="IV">four</li>
  <li id="IX">nine</li>
  <li id="V">five</li>
  <li id="VI">six</li>
  <li id="VII">seven</li>
   .....
   ......
   ......
</ul>

基本上，生成此代码的代码（SQL -> XML -> XSLT）按字母顺序按字段（表示罗马数字字段）排序。有没有办法可以使用 javascript 从客户端重新排序列表项？

4

3 回答 3

4 
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
<script>
function sortRomanIds(){
    fromRoman= function(s){
        s= s.toUpperCase();
        var L= s.length, sum= 0, i= 0, L= s.length, next, val,
        R={
            M: 1000, D: 500, C: 100, L: 50, X: 10, V: 5, I: 1
        };
        while(i< L){
            val= s.charAt(i++);
            if(!R[val]) return NaN;
            val= R[val];
            next= R[(s.charAt(i) || 'N')] || 0;
            if(next> val) val*= -1;
            sum+= val;
        }
        return sum
    }
    var U= document.getElementById('list'), Li= U.childNodes, 
    L= Li.length, A= [];
    for(var i= 0; i<L; i++){
        if(Li[i].id) A.push(Li[i]);
    }
    A.sort(function(a, b){
        return fromRoman(a.id)- fromRoman(b.id)
    });
    while(A.length) U.appendChild(A.shift());
    return U;
}
window.onload=function(){
document.getElementById('list').onclick=sortRomanIds;
}
</script>
</head>
<body>
<h1> Small Page</h1>
<ul id="list">
  <li id="I">one</li>
  <li id="II">two</li>
  <li id="III">three</li>
  <li id="IV">four</li>
  <li id="IX">nine</li>
  <li id="V">five</li>
  <li id="VI">six</li>
  <li id="VII">seven</li>
</ul> 
</body>
</html>
于 2011-10-13T23:37:53.260 回答
0

据我所知，XSLT 只会对可以指定为文本或数字的值进行排序（...data-type="text|number"...）。您也许可以添加另一个属性，即罗马数字 id 的数值（例如 ...id="II" data-decimal="2"...），然后使用数据类型编号对其进行排序。

于 2011-10-13T23:22:00.887 回答
0

使用 sortContent JQuery 插件，它是一个非常强大的排序插件：

通过fromRomaon和toRoman函数扩展 Number 对象后，使用插件如下：

$('#list').sortContent({asc:true,helperxp:myHelper})

注意： helperxp 选项有getter& setter，你应该实现 getter 来获取 attr ID 的值，并实现 setter 来设置 attr ID 的新值，因为你根据那个 attr 排序。

var myHelper={
   get:function(e){
    return Number.fromRoman(e.attr('id'))+'';
   },
   set:function(e,newVal){
       $(e).attr('id',(parseInt(newVal)).toRoman());
   }

}

演示：

http://jsfiddle.net/abdennour/6RtVc/4/

于 2013-09-16T14:45:16.327 回答