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>

 

posted @ 2013-01-06 23:04  solq  阅读(1021)  评论(0)    收藏  举报