本人在工作中曾使用js实现过用鼠标拖动表格的行实现重新排序的功能。当时写了不少的js代码。最近发现jquery ui也能实现这个功能,而且很方便,真后悔当时不知道有这么个好东东。好,现在介绍下如何使用jquery ui来实现。
引入的js文件
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
页面元素
<div id="div_tbl" style="position:absolute;left:100px;">
<table cellspacing="1" cellpadding="0">
<thead>
<tr>
<th>姓名</th><th>性别</th><th>学号</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>a</td><td>男</td><td>2</td>
</tr>
<tr id="2">
<td>b</td><td>男</td><td>3</td>
</tr>
<tr id="3">
<td>bv</td><td>男</td><td>1</td>
</tr>
</tbody>
</table>
</div>
具体代码
<script type="text/javascript">
$(function(){
//屏蔽屏幕的右键功能,一般来说只要在屏幕点击鼠标右键,浏览器不会再显示菜单
$(document).bind("contextmenu", function() { return false; })
//一般来说,如果显示了输入过滤条件的文本框,只要用户点击该框以外的地方,
//该框会消失,因此绑定了文档的鼠标点击事件
$(document).mousedown(function(e){
if($('#div_text'))
$('#div_text').remove();
});
$("#char").keyup(function(){
$("tbody>tr").hide();
$("tbody>tr>:nth-child(1):contains('"+$(this).val()+"')").each(function(){
$(this).parent().show();
});
});
//根据列值实现过滤功能
$('th').mousedown(function(e){
//如果是点击鼠标左键或者中键,则不显示文本框
//上文曾经定义屏蔽屏幕的右键功能$(document).bind("contextmenu"...
//请留意,这里定义的是mousedown
if(e.which=='1' || e.which=='2') return;
//获取列标对象,以及它的相对于浏览器左边的距离
$_th=$(this);
var offset = $_th.offset();
var left= offset.left;
var top=offset.top;
//如果对着列标点击右键时,
//存在输入过滤条件的文件框,则把它所在的层删除
if($('#div_text'))
$('#div_text').remove();
//创建输入过滤条件的文本框以及它所在的层,并把它们加到文档中
$_div_text=$("<div id='div_text' style='position:absolute;'><input id='txt' value=''></input></div>");
$("body").append($_div_text);
//定义输入过滤条件的层的对于浏览器的实际位置
//让这个层一定出现在用户点击的列标上方
$_div_text
.css({
"top":(top-$("#div_text").height())+"px",
"left":(left)+"px"
});
//定义过滤条件输入框的键盘输入事件
//如果用户按了回车,就根据过滤条件来过滤表格的行
$('#txt').keydown(function(event){
if(event.keyCode == 13){
//获取用户鼠标右击的列标题在tr中的index值
var index= $_th.index();
//先把所有相关行隐藏
$("tbody>tr").hide();
//找到符合用户的过滤条件td集合
//循环这个td集合,找到它们所在的tr,让tr显示出来
$("tbody>tr>:nth-child("+(index+1)+"):contains('"+$(this).val()+"')").each(function(){
$(this).parent().show();
});
//执行完过滤操作后,隐藏过滤条件输入框
$(this).remove();
}
});
//由于上文绑定了文档的mousedown事件。由于事件冒泡的作用下,
//当用户点击了文本档后,这个事件会往上冒泡到文档处。因此无输入过滤条件了
//所以当用户点击这个文本框后,阻止mousedown事件往上冒
$('#txt').mousedown(function(e){e.stopPropagation();});
//由于上文绑定了文档的mousedown事件。由于事件冒泡的作用下,
//当文本框显示后(或者未等它完全显示出来),列标题的mousedowng事件
//就冒到文档处了,文档的mousedown就把这个刚创建的文本框给干掉
//所以当用户点击列标题后,阻止mousedown事件往上冒
e.stopPropagation();
});
//实现拖动行重新排序功能
$("tbody").sortable({stop:function(event, ui){
//stop事件是在完成重新排序后触发的事件
//在此只简单显示被拖放行的id值
alert(ui.item.attr("id"));
}});
$("tbody").disableSelection();
//区分奇偶行背景色
$("tbody>tr:odd").css("background","red");
$("tbody>tr:even").css("background","green");
});
</script>