zoukankan      html  css  js  c++  java
  • 改进jquery.tablesorter.js 支持中文表格排序

         之前研究过一下表格排序。上网找了一些代码研究了一下。勉强做了一个用着。后面发现当动态给单元格加超链接,或者列中存在一些空白,就排序不了了。

    代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序。 没办法,能力有限,只能。。。

    代码
    //转换器,将列的字段类型转换为可以排序的类型:String,int,float
    function convert(sValue, sDataType) 
    {
        
    switch(sDataType) 
        {
            
    case "int":
                
    return parseInt(sValue);
            
    case "float":
                
    return parseFloat(sValue);
            
    case "date":
                
    return new Date(Date.parse(sValue));
            
    default:
                
    return sValue.toString();
        }


    // 汉字排序方法 
    function chrComp(a,b)
    {
        
    return a.localeCompare(b);


    //排序函数产生器
    function generateCompareTRs(iCol, sDataType,isinput,sDec) 
    {
        
    return  function compareTRs(oTR1, oTR2) 
        {
            
    if(isinput == 1)
            {
                var vValue1 
    = convert(oTR1.getElementsByTagName("input")[iCol].value);
                var vValue2 
    = convert(oTR2.getElementsByTagName("input")[iCol].value);
            }
            
    else
            {
                var vValue1 
    = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
                var vValue2 
    = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
            }
            
    if(sDec=='desc')
            {
                
    if(sDataType=='int'
                {
                    
    return vValue1  ==  vValue2 ? 0 :(vValue1 - vValue2 <0 ? 1 : -1);
                }
                
    else if(sDataType =='cn')
                {
                    
    if(chrComp(vValue1,vValue2)>0)
                    {
                        
    return -1;
                    }
                    
    else if(chrComp(vValue1,vValue2)<0)
                    {
                        
    return 1;
                    }
                    
    else
                    {
                        
    return 0;
                    }
                }
                
    else
                {
                    
    if (vValue1 > vValue2) {
                        
    return -1;
                    } 
    else if (vValue1 < vValue2) {
                        
    return 1;
                    } 
    else {
                        
    return 0;
                    }
                } 

            }
            
    else if(sDec=='asc')
            {
                
    if(sDataType=='int')
                {
                    
    return  vValue1  ==  vValue2 ? 0 :(vValue1 - vValue2 >0 ? 1 : -1);
                }
                
    else if(sDataType =='cn')
                {
                    
    return chrComp(vValue1,vValue2);
                }
                
    else
                {
                    
    if (vValue1 > vValue2) {
                        
    return 1;
                    } 
    else if (vValue1 < vValue2) {
                        
    return -1;
                    } 
    else {
                        
    return 0;
                    }
                }    
            }
        };


    //重置单元格的classname
    function ChangeClsName(tr,num)
    {
        num 
    = num%2?1:2;
        num.toString();
        
    for ( var  i = 0 ; i < tr.childNodes.length; i ++ )
        {
            tr.childNodes[i].className 
    = "row" + num
        }


    /*排序方法(主函数)
    sTableID 表格的id
    iCol表示列索引
        1,当不是input类型时,iCol表示的是tr的第几个td; 
        2,当是input类型时,则iCol表示在这个tr中的第几个input;
    sDataType表示该cell的数据类型或者该input的value 的数据类型. 默认是string,也可以int, float. cn是中文
    isinput表示排序的内容是不是input(1是, 0否) 
    sDec表示倒序还是顺序(desc, 默认顺序), 避免出现input值改变之后再排序时候出现直接倒序的情况。
    */
    function sortTable(sTableID, iCol, sDataType, isinput, sDec) 
    {
        var oTable 
    = document.getElementById(sTableID);
        var oTBody 
    = oTable.tBodies[0];
        var colDataRows 
    = oTBody.rows;
        var aTRs 
    = new Array;
        
    //将所有列放入数组
        for (var i=0; i < colDataRows.length; i++
        {
            aTRs[i] 
    = colDataRows[i];
        } 

        aTRs.sort(generateCompareTRs(iCol, sDataType,isinput, sDec)); 

        var oFragment 
    = document.createDocumentFragment();
        
    for (var i=0; i < aTRs.length; i++
        {
            oFragment.appendChild(aTRs[i]);
            ChangeClsName(aTRs[i],i);
        }
        oTBody.appendChild(oFragment);
    }


         这个星期终于有时间研究一下jquery,一直很想学的。可惜公司用不到,其实是学了之后还是觉得用的到。 知道jqery后就看了一下别人的插件。jquery.tablesorter.js 这个插件功能挺强大。试了一下,发现不支持中文的。 看看源码在说

    代码
    代码 
    /* sorting methods */
    function multisort(table,sortList,cache) {
        
    if(table.config.debug) { var sortTime = new Date(); }
        var dynamicExp 
    = "var sortWrapper = function(a,b) {", l = sortList.length;
        
    for(var i=0; i < l; i++) {
            var c 
    = sortList[i][0];
            var order 
    = sortList[i][1];
            var s 
    = (getCachedSortType(table.config.parsers,c) == "text"? ((order == 0? "sortText" : "sortTextDesc") : ((order == 0? "sortNumeric" : "sortNumericDesc");
            var e 
    = "e" + i;
            dynamicExp 
    += "var " + e + " = " + s + "(a[" + c + "],b[" + c + "]); ";
            dynamicExp 
    += "if(" + e + ") { return " + e + "; } ";
            dynamicExp 
    += "else { ";
        }
        
    for(var i=0; i < l; i++) {
            dynamicExp 
    += "}; ";
        }
        dynamicExp 
    += "return 0; ";    
        dynamicExp 
    += "}; ";    
        eval(dynamicExp);
        cache.normalized.sort(sortWrapper);
        
    if(table.config.debug) { benchmark("Sorting on " + sortList.toString() + " and dir " + order+ " time:", sortTime); }
        
    return cache;
    }; 

    function sortText(a,b) {
        
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    }; 

    function sortTextDesc(a,b) {
        
    return ((b < a) ? -1 : ((b > a) ? 1 : 0));
    };    

    function sortNumeric(a,b) {
        
    return a-b;
    }; 

    function sortNumericDesc(a,b) {
        
    return b-a;
    }; 

    function getCachedSortType(parsers,i) {
        
    return parsers[i].type;
    };


    一开始还以为会遇到一些困难的。没想到,我只需要把他的排序函数改一下就ok啦.

    function sortText(a,b) {
        
    return a.localeCompare(b);
    }; 

    function sortTextDesc(a,b) {
        
    return -a.localeCompare(b);
    };

    测试一下。中文,中英文一起,中间有列为空等都没问题了。

    本来这个插件是有一个jquery.tablesorter.pack.js 压缩过后的才9kb,可是我只会改jquery.tablesorter.js (23kb)。要怎么把它变成jquery.tablesorter.pack.js 就不知道了。

    ps:当然这个插件还有很多扩展功能,例如多列排序,各种例子等都有文档可以参考的。原文件和例子网上应该挺多的。有需要的 童鞋  可以留个邮箱给我

    作者:Novus
    出处:http://www.cnblogs.com/novus/
    本文版权归作者和博客园共有,欢迎任何形式的转载,但请务必注明出处。

  • 相关阅读:
    async 异步协程进阶
    linux 磁盘100% 清理
    时间戳,日期,string互转
    ioutils
    logging basic
    【BZOJ5323】【JXOI2018】—游戏(组合数学+线性筛)
    【BZOJ5323】【JXOI2018】—游戏(组合数学+线性筛)
    【CodeChef】—Sum of Cubes(斯特林数+容斥+三元环计数)
    【CodeChef】—Sum of Cubes(斯特林数+容斥+三元环计数)
    【TopCoder SRM 686】—CyclesNumber(斯特林数)
  • 原文地址:https://www.cnblogs.com/novus/p/1619090.html
Copyright © 2011-2022 走看看