- JavaScript点击表格的表头,实现表格排序
- vue最简单实现表格排序+搜索
- 这个表格是如何用HTML实现的?
- html5表格标签
- 2-12. 表格标签中的其他标签
- HTML表格-13
- html-表格
- 2-13. 表格的结构
- 说说如何基于 Vue.js 实现表格组件
- 2015年11月5日
现在很多vue/react等js框架配套的UI框架,表格自带点击表头排序的动能。
后来小想了js/jq 手写的话,逻辑上如何实现。就写了个小demo,这里共享下。
这是一个小白demo。1. 说明
1)页面预设布局
页面上事先给出表头,具体html代码如下:
其中表头的key属性作用后面说明。<!DOCTYPE html> <html> <head> <title>demo2</title> </head> <body> <p>点击表头,会根据当前列,切换排序。</p> <table id="baseTable" border="1"> <thead> <th style="color:#ccc;">序号</th> <th key="id">id</th> <th key="name">姓名</th> <th key="age">年龄</th> <th key="status">状态</th> </thead> <tbody></tbody> </table> <script src="./jquery-2.0.3.min.js"></script> <script> /** javaScript code....*/ <script> </body> </html>
2)关于数据:数据就是个数组对象。具体如下
people
数组:var people = [ { id: '001', name: 'celine', age: '18', status: 2 }, { id: '003', name: 'apple', age: '16', status: 0 }, { id: '002', name: 'andy', age: '22', status: 1 }, { id: '005', name: 'hunter', age: '1', status: 0 }, { id: '004', name: 'redis', age: '15', status: 1 }, { id: '019', name: 'mango', age: '18', status: 0 }, ];
3)数据渲染方式
此处采用的是遍历数据,拼接字符串后,append到页面的<body></body>中。
具体的生成表格函数如下:function getbaseList(ary) { var html = ''; for (var i=0 ; i<ary.length; i++){ var status = ''; switch(ary[i].status){ case 1: status = '普通活跃'; break; case 2: status = '特别活跃'; break; default: status = '不活跃'; } html += '<tr>'; html += '<td>' + (i+1) + '</td>'; html += '<td>' + ary[i].id + '</td>'; html += '<td>' + ary[i].name + '</td>'; html += '<td>' + ary[i].age + '</td>'; html += '<td>' + status + '</td>'; html += '</tr>'; } $('#baseTable tbody').empty().append(html); }
2. 思路
因为表格数据是遍历数组动态创建,所以可以考虑在点击表头的时候,对数据进行排序。
对数据排序需要考虑两个关键点:- 对哪个字段进行排序?
- 是正序(ASC)还是逆序(DESC)?
1)要排序的字段
先考虑要对哪个字段进行排序。这个由点击事件决定,点击哪一个表头,就是对那一列数据排序。所以我们可以考虑在表头标签中存储对应的字段属性——也就是下面代码中的key属性。<th key="id">id</th> <th key="name">姓名</th> <th key="age">年龄</th> <th key="status">状态</th>
属性值则对应数据
people
里面的对象属性。2)正序还是逆序
和上面类似,想要知道当前表头字段是正序还是逆序,也只需要在表头标签中存储一个排序属性——sort属性。因为初始化的数据people
是乱序的,所以不需要预设sort属性。可以在点击事件排序时,再进行设置。比如下面点击事件代码,当逆序排序后,预设sort为正序(确保下一次点击做的是正序排序);当正序排序后,预设sort为逆序。
$('#baseTable th').on('click', function(){ var sort_ary; if ($(this).attr('sort') == 'desc') { // 逆序排序 sort_ary = people.sort(compare($(this).attr('key'),-1)); getbaseList(sort_ary); // 切换sort属性的值,预设下一次点击是正序 $(this).attr('sort', 'asc'); } else { // 正序排序 sort_ary = people.sort(compare($(this).attr('key'),1)); getbaseList(sort_ary); // 切换sort属性的值,预设下一次点击是正序 $(this).attr('sort', 'desc'); } });
3. 排序函数
此处的排序函数,我们直接使用sort()方法。
这个排序方法需要注意的是:字符串排序,还是数值排序。
还要考虑需要传入什么参数:要排序的字段prop
、正序/逆序type
。/** * 比较函数 * @param {string} prop 数据里面要排序的key * @param {number} type 1:asc -1:desc * @return {number} */ function compare(prop,type) { return function (obj1, obj2) { var val1 = obj1[prop]; var val2 = obj2[prop]; if (!isNaN(Number(val1)) && !isNaN(Number(val2))) { val1 = Number(val1); val2 = Number(val2); } if (val1 < val2) { return 0-type; } else if (val1 > val2) { return type; } else { return 0; } } }
4. 结语
自此就完成了一个简易版点击表头排序,详细代码详见 table-sort.html。
当然,这不是最简洁的方式,有看到小伙使用reverse()方法 JavaScript-点击表格的表头进行排序
网友评论