JS-Demo2:JavaScript版TableGrid,表格头、分页表格冻结,表格头可拉动

来源:岁月联盟 编辑:exp 时间:2012-06-06

上两天写了一个关于表格头可以拖动:JS-Demo1:JavaScript实现表格列拖动http://www.2cto.com/kf/201206/134700.html

这次在拖动的效果上,实现表格头冻结等。上图:


代码比较长,感兴趣的朋友,不妨复制看看

代码:

[html]
  
<!DOCTYPE html> 
<html> 
  <head> 
    <title>表格冻结</title> 
    <style type="text/css"> 
        table{ 
            color: #000; 
            font: normal 12px 宋体,tahoma,arial,verdana,sans-serif; 
            table-layout:fixed; 
        } 
        #theadTable,#tfootTable tr{ 
            background-color: #CBDDF3; 
            border: 1px solid #7BBDFF; 
        } 
        td,th{ 
            white-space: nowrap; 
            overflow:hidden;  
        } 
        td{ 
            line-height: 16px; 
        } 
        .dragable{ 
            width: 3px; 
            height:100%;  
            cursor: col-resize; 
            /*下面3个样式与效果有一定关系,其他无所谓*/ 
            float: right;   
            position: relative; 
            right: 0px; 
        } 
    </style> 
    <!-- 
    <script type="text/javascript" src="/jxc/js/jQuery/jquery-1.7.2.js"></script>
     --> 
     
    <script type="text/javascript"> 
    /***************************************************************************/ 
    /** 
     * 为了方便看效果,写了个jQuery的简单实现,实际应用中,可以去掉这个,而引用jquery.js,无影响。 
     */ 
    function jQuery(expression){ 
        expression = expression.substring(1); 
        this[0] = document.getElementById(expression); 
        this.val = function(v){ 
            if(v!=undefined) this[0].value = v; 
            else return this[0].value; 
        } 
        return this; 
    } 
    window.$ = jQuery; 
    /***************************************************************************/ 
     
    var draging = false;            //是否拖拽中 
    var dragElement = null;     //当前拖拽的th 
    var offsetLeft = 0;             //当前拖拽的th与绝对左坐标 
    var verticalLine = undefined;   //竖线 
    var draggedWidth = 0;           //拖拽时th的宽度,当鼠标mouseup时,th的宽度为该值 
    function mousedown(){ 
        if(draging) return; 
        draging = true; 
        dragElement = window.event.srcElement.parentNode; 
        dragElement.theadtd = theadTable.rows(0).cells(dragElement.cellIndex); 
        dragElement.tfoottd = tfootTable.rows(0).cells(dragElement.cellIndex); 
        dragElement.tbodytd = {style:{}};//当表格中没有数据时,赋值这么一个对象,不引起js报错。 
        if(tbodyTable.rows.length>0)//当表格中有数据时 
            dragElement.tbodytd = tbodyTable.rows(0).cells(dragElement.cellIndex); 
         
        offsetLeft = dragElement.offsetLeft; 
        document.body.style.cursor = "col-resize"; 
        document.body.onselectstart = function(){return false;};//拖拽的时候,鼠标滑过字的时候,不让选中(默认鼠标选中字的效果,大家都知道) 
        if(verticalLine==undefined){ 
            verticalLine = createVerticalLine(); 
        } 
    } 
    function mouseup(){ 
        if(!draging) return; 
        draging = false; 
        document.body.style.cursor = "auto"; 
        document.body.onselectstart = function(){return true}; 
        verticalLine.style.display = "none"; 
        dragElement.style.width = draggedWidth; 
        dragElement.theadtd.style.width = draggedWidth; 
        dragElement.tbodytd.style.width = draggedWidth; 
        dragElement.tfoottd.style.width = draggedWidth; 
        dragElement = null; 
    } 
    function mousemove(){ 
        if(draging && dragElement){ 
            if(event.clientX-offsetLeft>0){ 
                draggedWidth = event.clientX-offsetLeft; 
                verticalLine.style.left = event.clientX+8; 
                verticalLine.style.display = "block"; 
            } 
        } 
    } 
  
    //创建触发拖动表格列的span:<span class="dragable" onmousedown="mousedown();"> </span> 
    function createSpan(){ 
        var span = document.createElement("span"); 
        span.className = "dragable"; 
        span.attachEvent("onmousedown",mousedown); 
        span.innerHTML = " "; 
        return span; 
    } 
  
    //创建拖动时的效果(竖线):<div style="z-index: 10; position: absolute; background-color: #c3c3c3; width: 6px; display: none; height: ?px; top: 24px; left: 608px"></div> 
    function createVerticalLine(){ 
        var div = document.createElement("div"); 
        div.style.position = "absolute"; 
        div.style.display = "none"; 
        div.style.backgroundColor = "#C3C3C3"; 
        div.style.width = "6px"; 
        div.style.height = tbodyDiv.style.height; 
        div.style.top = tbodyTable.offsetTop; 
        div.style.zIndex = "10"; 
        div.innerHTML = " "; 
        document.body.appendChild(div); 
        return div; 
    } 
    var mainDiv; 
    var theadDiv,tbodyDiv,tfootDiv; 
    var theadTable,tbodyTable,tfootTable; 
  
    window.onload = function(){ 
        mainDiv = $("#mainDiv")[0]; 
        theadDiv = $("#theadDiv")[0]; 
        tbodyDiv = $("#tbodyDiv")[0]; 
        tfootDiv = $("#tfootDiv")[0]; 
        theadTable = $("#theadTable")[0]; 
        tbodyTable = $("#tbodyTable")[0]; 
        tfootTable = $("#tfootTable")[0]; 
         
        /* dragable 效果 */ 
        //在theadTable中的th内容中添加span 
        var theadThs = theadTable.getElementsByTagName("th"); 
        for(var i=0;i<theadThs.length;i++) 
            theadThs[i].appendChild(createSpan()); 
         
        theadTable.style.width = tbodyTable.style.width = tfootTable.style.width = Math.max(theadTable.offsetWidth,tbodyTable.offsetWidth,tfootTable.offsetWidth); 
         
        var ths = theadTable.rows(0).getElementsByTagName("th"); 
        var tfs = tfootTable.rows(0).getElementsByTagName("td"); 
        var tds;//当表格中没有数据时,赋值这么一个对象,不引起js报错。 
        if(tbodyTable.rows.length>0){ 
            tds = tbodyTable.rows(0).getElementsByTagName("td"); 
        }else{ 
            tds = new Array(); 
            for(var i=0;i<ths.length;i++){ 
                tds[tds.length] = {style:{},offsetWidth:0}; 
            } 
        } 
        if(ths.length!=tds.length && tds.length!=tfs.length){ 
            alert("长度不一致"); 
        } 
        for(var i=0;i<ths.length;i++){ 
            var width; 
            if(ths[i].style.width) width = ths[i].style.width; 
            else if(ths[i].width) width = ths[i].width; 
            else width = Math.max(ths[i].offsetWidth,tds[i].offsetWidth,tfs[i].offsetWidth); 
            if(i!=ths.length-1) 
                ths[i].style.width = tds[i].style.width = tfs[i].style.width = width; 
        } 
    } 
  
    /** 
     * 当tfootdiv横向滚动时,theadDiv与tbodyDiv同时滚动。 
     * @param tfootDiv 
     */ 
    function togetherScroll(scrollingDiv){ 
        theadDiv.scrollLeft = scrollingDiv.scrollLeft; 
        tbodyDiv.scrollLeft = scrollingDiv.scrollLeft; 
        tfootDiv.scrollLeft = scrollingDiv.scrollLeft; 
    } 
    </script> 
</head> 
<body onmousemove="mousemove();" onmouseup="mouseup();"> 
    <span style="font-weight: bold;font-size: 14px;"> 
    JavaScript版TableGrid说明:<br> 
    1、暂时不支持表格跨行跨列<br> 
    2、暂时不支持表格冻结列<br> 
    </span> 
    <div id="mainDiv" style="height: 500px;width: 100%;"> 
        <div id="theadDiv" style="width:100%;height:16px;overflow-y:scroll;overflow-x:hidden;"> 
            <table id="theadTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:16px;border-style: solid;"> 
                <thead> 
                    <tr> 
                        <th style="width: 120px;">网站名称</th> 
                        <th style="width: 300px;">网站地址</th> 
                        <th width="50px;">用户名</th> 
                        <th width="50px;">密码</th> 
                        <th width="180px;">邮箱</th> 
                        <th>手机号码</th> 
                        <th>备注</th> 
                        <th>操作</th> 
                    </tr> 
                </thead> 
            </table> 
        </div> 
        <div id="tbodyDiv" style="width:100%;height:444px;overflow-y:scroll;overflow-x:hidden;background-color: #FAFAFA;" onscroll="togetherScroll(this)"> 
            <table id="tbodyTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;border-style: solid;"> 
                <tbody id="content"> 
                    <!--  
                        <tr> 
                            <td>Siuon's CSDN Blog</td> 
                            <td><a href="http://blog.csdn.net/xiaochunyong" target="_blank">http://blog.csdn.net/xiaochunyong</a></td> 
                            <td>Siuon</td> 
                            <td>123456</td> 
                            <td>xiaochunyong@gmail.com</td> 
                            <td>1862152####</td> 
                            <td>...</td> 
                            <td><a href="javascript:alert('修改');">修改</a> <a href="javascript:alert('删除');">删除</a></td> 
                        </tr> 
                     --> 
                </tbody> 
            </table> 
        </div> 
        <div id="tfootDiv" style="width:100%;height:40px;overflow-y:scroll;overflow-x:scroll;" onscroll="togetherScroll(this)"> 
            <table id="tfootTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:16px;border-style: solid;"> 
                <tfoot> 
                    <tr> 
                        <td> </td> 
                        <td> </td> 
                        <td> </td> 
                        <td style="text-align: right;">第一页 上一页</td> 
                        <td style="text-align: center;align:justify"><input type="text" style="width: auto;"><button type="button">Go</button></td> 
                        <td style="text-align: left;">下一页 最后一页</td> 
                        <td> </td> 
                        <td>1 - 30 共 30 条</td> 
                    </tr> 
                </tfoot> 
            </table> 
        </div> 
    </div> 
    <script type="text/javascript"> 
        //动态生成30行数据,可以把如下代码删除,以便测试无数据时无误。 
        var content = $("#content")[0]; 
        for(var i=0;i<30;i++){ 
            var row = content.insertRow(); 
            row.insertCell().innerHTML = 'Siuon/'s CSDN Blog'; 
            row.insertCell().innerHTML = '<a href="http://blog.csdn.net/xiaochunyong" target="_blank">http://blog.csdn.net/xiaochunyong</a>'; 
            row.insertCell().innerHTML = 'Siuon'; 
            row.insertCell().innerHTML = '123456'; 
            row.insertCell().innerHTML = 'xiaochunyong@gmail.com'; 
            row.insertCell().innerHTML = '1862152####'; 
            row.insertCell().innerHTML = '...'; 
            row.insertCell().innerHTML = '<a href="javascript:alert(/'修改/');">修改</a> <a href="javascript:alert(/'删除/');">删除</a>'; 
        } 
    </script> 
  </body> 
</html> 

该TableGrid 暂时不支持:
1、暂时不支持表格跨行跨列
2、暂时不支持表格冻结列

 

 

摘自 Siuon's Blog