JS-Demo2：JavaScript版TableGrid，表格頭、分頁表格凍結,表格頭可拉動

上兩天寫瞭一個關於表格頭可以拖動：JS-Demo1：JavaScript實現表格列拖動/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; 
    } 
  
    //創建拖動時的效果(豎線):<p style="z-index: 10; position: absolute; background-color: #c3c3c3; width: 6px; display: none; height: ?px; top: 24px; left: 608px"></p> 
    function createVerticalLine(){ 
        var p = document.createElement("p"); 
        p.style.position = "absolute"; 
        p.style.display = "none"; 
        p.style.backgroundColor = "#C3C3C3"; 
        p.style.width = "6px"; 
        p.style.height = tbodyDiv.style.height; 
        p.style.top = tbodyTable.offsetTop; 
        p.style.zIndex = "10"; 
        p.innerHTML = " "; 
        document.body.appendChild(p); 
        return p; 
    } 
    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; 
        } 
    } 
  
    /** 
     * 當tfootp橫向滾動時,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> 
    <p id="mainDiv" style="height: 500px;width: 100%;"> 
        <p 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> 
        </p> 
        <p 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> 
        </p> 
        <p 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> 
        </p> 
    </p> 
    <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

Related posts:

  1. jQuery MiniUI 開發教程 表格控件 表格：分頁查詢（一）
  2. jQuery 無刷新分頁
  3. 對javascript表格中的元素進行排序(正序和倒序)
  4. jquery無刷新分頁
  5. JS分頁控件，可用於無刷新分頁
  6. jQuery MiniUI 開發教程 表格控件 表格：詳細行（九）
  7. jqgrid 表格數據導出
  8. jQuery MiniUI 開發教程 表格控件 表格：自定義列（二）

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *