文件名称：table点击表头排序
文件大小：5KB
文件格式：JS
更新时间：2015-07-20 03:23:07
table 表头 排序
点击表头即可实现排序的代码./*table排序步骤 1、给排序的表格加id 2、标题栏加 3、排序的内容加
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(){}//排序后执行 */ //完整的示例 // //<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> //| ID | //名称 / 类型 | //上传时间 | //大小 | //Ｃ | //Ｒ | //
| 1 | //new.htm | //2008/9/12 | //423.09 K | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
| 2 | //Scroller.js | //2008/9/23 | //2.5 K | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
| 3 | //AlertBox.js | //2008/9/23 | //3.48 K | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
| 4 | //1.xml | //2008/10/4 | //11.13 K | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
| 5 | //4.xml | //2008/10/4 | //108 b | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
| 6 | //news.htm | //2008/10/4 | //13.74 K | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
| 7 | //function.js | //2008/10/4 | //2.78 K | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
| 8 | //神秘园 - Nocturne.mp3 | //2008/9/20 | //2.97 M | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
| 9 | //详细功略+剧情流程（一）.doc | //2009/2/2 | //62 K | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
| 10 | //详细功略+剧情流程（二）.doc | //2009/2/2 | //160.5 K | //<input type="checkbox"/></td> // | <input name="c" type="radio"/></td> // |
//有中文的先排前面，再按时间倒序，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>
网友评论
- 有点乱，没用上