本文介绍如何利用jQuery实现网页表格的行拖拽排序功能，并将排序后的状态保存到Cookie中以便下次访问时恢复布局。通过具体代码示例展示了拖拽排序的实现细节，包括设置拖拽对象样式、占位符样式等。
引入js文件
<script type="text/javascript" src="component/jquery.js"></script>//1.8版本
<script type="text/javascript" src="component/jquery.ui.js"></script>//1.10.4
<script type="text/javascript" src="component/jquery.cookie.js"></script>//
样式：
<style type="text/css">
.ui-state-highlight{
background-color: yellow;
}
</style>
自定义脚步
<script type="text/javascript">
$(function(){
//alert($.cookie("the_cookie"));
if($.cookie("the_cookie")!=null){
//读取cookie
var data = eval($.cookie("the_cookie"))+"";//data对象转变为字符串类型
//alert(data);
var i = 0;
var containers = $(".tr_obj","#myTable");
containers.each(function(index,container){
//container==this
var modules = $(".td_obj",container);
modules.each(function(index,module){
//alert($(module)[0].className);
$(module).html(data.split(",")[i]);
i++;
});
})
}
//设置拖拽对象的td的宽度，解决拖拽时td样式丢失问题
var fixHelper = function(e,tr){
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index){
$(this).width($originals.eq(index).width());
});
return $helper;
};
//tr排序
$("#myTable").sortable({
items:">tbody>tr:gt(0)",//设置排序的元素集合
cursor:"pointer",//移动是鼠标样式
helper:fixHelper,//拖拽的对象
placeholder:"ui-state-highlight",//空白占位符的样式
});
})
//排序保存到数据库是传值，数据库根据参数处理排序
function sort(){
//排序对象id定义格式xx1_xx2
var seri = $("#myTable").sortable("serialize");//键值对格式
var arr = $("#myTable").sortable("toArray");//数组格式
alert(seri);
alert(arr);
}
//保存排序后的数据，并保存到cookie中
function saveLayOut(){
//字符串数组对象
var data = [];
//在id为myTable的table获取class为tr_obj的元素
var containers = $(".tr_obj","#myTable");
containers.each(function(index,container){
//container==this
var modulesData = [];
var modules = $(".td_obj",container);
modules.each(function(index,module){
//alert($(module)[0].className);
modulesData.push($(module).html());
});
data.push("[\""+modulesData.join("\",\"")+"\"]");
})
var json = "["+data.join(",")+"]";
//alert(json);
//设置cookie的变量名为”the_cookie“，值为json变量的值,expires:cookie的有效期
//cookie有效期默认为天，改为十分秒需要修改cookie.js
/*
if (typeof options.expires === 'number') {
//按天数计算
//var days = options.expires, t = options.expires = new Date();
//t.setDate(t.getDate() + days);
//按秒计算
var seconds = options.expires, t = options.expires = new Date();
t.setTime(t.getTime()+seconds);
}*/
$.cookie("the_cookie",json,{expires:1*60*1000});
}
</script>
<body>
<table width="500" id="myTable" border="1" cellpadding="0" cellspacing="0">
<tr class="tr_obj">
<td class="td_obj" width="10%">序号</td>
<td class="td_obj" width="20%">姓名</td>
<td class="td_obj" width="30%">地址</td>
<td class="td_obj" width="40%">电话</td>
</tr>
<tr class="tr_obj" id="sort_1">
<td class="td_obj" width="10%">1</td>
<td class="td_obj" width="20%">aa</td>
<td class="td_obj" width="30%">aa1</td>
<td class="td_obj" width="50%">aa2</td>
</tr>
<tr class="tr_obj" id="sort_2">
<td class="td_obj" width="10%">2</td>
<td class="td_obj" width="20%">bb1</td>
<td class="td_obj" width="30%">bb2</td>
<td class="td_obj" width="50%">bb3</td>
</tr>
<tr class="tr_obj" id="sort_3">
<td class="td_obj" width="10%">3</td>
<td class="td_obj" width="20%">cc1</td>
<td class="td_obj" width="30%">cc2</td>
<td class="td_obj" width="50%">cc3</td>
</tr>
<tr class="tr_obj" id="sort_4">
<td class="td_obj" width="10%">4</td>
<td class="td_obj" width="20%">dd1</td>
<td class="td_obj" width="30%">dd2</td>
<td class="td_obj" width="50%">dd3</td>
</tr>
</table>
<input onclick="sort()" type="button" value="保存排序"/>
<input onclick="saveLayOut()" type="button" value="设置cookie保存排序"/>
</body>
扫一扫
1465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
