一个前端table表头排序表头拖动宽度的demo

做前端的开发有五年多了，今天上传一个关于table点击表头排序和拖动左右可以改变列的宽度的demo给加入前端开发的新手们参考参考。

代码如下:

 

<script src="http://ajax./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
    
</style>
<table cellspacing="1" cellpadding="1" width="100%" id="listSort">
    <thead>
        <tr>
        <td style="border:1px dotted silver">选择</td>
            <td style="border:1px dotted silver" class="order">序号</td>
            <td style="border:1px dotted silver" class="order">教师编号</td>
            <td style="border:1px dotted silver" class="order">教师姓名</td>
            <td style="border:1px dotted silver" class="order">教师性别</td>
            <td style="border:1px dotted silver">操作</td>
        <tr>
    </thead>
    <tbody>
        <tr>
          <td style="border:1px dotted silver"><input type="checkbox" value="99" name="delTeacher[]"></td>
            <td style="border:1px dotted silver">1</td>
            <td style="border:1px dotted silver">99</td>
            <td style="border:1px dotted silver">liwen</td>
            <td style="border:1px dotted silver">男</td>
            <td style="border:1px dotted silver"><a href="/teacherManage/add?tno=99">编辑</a>  <a href="/teacherManage/delete?tno=99">删除</a></td>
      </tr><tr>
              <td style="border:1px dotted silver"><input type="checkbox" value="s001" name="delTeacher[]"></td>
            <td style="border:1px dotted silver">2</td>
            <td style="border:1px dotted silver">s001</td>
            <td style="border:1px dotted silver">s001</td>
            <td style="border:1px dotted silver">男</td>
            <td style="border:1px dotted silver"><a href="/teacherManage/add?tno=s001">编辑</a>  <a href="/teacherManage/delete?tno=s001">删除</a></td>
      </tr><tr>
              <td style="border:1px dotted silver"><input type="checkbox" value="k001" name="delTeacher[]"></td>
            <td style="border:1px dotted silver">3</td>
            <td style="border:1px dotted silver">k001</td>
            <td style="border:1px dotted silver">aaaa1</td>
            <td style="border:1px dotted silver">女</td>
            <td style="border:1px dotted silver"><a href="/teacherManage/add?tno=k001">编辑</a>  <a href="/teacherManage/delete?tno=k001">删除</a></td>
      </tr><tr>
              <td style="border:1px dotted silver"><input type="checkbox" value="007" name="delTeacher[]"></td>
            <td style="border:1px dotted silver">4</td>
            <td style="border:1px dotted silver">007</td>
            <td style="border:1px dotted silver">詹姆斯邦德</td>
            <td style="border:1px dotted silver">男</td>
            <td style="border:1px dotted silver"><a href="/teacherManage/add?tno=007">编辑</a>  <a href="/teacherManage/delete?tno=007">删除</a></td>
      </tr><tr>
              <td style="border:1px dotted silver"><input type="checkbox" value="teachera" name="delTeacher[]"></td>
            <td style="border:1px dotted silver">5</td>
            <td style="border:1px dotted silver">teachera</td>
            <td style="border:1px dotted silver">老师A</td>
            <td style="border:1px dotted silver">男</td>
            <td style="border:1px dotted silver"><a href="/teacherManage/add?tno=teachera">编辑</a>  <a href="/teacherManage/delete?tno=teachera">删除</a></td>
      </tr>
      <tr>
              <td style="border:1px dotted silver"><input type="checkbox" value="k002" name="delTeacher[]"></td>
            <td style="border:1px dotted silver">6</td>
            <td style="border:1px dotted silver">k002</td>
            <td style="border:1px dotted silver">aaa2</td>
            <td style="border:1px dotted silver">男</td>
            <td style="border:1px dotted silver"><a href="/teacherManage/add?tno=k002">编辑</a>  <a href="/teacherManage/delete?tno=k002">删除</a></td>
    
     </tr>
 </tbody>
</table>
<script>
    
    function SortTable(id)
    {
        this.init(id);
    }
    SortTable.prototype =
    {
        data:[],
        _table:null,
        norder:[],
        _moveOffset:0,
        init:function(id)
        {
            
            this._table = $("#"+id);
            var trs = this._table.find("tbody tr");
            var _this = this;
            trs.each(function(){
                var row = [];
                $(this).children().each(function(){
                    row.push($(this).html());
                });
                _this.data.push(row);
                
            });
            
            var theads = this._table.find("thead tr").children();
            var _this = this;
            
            theads.each(function(idl){
                if($(this).attr("class") && $(this).attr("class").indexOf("order") >= 0)
                {
                    if($(this).children("a").length <= 0)
                    {
                        var slink = $("<a href='javascript:'></a>");
                        slink.text($(this).text());
                        $(this).text("");
                        $(this).append(slink);
                    }
                    $(this).children("a").css({textDecoration:"underline",color:"#185b9e",cursor:"pointer"});
                    $(this).children("a").click(function(){
                        _this.sort(idl);
                    });
                }
                if(idl >= theads.length-1)
                    return;
                //拖曳宽度初始化
                var dra = $("<div></div>").appendTo(this);
                dra.css({position:"absolute",width:"2px",float:"right",
                                borderLeft:this.style.borderLeft,
                                borderRight:this.style.borderRight,
                                cursor:"col-resize",backgroundColor:"#fff"});
                dra.attr("index",idl);
                
                var td = $(this);
                td.css("width",td.width());
                var tdoffset = td.offset();
                dra.css({height:td.height(),top:tdoffset.top+1,left:(tdoffset.left+td.width()+2)});
                td.click(function(_e){
                    var et = _e?_e:event;
                    et.stopPropagation();
                    return false;
                });
                dra.mousedown(function(_event){
                    //alert(_event.pageX);
                    _this._moveOffset = {index:$(this).attr("index"),y:_event.pageY,x:_event.pageX,tdwidth:td.width(),ntdwidth:td.next().width()};
                });
                $(_this._table).mouseup(function(){
                    _this._moveOffset=0;
                });
                $(_this._table).mousemove(function(_event){
    
                    
                    if(!_this._moveOffset)
                        return;
                    var _width = _event.pageX-_this._moveOffset.x;
                    
                    var dratd = theads[_this._moveOffset.index];
                    
                    $(dratd).css("width",_this._moveOffset.tdwidth+_width);
                    ntd = $(dratd).next();
                    ntd.css("width",_this._moveOffset.ntdwidth-_width);
                    var tdoffset = td.offset();
                    dra.css({height:td.height(),top:tdoffset.top+1,left:(tdoffset.left+td.width()+2)});
                });
            })
        },
        sort:function(index)
        {
            var isOrder = true;
            
            while(isOrder)
            {
                isOrder = false;
                for(var i = 0;i < this.data.length-1;i++)
                {
                    
                    if(!this.norder[index])
                    {
                        
                        if(this.data[i][index] > this.data[i+1][index])
                        {
                            var tmp = this.data[i];
                            this.data[i] = this.data[i+1];
                            this.data[i+1] = tmp;
                            isOrder = true;
                        }
                    }
                    else
                    {
                        
                        if(this.data[i][index] < this.data[i+1][index])
                        {
                            var tmp = this.data[i];
                            this.data[i] = this.data[i+1];
                            this.data[i+1] = tmp;
                            isOrder = true;
                        }
                    }
                }
            }
            if(!this.norder[index])
                this.norder[index] = true;
            else
                this.norder[index] = false;
            
            this.fillTable();
        },
        fillTable:function()
        {
            var tbody = this._table.find("tbody")
            tbody.children().remove();
            for(var i = 0;i < this.data.length;i++)
            {
                var row = $("<tr></tr>").appendTo(tbody);
                for(var j = 0; j < this.data[i].length; j++)
                {
                    
                    row.append("<td style='border:1px dotted silver'>"+ this.data[i][j] +"</td>");
                }
            }
        }
    }
    
    var mytable =  new SortTable("listSort");
</script>

使用方法:

1.引入http://ajax./ajax/libs/jquery/1.4.2/jquery.min.js库

2.给table定义id,table必须含有thead和tbody，

3.给需要排序的td加入class="order"

4.初始化table对像,如var mytable =  new SortTable("listSort");

前端技术开发交流QQ群:9439737