点击表头即可实现排序的代码./*table排序步骤
1、给排序的表格加id
2、标题栏加<thead>
3、排序的内容加<tbody>
5、引入此js
6、在文档的末尾加入
[removed]
var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = [];
$$A.forEach([
["idNum", { type: "int" }],//排序对象（对应列的id）
["idTitle", { index: 1 }],
["idExt", { index: 1, property: "_ext" }],
["idAddtime", { index: 2, type: "date" }],
["idSize", { index: 3, property: "_order", type: "int" }],
["idCheckbox", { index: 4, type: "bool", value: SetCheck }],
["idRadio", { index: 5, type: "bool", value: SetCheck }]
], function (arr){
var o = $$(arr[0]), order = to.creat(arr[1]);
order.onBegin = function(){ ClearCss(); odID.desc = this.desc; }
order.onEnd = function(){
o.className = this.desc ? "desc" : "asc";//设置样式
this.desc = !this.desc;//取反排序
}
o.onclick = function(){ to.sort(order, odID); }
arrOrder.push(o);//记录排序项目（这里主要用来设置样式）
});
[removed]
7、【排序对象】
属性 默认值//说明
index: 0,//td索引
property: "innerHTML",//获取数据的属性
type: "string",//比较的数据类型
desc: true,//是否按降序
compare: null,//自定义排序函数
value: null,//自定义取值函数
repair: this._repair,//是否解决checkbox和radio状态恢复bug
onBegin: function(){},//排序前执行
onEnd: function(){}//排序后执行
*/
//完整的示例
//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//<html>
//<head>
//<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
//<title>Table 排序</title>
//[removed][removed]
//</head>
//<body>
//<style type="text/css">
//.odTable {width:500px;border:1px solid #ebebeb;line-height:20px;font-size:12px;background:#FFF;}
//.odTable thead {background-color:#ebebeb;}
//.odTable span {color:#333;padding-right:15px;cursor:pointer;}
//.odTable .desc, .odTable .asc {background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_2.jpg) right center no-repeat;}
//.odTable .desc {background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_1.jpg);}
//</style>
//<table border="0" cellspacing="0" cellpadding="5" class="odTable" id="idTable">
// <thead>
// <tr>
// <td align="center"><span id="idNum">ID</span></td>
// <td> <span id="idTitle">名称</span> / <span id="idExt">类型</span></td>
// <td width="100" align="center"><span id="idAddtime">上传时间</span></td>
// <td width="50" align="center"><span id="idSize">大小</span></td>
// <td width="30" align="center"><span id="idCheckbox">Ｃ</span></td>
// <td width="30" align="center"><span id="idRadio">Ｒ</span></td>
// </tr>
// </thead>
// <tbody>
// <tr>
// <td align="center">1</td>
// <td _ext="htm">new.htm</td>
// <td align="center">2008/9/12</td>
// <td align="right" _order="433244">423.09 K</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// <tr>
// <td align="center">2</td>
// <td _ext="js">Scroller.js</td>
// <td align="center">2008/9/23</td>
// <td align="right" _order="2560">2.5 K</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// <tr>
// <td align="center">3</td>
// <td _ext="js">AlertBox.js</td>
// <td align="center">2008/9/23</td>
// <td align="right" _order="3563">3.48 K</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// <tr>
// <td align="center">4</td>
// <td _ext="xml">1.xml</td>
// <td align="center">2008/10/4</td>
// <td align="right" _order="11397">11.13 K</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// <tr>
// <td align="center">5</td>
// <td _ext="xml">4.xml</td>
// <td align="center">2008/10/4</td>
// <td align="right" _order="108">108 b</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// <tr>
// <td align="center">6</td>
// <td _ext="htm">news.htm</td>
// <td align="center">2008/10/4</td>
// <td align="right" _order="14074">13.74 K</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// <tr>
// <td align="center">7</td>
// <td _ext="js">function.js</td>
// <td align="center">2008/10/4</td>
// <td align="right" _order="2844">2.78 K</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// <tr>
// <td align="center">8</td>
// <td _ext="mp3">神秘园 - Nocturne.mp3</td>
// <td align="center">2008/9/20</td>
// <td align="right" _order="3111293">2.97 M</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// <tr>
// <td align="center">9</td>
// <td _ext="doc">详细功略+剧情流程（一）.doc</td>
// <td align="center">2009/2/2</td>
// <td align="right" _order="63488">62 K</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// <tr>
// <td align="center">10</td>
// <td _ext="doc">详细功略+剧情流程（二）.doc</td>
// <td align="center">2009/2/2</td>
// <td align="right" _order="164352">160.5 K</td>
// <td align="center"><input type="checkbox"/></td>
// <td align="center"><input name="c" type="radio"/></td>
// </tr>
// </tbody>
//</table>
//<br />
//有中文的先排前面，再按时间倒序，ID倒序排序：
//<input name="" type="button" value="Sort" id="idBtn" />
//[removed]
//var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = [];
//$$A.forEach([
// ["idNum", { type: "int" }],
// ["idTitle", { index: 1 }],
// ["idExt", { index: 1, property: "_ext" }],
// ["idAddtime", { index: 2, type: "date" }],
// ["idSize", { index: 3, property: "_order", type: "int" }],
// ["idCheckbox", { index: 4, type: "bool", value: SetCheck }],
// ["idRadio", { index: 5, type: "bool", value: SetCheck }]
//], function (arr){
// var o = $$(arr[0]), order = to.creat(arr[1]);
// order.onBegin = function(){ ClearCss(); odID.desc = this.desc; }
// order.onEnd = function(){
// o.className = this.desc ? "desc" : "asc";//设置样式
// this.desc = !this.desc;//取反排序
// }
// o.onclick = function(){ to.sort(order, odID); }
// arrOrder.push(o);//记录排序项目（这里主要用来设置样式）
//});
//$$("idNum").onclick();
////////////////////////////////////////////////////////////////////////
//var od1 = to.creat({ index: 1, onEnd: ClearCss,
// compare: function(value1, value2) {
// var re = /[\u4E00-\u9FA5]/, v1 = re.test(value1), v2 = re.test(value2);
// return v1 == v2 ? 0 : (v1 ? 1 : -1);
// }
// })
// ,od2 = to.creat({ index: 2, type: "date" }) ,od3 = to.creat({ type: "int" });
//$$("idBtn").onclick = function(){ to.sort(od1, od2, od3); }
//[removed]
//</body>
//</html>
在前端开发中，经常需要实现表格数据的点击排序功能。本文介绍了一种方法，通过在表格的字段旁添加带有特定ID和类名的span元素，并设置不同类名对应不同的样式。点击span元素时，触发paixu()函数，该函数获取当前字段的排序状态并跳转到后台接口，通过URL参数传递排序信息。后台接收到请求后解析排序字段和方向，动态生成SQL的ORDER BY子句，实现数据的升序或降序排列。
最低0.47元/天 解锁文章
扫一扫
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
