首頁 > 開發者 > JavaScript
網上找了個表格排序,不過升序和降序存在問題,排序時間不對,因此,寫了一個表格排序外掛程式
可以根據任意欄位進行排序,由於是js排序,因此是無重新整理,並且速度比較快
預設使用例子:
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.table.sort.js"></script>
$(function(){
$(".DataGrid").sort();
});
帶參數例子:
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.table.sort.js"></script>
$(function(){
$(".DataGrid").sort({
'ascImgUrl':'/static/images/bullet_arrow_up.png',
'descImgUrl':'/static/images/bullet_arrow_down.png',
'engRow':-1,
'isHeaderTh':true
});
});
參數Api詳解:
參數名 類型 描述
ascImgUrl string 升序圖片地址
descImgUrl string 降序圖片地址
endRow int 最後一行(負數代表倒數第幾行)
isHeaderTh boolean 頭部標題是否是th
帶html例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>活動編輯器</title>
<link rel="stylesheet" href="css/editorBase.css" type="text/css">
<link rel="stylesheet" href="css/kickstart-buttons.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.table.sort.js"></script>
<script type="text/javascript" src="js/artDialog.js?skin=blue"></script>
<script type="text/javascript">
$(function(){
$(".DataGrid").sort({
'ascImgUrl':'images/bullet_arrow_up.png', //升序圖片
'descImgUrl':'images/bullet_arrow_down.png', //降序圖片
'endRow':-1 //需要排序的最後一行 -1代表 倒數第二行
});
//全選
$("#checkAll").click(function(){
$(":checkbox").attr("checked",$(this).attr("checked"));
});
});
</script>
</head>
<body>
<form action="/index.php?app=editor&m=Common&action=outputConfig" method="post">
<font color="red">新活動不能直接使用新活動配置表,只能建立或者複製活動</font>
<table class="DataGrid" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan="9">活動列表</th>
</tr>
<tr>
<th><input type="checkbox" id="checkAll"></input></th>
<th sort="true">ID</th>
<th sort="true">活動名</th>
<th sort="true">類別</th>
<th sort="true">開始時間</th>
<th sort="true">結束時間</th>
<th width="12%">操作</th>
</tr>
</thead>
<tbody>
<input type="hidden" name="sortId[]" value="668" />
<tr class="odd">
<td align="center"><input name="id[]" class="checkIds" type="checkbox" value=668></input></td>
<td>668 </td>
<td>
特殊類測試
</td>
<td>特殊類 </td>
<td>2013-04-19 16:50:00 </td>
<td>2013-04-10 16:50:00 </td>
<td>
<a href="/index.php?app=editor&m=Special&action=save&id=668"><font color="#FF0000">修改</font></a>
| <a href="/index.php?app=editor&m=Common&action=copy&id=668"><font color="#FF0000">複製</font></a></font></a>
| <a href="/index.php?app=editor&m=Common&action=delete&id=668" class="delete">刪除</font></a>
</td>
</tr>
<input type="hidden" name="sortId[]" value="667" />
<tr>
<td align="center"><input name="id[]" class="checkIds" type="checkbox" value=667></input></td>
<td>667 </td>
<td>
<font color=red>測試</font>
</td>
<td>熱門排行榜類 </td>
<td>2013-04-01 16:41:00 </td>
<td>2013-04-11 16:41:00 </td>
<td>
<a href="/index.php?app=editor&m=Rank&action=save&id=667"><font color="#FF0000">修改</font></a>
| <a href="/index.php?app=editor&m=Common&action=copy&id=667"><font color="#FF0000">複製</font></a></font></a>
| <a href="/index.php?app=editor&m=Common&action=delete&id=667" class="delete">刪除</font></a>
</td>
</tr>
<input type="hidden" name="sortId[]" value="666" />
<tr class="odd">
<td align="center"><input name="id[]" class="checkIds" type="checkbox" value=666></input></td>
<td>666 </td>
<td>
<font color=grey>sadasd</font>
</td>
<td>熱門排行榜類 </td>
<td>2013-04-18 10:16:00 </td>
<td>2013-04-09 10:16:00 </td>
<td>
<a href="/index.php?app=editor&m=Rank&action=save&id=666"><font color="#FF0000">修改</font></a>
| <a href="/index.php?app=editor&m=Common&action=copy&id=666"><font color="#FF0000">複製</font></a></font></a>
| <a href="/index.php?app=editor&m=Common&action=delete&id=666" class="delete">刪除</font></a>
</td>
</tr>
<input type="hidden" name="sortId[]" value="665" />
<tr>
<td align="center"><input name="id[]" class="checkIds" type="checkbox" value=665></input></td>
<td>665 </td>
<td>
<font color=red>測試</font>
</td>
<td>特殊類 </td>
<td>2013-03-30 17:56:00 </td>
<td>2013-05-14 17:56:00 </td>
<td>
<a href="/index.php?app=editor&m=Special&action=save&id=665"><font color="#FF0000">修改</font></a>
| <a href="/index.php?app=editor&m=Common&action=copy&id=665"><font color="#FF0000">複製</font></a></font></a>
| <a href="/index.php?app=editor&m=Common&action=delete&id=665" class="delete">刪除</font></a>
</td>
</tr>
<input type="hidden" name="sortId[]" value="664" />
<tr class="odd">
<td align="center"><input name="id[]" class="checkIds" type="checkbox" value=664></input></td>
<td>664 </td>
<td>
<font color=red>測試</font>
</td>
<td>特殊類 </td>
<td>2013-03-30 17:56:00 </td>
<td>2013-05-14 17:56:00 </td>
<td>
<a href="/index.php?app=editor&m=Special&action=save&id=664"><font color="#FF0000">修改</font></a>
| <a href="/index.php?app=editor&m=Common&action=copy&id=664"><font color="#FF0000">複製</font></a></font></a>
| <a href="/index.php?app=editor&m=Common&action=delete&id=664" class="delete">刪除</font></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td colspan="11"><input type="submit" id="saveSort" value="儲存"></td>
</tr>
</tfoot>
</table>
<br />
</form>
</body>
</html>
jquery.table.sort.js代碼:
/**
* jquery表格外掛程式
* @author ZouHao
* @param ascImgUrl 升序圖片地址
* @param descImgUrl 降序圖片地址
* 例子:
* 1:預設使用文法
* $("table").sort();
* 2:參數使用文法
* $("table").sort({
* 'ascImgUrl':'/static/images/bullet_arrow_up.png',
'descImgUrl':'/static/images/bullet_arrow_down.png',
'endRow':0, //最後一行
'isHeaderTh':true //頭部是th或者td
* });
*/
;(function ($) {
$.fn.sort = function (options) {
var settings = $.extend({
'ascImgUrl':'/static/images/bullet_arrow_up.png', //升序圖片
'descImgUrl':'/static/images/bullet_arrow_down.png', //降序圖片
'endRow':0, //最後一行
'isHeaderTh':true //頭部是th或者td
},options);
init(this);
function init(p){
//初始化一些變數
var node=settings.isHeaderTh?'th':'td';
var trList=$(p).find("tr "+node+"[sort='true']");
if(settings.endRow==0){
settings.endRow=$(p).find("tr").size();
}else if(settings.endRow<0){
settings.endRow=$(p).find("tr").size()+settings.endRow;
}else{
settings.endRow=$(p).find("tr").size()-settings.endRow;
}
//初始化點擊表格頭部事件
trList.click(function(){
//擷取當前行數
settings.startRow=$(this).parent().index();
settings.index=$(this).index();
if($(this).find("img").size()==2){
addImg(trList);
removeImg(this,'asc');
changeTableBody(p,'asc');
}else{
if($(this).find("img").attr("src")==settings.ascImgUrl){
addImg(trList);
removeImg(this,'desc');
changeTableBody(p,'desc');
}else{
addImg(trList);
removeImg(this,'asc');
changeTableBody(p,'asc');
}
}
});
//初始化頭部圖片
addImg(trList);
}
//將資料進行排序
function changeTableBody(p,sort){
data=new Array();
//所選的行
var trBodyList=$(p).find("tr:lt("+settings.endRow+"):gt("+settings.startRow+")");
trBodyList.each(function(i){
data[i]=new Array();
$(this).find("td").each(function(j){
data[i][j]=$(this).html();
});
});
data.sort(function(x, y){
if(sort=='asc'){
return x[settings.index].localeCompare(y[settings.index]);
}else{
return y[settings.index].localeCompare(x[settings.index]);
}
});
trBodyList.each(function(i){
$(this).find("td").each(function(j){
$(this).html(data[i][j]);
});
});
}
/**
* 為每個表格頭部添加圖片
*/
function addImg(trList){
trList.find("img").remove();
trList.append('<img src="'+settings.ascImgUrl+'" style="width:8px;height:8px;" /><img src="'+settings.descImgUrl+'" style="width:8px;height:8px;" />')
}
/**
* 移出當前點擊表格升序/降序圖片
*/
function removeImg(p,sort){
var imgUrl=sort=='desc'?settings.ascImgUrl:settings.descImgUrl;
$(p).find("img").each(function(){
if($(this).attr("src")==imgUrl){
$(this).remove();
return false;
}
});
}
};
})(jQuery);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
