网上找了个表格排序,不过升序和降序存在问题,排序时间不对,因此,写了一个表格排序插件
可以根据任意字段进行排序,由于是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);
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
