zoukankan      html  css  js  c++  java
  • js表格排序

    js表格排序两种插件

    1.sorttable.js

    sortable.js官网

    使用方法:

    1.官网只用方法截图:

    简单翻译:

      1.下载sorttable.js

      2.在你网页头部中引入这个js库:<script src="./sorttable.js"></script>

      3.给你网页表格的<table>标签添 class="sortable"

      注:这是一个原生js库,不依赖jquery

    2.简单版sortable.js

    //sortable.js
    /**
     * 比较函数生成器
     * 
     * @param iCol
     *            数据行数
     * @param sDataType
     *            该行的数据类型
     * @return
     */
    );function generateCompareTRs(iCol, sDataType) {
        return function compareTRs(oTR1, oTR2) {
            var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
            var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
            if (vValue1 < vValue2) {
                return -1;
            } else if (vValue1 > vValue2) {
                return 1;
            } else {
                return 0;
            }
        };
    }
    
    /**
     * 处理排序的字段类型
     * 
     * @param sValue
     *            字段值 默认为字符类型即比较ASCII码
     * @param sDataType
     *            字段类型 对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy(January 12,2004)
     * @return
     */
    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();
        }
    }
    
    /**
     * 通过表头对表列进行排序
     * 
     * @param sTableID
     *            要处理的表ID<table id=''>
     * @param iCol
     *            字段列id eg: 0 1 2 3 ...
     * @param sDataType
     *            该字段数据类型 int,float,date 缺省情况下当字符串处理
     */
    function sortTable(sTableID, iCol, sDataType) {
        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];
        }
        if (oTable.sortCol == iCol) {
            aTRs.reverse();
        } else {
            aTRs.sort(generateCompareTRs(iCol, sDataType));
        }
        var oFragment = document.createDocumentFragment();
        for (var j = 0; j < aTRs.length; j++) {
            oFragment.appendChild(aTRs[j]);
        }
        oTBody.appendChild(oFragment);
        oTable.sortCol = iCol;
    }

    使用方法:

      1.给你的表格<table>标签添加一个id,如 sortable

      2.在对应的列调用 sortTable(sTableID, iCol, sDataType)方法,3个参数分别是(当前排序列表的id,当前排序的列[从0开始],数据类型);例如sortTable('sortable',2,'float');

      注:如果排序的列为空,则可能会报错

  • 相关阅读:
    VMware的安装
    草根创业专题开篇
    转:分布式和集中式版本控制工具svn,git,mercurial
    sql db to sqlite
    简单办公自动化系统开发与思考1
    sql ef datacontext muti thread problem
    谈云计算,服务器运算的惊天骗局
    ios5.1二货,手贱,解决方案
    阿曹的创业点子1人人快递
    创业点子wifi anywhere
  • 原文地址:https://www.cnblogs.com/helena000/p/7274693.html
Copyright © 2011-2022 走看看