table鼠标移动拖动点击排序

最新推荐文章于 2024-03-22 13:46:28 发布

程序员小贝

最新推荐文章于 2024-03-22 13:46:28 发布

阅读量1.5k

点赞数

实现表格的hover效果点击效果拖动排序，原生态jq效果，简单易用，不多说了，直接上代码

<!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>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style type="text/css">
.tr-hover { background-color: #CCC; }
.tr-selected { background-color: #666; } .tr-border { border: solid 1px #F00; } </style> </head> <body> <table width="500" border="1" cellpadding="0" cellspacing="0" id="table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>网址</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Lupo</td>
            <td>
                <select name="">
                  <option value="1">男</option>
                  <option value="0">女</option>
                </select>
            </td>
            <td><input type="text" value="http://bbs.it-home.org" /></td>
        </tr>
        <tr>
            <td>2</td>
            <td>andy</td>
            <td>
                <select name="">
                  <option value="1">男</option>
                  <option value="0">女</option>
                </select>
            </td>
            <td><input type="text" value="http://bbs.it-home.org"  /></td>
        </tr>
        <tr>
            <td>3</td>
            <td>lilian</td>
            <td>
                <select name="">
                  <option value="1">男</option>
                  <option value="0">女</option>
                </select>
            </td>
            <td><input type="text" value="http://bbs.it-home.org"  /></td>
        </tr>
        <tr>
            <td>4</td>
            <td>jinker</td>
            <td>
                <select name="">
                  <option value="1">男</option>
                  <option value="0">女</option>
                </select>
            </td>
            <td><input type="text" value="http://bbs.it-home.org"  /></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
/**
*表格插件 实现表格的hover效果 点击效果 拖动排序
*@encode UTF-8
*@param {boolen} hover     是否打开hover效果 true|false
*@param {boolen} selected    是否打开selected效果 true|false
*@param {boolen} rowMove    是否打开移动排序效果 true|false
*@example:
    $("#table").initTable({
        hover:true,
        selected:false,
        rowDrag:true,
        rowMove:true
    })
    表格需包含thead,tbody2部分

*/
(function ($) {
    $.fn.extend({
        initTable:function (o) {
            //接受配置参数并设定默认值
            var it = this,
                hover = o.hover||false,
                selected = o.selected||false,
                rowDrag = o.rowDrag||false;
                rowMove =rowDrag?true:(o.rowMove||true),
                tbody = $(it).children("tbody"),
                tr = $(it).children("tbody").children("tr");
            //添加事件前先移除对象所有的事件
            it.undelegate();
            //tr的鼠标移动效果
            if (hover) {
                tbody.delegate("tr", "mouseenter", function () {
                    $(this).addClass("tr-hover");
                }).delegate("tr", "mouseleave", function () {
                    $(this).removeClass("tr-hover");
                })
            }
            //tr的选中效果
            if (selected) {
                tbody.delegate("tr","click",function(e){
                    if(e.target.tagName.toLowerCase()=="td"){
                        tbody.children(".tr-selected").removeClass('tr-selected');
                        $(this).addClass('tr-selected');
                    }
                })
            }
            //表格行的移动效果
            if(rowMove){
                var targetEl,mouseDown=false;
                tbody.delegate("tr", "mousedown", function(e){
                    //只对td对象触发
                    if(e.target.tagName.toLowerCase() === "td"){
                        //按下鼠标时选取行
                        targetEl = this,mouseDown = true; console.log(this);
                        $(this).css("cursor","move");
                        return false;
                    }
                }).delegate("tr", "mousemove", function(e){
                      //移动鼠标
                      if (mouseDown) {
                          //释放鼠标键时进行插入
                          if (targetEl != this) {
                              if ($(this).index()>$(targetEl).index()){
                                  $($(this)).after(targetEl);
                              } else {
                                  $($(this)).before(targetEl);
                              }
                          }
                      }
                      return false;
                }).delegate("tr", "mouseup", function (e) {
                    $(tr).css("cursor","default");
                    targetEl = null;
                })
                //鼠标离开表格时,释放所有事件
                it.delegate("tbody", "mouseleave", function (e) {
                    $(tr).css("cursor","default");
                    targetEl = null;
                    mouseDown = false;
                })
            }
        }
    })
})(jQuery)
$("#table").initTable({
    hover:true,
    selected:true,
    rowMove:true
})
</script>
</body>
</html>

源码打包下载地址： http://bbs.it-home.org/thread-3001-1-1.html 文章转载自程序员之家 web频道