源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

分享一个自己写的table表格排序js插件(高效简洁)

  • 时间:2020-07-01 00:20 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:分享一个自己写的table表格排序js插件(高效简洁)
像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法,就没有使用)、原生态js的table排序插件等,最后比较看了下——采用了一个原生态js的table排序插件,并在其基础上做了些修改,虽有些勉强或有些地方使用不太舒服,但最算是比较好的实现了当时需要的功能。而前两天,对原有表格做了点儿修改——增加隔行换色的功能,问题就出现了,——效果错乱;检查分析了下,问题出在其table排序插件代码上——其原代码写的比较难理解,修改还不如重新自己写一个table排序插件。 说写就写,table排序其实很简单:就是取出所有排序列的值并存放在数组中(并且各列对应行对象也存放到一个数组中),然后对排序列的值数组排序(并对行对象数组排序)。下面贴出table排序插件代码:
[url=javascript:void(0)]<td width="150" align="center"><a href="javascript:void(0)" id="idAddtime" class="up">上传时间</a></td> <td width="50" align="center"><a href="javascript:void(0)" id="idSize">大小</a></td> </tr> </thead> <tbody> <tr class="hoverTr"> <td _ext="rar">JSCSS</td> <td align="center" _order="2008/9/12 8:51:09">2008/9/12 8:51:09</td> <td align="right" _order="433247">433247</td> </tr> <tr> <td _ext="htm">AJAX</td> <td align="center" _order="2008/3/6 20:12:23">2008/3/6 20:12:23</td> <td align="right" _order="11394">11394</td> </tr> <tr> <td _ext="htm">EXT</td> <td align="center" _order="2008/10/4 20:21:54">2008/10/4 20:21:54</td> <td align="right" _order="351">351</td> </tr> <tr> <td _ext="xml">Index</td> <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td> <td align="right" _order="14074">14074</td> </tr> <tr> <td _ext="js">ORDER</td> <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td> <td align="right" _order="2844">2844</td> </tr> </tbody> </table> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="TableOrder.js" type="text/javascript"></script> <script type="text/javascript"> TableOrderOper.Init("idTable", 0, { OnShow: function (i, trJqObj, _tbodyObj) { trJqObj.attr("class", ((i +1) %2==0?"hoverTr" : "")); } }); TableOrderOper.SetOrder("idAddtime", 1, { ValAttr: "_order", DataType: "date" }); TableOrderOper.SetOrder("idSize", 2, { DataType: "int", DefaultOrder: true, OnClick: function () { alert("idSize"); } }); </script>
代码中注释我都尽量写的比较清楚了,需要补充说明的是: 1.js使用的是闭包,我强调代码要尽可能的简洁易懂。 2.IsLazyMode属性设置,IsLazyMode=true,适用于当前要排序的表格是不变的,即不会有ajax的增删改行的操作,而且你看代码后就可以看出的一个好处:把要排序列的对应的行对象只一次遍历,并将排序后的行对象数组保存在全局对象中,下次排序时直接通过tdIndex(排序列的索引)取出对应的行对象数组,并将数组反转,即可实现排序的效果,可以在一定程度上提高代码执行效率(性能); IsLazyMode=false, 即适用于当前要排序的表格会改变,如有ajax的增删改行的操作的情况。 3.考虑一般要排序的表格数据量都不大,其中的数组排序使用的是冒泡排序算法。 4.OnShow: null //排序后表格显示时的方法,params:trIndex,trJqObj,tbodyObj ——可方便用于设置排序后的表格的换行样式等,也出于对性能优化方面的考虑。 好了,最后,附上插件js和demo,目前的实现只能说是能很好的满足我当前项目中的需求或适用于于大多数的场景,如果有没有考虑到或不好的地方,希望各位路过的朋友,能毫不客气的拍砖留言,大家互相交流学习! OrderTable.rar [/url] 原文地址: cnblogs know
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部