jquery table thead drop

 1 (function($){

 2     $.triggerDropTableThead=function(obj){

 3         var ths=$(obj).find("th");

 4         ths.unbind("ondrop");

 5         ths.bind("ondrop",function(){    

 6             var isDragging = false,

 7                 min_width=50;

 8             var _this=$(this)

 9                 .mousedown(function() {            

10                     isDragging=true;

11                     $(window).unbind("mouseup").unbind("mousemove");

12                     $(window).mouseup(function() {

13                         isDragging = false;

14                         $(window).unbind("mouseup").unbind("mousemove");

15                         //_this.unbind("mousemove");

16                     })

17                     .mousemove(function(e) {

18                         if(isDragging){

19                             //var x = e.pageX - this.offsetLeft;

20                             //var y = e.pageY - this.offsetTop;

21                             var x=e.pageX-_this.offset().left;

22                             if(x>=min_width){

23                                 _this.width(x);

24                                 //console.log(x,"mousemove");

25                             }                            

26                         }                        

27                     });

28                 });

29             

30         });

31         ths.trigger("ondrop");

32     }

33     $.dropTableThead=function(obj){

34         $.triggerDropTableThead(obj);

35     }    

36 })($);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style>

body,ul,ul,li,ol{

paddin:0;

margin:0;

}

table{

height:100%;

table-layout:fixed;

width:70%;

}

table th{

font-size:12px;

}

table td{

font-size:10px;

}

#left,#right{

    display:block;

    float:left;

    height:100%;

}

#left{

width:70%;

}



#view th,#view td{

background:#ccc;

border: solid green 1px; 

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

-o-text-overflow: ellipsis;

}

#view th:hover{

cursor:w-resize;

}

</style>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/dropTableThead.js"></script>

<script type="text/javascript">

//view 处理

window.onload=function(){

    for(var i =0;i<100;i++){

        do_something();

    }

    $.dropTableThead("#view thead");

}



function do_something(msg){



    var o={

        url:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

    };    

    

    var html='<tr><td>{url}</td><td>{mehod}</td><td>{status}</td><td>{mimeType}</td><td>{bodySize}</td><td>{time}</td></tr>';

    html=html.replace(/\{(\w+)\}/gm,function(a,b){

        if(o[b]!=null)

            return o[b];

        return b;

    });

     

    $('#view tbody').append(html);        

}



</script>

</head>

<body>

<body>

<div id="left">

    <table id="view">    

        <thead><tr>

            <th width="280">url</th>

            <th width="80">mehod</th>

            <th width="70">status</th>

            <th width="130">type</th>

            <th width="80">size</th>

            <th width="100">time</th>

        </tr></thead>

        <tbody></tbody>

    </table>

</div>    

<div id="right">

    right

</div>    

</body>

</body>

</html>

 

你可能感兴趣的:(jquery)