自制js表格排序

最新推荐文章于 2024-05-25 13:46:03 发布

iteye_3829

最新推荐文章于 2024-05-25 13:46:03 发布

阅读量67

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_3829/article/details/82512945

版权

表格排序

比tablesorter功能少但灵活可以根据实际需求做调整

本来用tablesorter做需求但改的太费劲了自己做了一个

<head>中添加

<head>
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" media="print, projection, screen" />
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="tableOrder.js"></script>
</head>

表格形式每行的 <td style="display: none">1</td> 是用来还原本来顺序的

<table id="table1" width="100%">
            <thead>
                <tr>
                    <th style="display: none">
                    </th>
                    <th id="t1h1">
                        表1-排序1
                    </th>
                    <th id="t1h2">
                        表1-排序2
                    </th>
                    <th id="t1h3">
                        表1-排序3
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="display: none">
                        1
                    </td>
                    <td>
                        200
                    </td>
                    <td>
                        300
                    </td>
                    <td>
                        500
                    </td>
                </tr>
                <tr>
                    <td style="display: none">
                        2
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        400
                    </td>
                    <td>
                        200
                    </td>
                </tr>
                <tr>
                    <td style="display: none">
                        3
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        600
                    </td>
                    <td>
                        800
                    </td>
                </tr>
                <tr>
                    <td style="display: none">
                        4
                    </td>
                    <td>
                        300
                    </td>
                    <td>
                        500
                    </td>
                    <td>
                        100
                    </td>
                </tr>
            </tbody>
        </table>

合并的表头也可以

<thead>
                <tr>
                    <th style="display: none">
                    </th>
                    <th colspan="2">
                        <table style=" width:100%">
                            <tr>
                                <td id="Td1" colspan="2">
                                    头部
                                </td>
                            </tr>
                            <tr>
                                <td id="t2h1">
                                    表2-排序1
                                </td>
                                <td id="t2h2">
                                    表2-排序2
                                </td>
                            </tr>
                        </table>
                    </th>
                    <th id="t2h3">
                        表2-排序3
                    </th>
                </tr>
            </thead>

js添加

var openOrder; //所有功能总开关
var tablearr = ["table1"];  //注册的表id
var thidarr = [["t1h1", "t1h2", "t1h3"]];   //被注册表中的激发排序的列id
var tdarr = [[1, 2, 3]];    //对应激发列顺序的排序列号(不从0开始 1就是1列)
var thclass0 = "header";    //正常列的样式名
var thclass1 = "headerSortUp";  //1次排序列的样式名
var thclass2 = "header";    //2次排序列的样式名 与thclass0名一样则取消2次排序(headerSortDown) 
var orderFs1 = 1;   //1次排 方式 0原序, 1倒序, 2正序
var orderFs2 = 0;   //2次排 取消2次排序则为正常列方式 0原序, 1倒序, 2正序
var h_i_d = ["hidden"]; //input-hidden的id 刷新页面时 记录排序状态(页面要写对应id的hidden) 不赋值则关闭记录功能
/*可选函数
//a-排序的表id, b-被点击列id, c-排a表中的第c列
自定义函数用这3个参数做文章
//还原排序时自定义函数
function x_x_x(a,b,c) {
....
}
//1排序时自定义函数
function y_y_y(a,b,c) {
.....        
}
//2排序时自定义函数
function z_z_z(a,b,c) {
......
}
//排序依据string处理函数
s-是排序列td中的innerText 处理后返回s 后面依据返回的s排序
function g_g_g(s) {
    return s;
}
*/

第一次点击被点元素class变thclass1 激发tdarr中对应列号按orderFs1方式排序

第二次点击被点元素class变thclass2 激发tdarr中对应列号按orderFs2方式排序

再点来回反复此中情况可以不加<td style="display: none">1</td>隐藏列

但不加的话tdarr中从0算对应列

如果thclass0与thclass2相同第一列要<td style="display: none">1</td>隐藏列

那么第二次点击被点元素class变thclass0(thclass2) 激发隐藏列 0号列按orderFs2方式排序

就可以还原了

内有2个例子

下载连接: 自制js表格排序

iteye_3829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自制js表格排序

表格排序比tablesorter功能少但灵活可以根据实际需求做调整本来用tablesorter做需求但改的太费劲了自己做了一个&lt;head&gt;中添加&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="style.css" type=&q
复制链接

扫一扫