本篇博客所用到的技術(shù)也是從別的博客學(xué)習(xí)到的，但目前找不到那篇博客的鏈接了。

1.普通表格實(shí)現(xiàn)拖動(dòng)列寬

var tabSize = tabSize || {}; tabSize.init = function (id) { //用來存儲當(dāng)前更改寬度的Table Cell,避免快速移動(dòng)鼠標(biāo)的問題 var tTD; // 獲取需要修改列寬的表格 var table = document.getElementById(id); var headTh = table.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //記錄單元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //結(jié)束寬度調(diào)整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠標(biāo)樣式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暫存的Table Cell if (tTD == undefined) tTD = this; //調(diào)整寬度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //調(diào)整列寬 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 調(diào)整滾動(dòng)表格的每個(gè)cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 調(diào)用 // 鼠標(biāo)拖動(dòng)列寬 setTimeout(function () { // 1.html代碼里就是一個(gè)普通的table元素 // 2.傳入table元素的id tabSize.init('documentList'); }, 600); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

2.datatable實(shí)現(xiàn)鼠標(biāo)拖動(dòng)列寬

1. 項(xiàng)目中用到datatable插件的地方，都是需要上下滾動(dòng)的；而datatable插件實(shí)現(xiàn)上下滾動(dòng)，是生成了兩個(gè)div各包含了一個(gè)table，一個(gè)表格里只包含thead并且固定住（類：dataTables_scrollHead），另一個(gè)實(shí)現(xiàn)table內(nèi)容滾動(dòng)（類：dataTables_scrollBody） 。
2. 那么，若要實(shí)現(xiàn)鼠標(biāo)拖動(dòng)列寬的話，則需要：表頭綁定鼠標(biāo)事件→事件觸發(fā)時(shí)兩個(gè)表格的對應(yīng)列的寬度都要改變
3. 若這個(gè)datatable表格原本沒有滾動(dòng)條的話，在鼠標(biāo)拖動(dòng)列寬的時(shí)候，會出現(xiàn)滾動(dòng)條，其中，datatable定義時(shí)，“scrollX”: true。
   

var tabSize = tabSize || {}; tabSize.init = function (id,headTableWrapperId) { //用來存儲當(dāng)前更改寬度的Table Cell,避免快速移動(dòng)鼠標(biāo)的問題 var tTD; // 獲取需要修改列寬的表格 var table = document.getElementById(id); // 獲取固定頭部的表格 var tableHead = $('#'+ headTableWrapperId + ' .dataTables_scrollHeadInner table')[0]; // 獲取表格頭部th var headTh = tableHead.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //記錄單元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //結(jié)束寬度調(diào)整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠標(biāo)樣式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暫存的Table Cell if (tTD == undefined) tTD = this; //調(diào)整寬度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //調(diào)整列寬 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 調(diào)整滾動(dòng)表格的每個(gè)cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 鼠標(biāo)拖動(dòng)列寬 setTimeout(function () { // 參數(shù)：1.table元素的id， // 2.datatable插件生成的最外層div的id，F(xiàn)12可查看到 tabSize.init('cfcPlanListIn','cfcPlanListIn_wrapper'); }, 2000); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.sdgs6788.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)