高效简洁

日期:2019-09-16编辑作者:最快开奖计算机

像:jQuery的table排序插件(以为其利用比较麻烦或不明了其实际用法,就从未有过使用)、原生态js的table排序插件等,最终相比看了下——采取了三个原生态js的table排序插件,并在其基础上做了些修改,虽有一点勉强或稍微地点使用不太安适,但最算是相比较好的兑现了立时亟需的功能。而前两日,对原来表格做了一定量修改——增添隔行换色的效劳,难题就出现了,——效果错乱;检查深入分析了下,难点出在其table排序插件代码上——其原代码写的比较难知晓,修改还比不上重复自身写三个table排序插件。

说写就写,table排序其实很不难:便是收取全体排系列的值并存放在数组中(並且各列对应行对象也存放到二个数组中),然后对排连串的值数组排序(并对行对象数组排序)。上面贴出table排序插件代码:

复制代码 代码如下:

/**
* @description 表格排序达成
* @author Blog:
* @date 2011-10-28
**/
(function () {
//初始化配置对象
var _initConfig = null;
var _tableObj = null, _tbodyObj = null, _tBodyIndex = 0;
//贮存当前各排序方式下的(有序)行数组的靶子——仅在IsLazyMode=true,此变量有用
var _trJqObjArray_Obj = null;
/**
* 增添排序方式(准则)的法门
* @private
* @param trJqObjArr:(外部传入)贮存排序行的数组,tdIndex:排系列的目录,td_valAttr:排种类的取值属性,td_dataType:排种类的值类型
**/
function _GetOrderTdValueArray(trJqObjArr, tdIndex, td_valAttr, td_dataType) {
var tdOrderValArr = new Array();
var trObj, tdObj, tdVal;
_tbodyObj.find("tr").each(function (i, trItem) {
trObj = $(trItem);
trJqObjArr.push(trObj);
tdObj = trObj.find("td")[tdIndex];
tdObj = $(tdObj);
tdVal = td_valAttr ? tdObj.attr(td_valAttr) : tdObj.text();
tdVal = _GetValue(tdVal, td_dataType);
tdOrderValArr.push(tdVal);
});
return tdOrderValArr;
}
/**
* 重返jQuery对象的秘诀
* @private
**/
function _GetJqObjById(id) {
return "string" == typeof (id) ? $("#" + id) : $(id);
};
/**
* 排序方法
* @private
* @param tdIndex:排连串的目录,options:排种类的法规配置对象
**/
function _Sort(tdIndex, options) {
var trJqObjArr = null;
if (_initConfig.IsLazyMode) {
!_trJqObjArray_Obj && (_trJqObjArray_Obj = {});
trJqObjArr = _trJqObjArray_Obj[tdIndex];
}
var isExist_trJqObjArr = true;
if (!trJqObjArr) {
isExist_trJqObjArr = false;
trJqObjArr = new Array();
var tdOrderValArr = _GetOrderTdValueArray(trJqObjArr, tdIndex, options.ValAttr, options.DataType);
var sort_len = tdOrderValArr.length - 1;
var isExchanged = false, compareOper = options.Desc ? ">" : "<";
for (var i = 0; i < sort_len; i++) {
isExchanged = false;
for (var j = sort_len; j > i; j--) {
if (eval(tdOrderValArr[j] + compareOper + tdOrderValArr[j - 1])) {
_ExchangeArray(tdOrderValArr, j);
//交流行对象在数组中的顺序
_ExchangeArray(trJqObjArr, j);
isExchanged = true;
}
}
//一遍相比较过后若无开展置换则脱离循环
if (!isExchanged)
break;
}
_initConfig.IsLazyMode && (_trJqObjArray_Obj[tdIndex] = trJqObjArr);
}
if (trJqObjArr) {
if (options.Toggle) {
_initConfig.IsLazyMode && isExist_trJqObjArr && trJqObjArr.reverse();
options.Desc = !options.Desc;
}
_ShowTable(trJqObjArr);
}
}
/**
* 展现排序后的报表
* @private
* @param trJqObjArr:排序后的tr对象数组
**/
function _ShowTable(trJqObjArr) {
_tbodyObj.html("");
for (var n = 0, len = trJqObjArr.length; n < len; n++) {
_tbodyObj.append(trJqObjArr[n]);
$.isFunction(_initConfig.OnShow) && (_initConfig.OnShow(n, trJqObjArr[n], _tbodyObj));
}
}
/**
* 调换数组中项的法子
* @private
* @param array:数组,j:调换数组项的尾项索引
**/
function _ExchangeArray(array, j) {
var temp = array[j];
array[j] = array[j - 1];
array[j - 1] = temp;
}
/**
* 加多排序情势(准绳)的章程
* @private
* @param tdVal:排系列的值,td_dataType:排类别的值类型
**/
function _GetValue(tdVal, td_dataType) {
switch (td_dataType) {
case "int":
return parseInt(tdVal) || 0;
case "float":
return parseFloat(tdVal) || 0;
case "date":
return Date.parse(tdVal) || 0;
case "string":
default:
return tdVal.toString() || "";
}
}
/**
* 增多排序情势(准则)的法子
* @private
* @param obj:排序触发(标签)的指标或id,index:要排种类所在的列索引,options:排序准绳设置对象(如:DataType...)
**/
function _SetOrder(obj, index, options) {
var orderSettings = {
ValAttr: false, //排种类的取值属性,默以为:innerText
DataType: "string", //排体系的值类型(可取值:int|float|date|string)
OnClick: null, //(点击)排序时接触的法门
Desc: true, //(是不是是降序)排序格局,私下认可为:降序
Toggle: true, //切换排序格局
DefaultOrder: false //是或不是是默许的排序格局
};
$.extend(orderSettings, options);
orderSettings.DataType = orderSettings.DataType.toLowerCase();
obj = _GetJqObjById(obj);
//绑定触发排序的事件
obj.bind("click", function () {
_Sort(index, orderSettings);
$.isFunction(orderSettings.OnClick) && orderSettings.OnClick();
});
orderSettings.DefaultOrder && _Sort(index, orderSettings);
}
var _api = {
Init: function (obj, tBodyIndex, options) {
if (obj == null || typeof (obj) == undefined) {
alert("TableOrder初叶化参数为空或有误!");
return;
}
_tableObj = _GetJqObjById(obj);
_tBodyIndex = tBodyIndex || 0;
_tbodyObj = _tableObj.find("tbody:eq(" + _tBodyIndex + ")");
options = options || {};
_initConfig = {
IsLazyMode: true, //是或不是是懒惰方式,默感觉:true
OnShow: null //排序后表格展现时的法子,params:trIndex,trJqObj,tbodyObj
};
$.extend(_initConfig, options);
_trJqObjArray_Obj = null;
},
SetOrder: function (obj, index, options) {
if (_tableObj == null) {
alert("_tableObj尚未初阶化!");
return;
}
_SetOrder(obj, index, options);
}
};
window.TableOrderOper = _api;
})();

其行使如下:

复制代码 代码如下:

<table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable">
<thead>
<tr>
<td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td>
<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
原稿地址: cnblogs know

您只怕感兴趣的文章:

  • 33种Javascript 表格排序控件搜集
  • javascript 表格排序和表头浮动作效果果(扩充SortTable)
  • js 静态HTML表格排序成效完成
  • js 表格排序(编辑+拖拽+缩放)
  • JavaScript Sort 表格排序
  • JS达成HTML表格排序功用
  • javascript二种数据类型表格排序代码分析
  • JavaScript落实表格排序方法
  • javascript贯彻表格排序 编辑 拖拽 缩放
  • tablesorter.js表格排序使用方式(帮助中文排序)
  • JS落成简单表格排序操作示例

本文由今晚最快开奖现场直播发布于最快开奖计算机,转载请注明出处:高效简洁

关键词:

尺寸深切精晓

概念 引自维基百科:依据由万维网结盟(W3C)于一九九八年发行并于一九九八年修订的CSS1所钦命的,当任意贰个块级...

详细>>

函数概念自己通晓及示范

此文适合JavaScript入门级选手阅读,高手就可以飘过了。 先扯点闲话。在中国,有这么一种现象:不管什么词或者概念...

详细>>

showModelDialog的使用方法示例详解

前两日接到这样一个职务:在顾客上传附件,供给校验顾客上传附属类小部件中身份ID新闻,假如存在错误音信须要将...

详细>>

call方法详细介绍,函数的用法表明

call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用三个目标的四个办法,以另三个对象替换当前目的。 call 方法...

详细>>