Qt TableWidget 固定表頭 實(shí)例是本文要介紹的內(nèi)容，使TableWidget  固定表頭一個(gè)js插件的實(shí)例，先來(lái)看內(nèi)容。

公司項(xiàng)目里面很多地方都需要用到,出列表的時(shí)候固定表頭，滾動(dòng)表體，思路就是動(dòng)態(tài)創(chuàng)建一個(gè)div,然后里面創(chuàng)建2個(gè)div,一個(gè)title,一個(gè)body，然后用clone的方法，分別處理2個(gè)div的內(nèi)容

使用說(shuō)明:

var tableWidget = new TableWidget("TableID", "DestID", "100%", "300px");  
tableWidget.change(); 

表格需要固定寬度，table 需要加 style="table-layout: fixed;"

/*  
* 函數(shù)名稱: Widget  
* 作    者: yithcn  
* 功能說(shuō)明: 固定表格頭，表體可以滾動(dòng)  
* 創(chuàng)建日期: 2010.10.13  
*/  
function TableWidget(table, dest, width, height) {  
    this.construct(table, dest, width, height);  
};  
TableWidget.prototype = {  
    table: null,  
    dest: null,  
    widht: null,  
    height: null,  
    tdiv: null,  
    bdiv: null,  
    create: function() {  
        var that = this;  
        var div = document.createElement("div");  
        div.style.cssText = "background-color:white;width:" + that.width;  
        that.dest.appendChild(div);  
        //title  
        var titlediv = document.createElement("div");  
        titlediv.style.cssText = "width:100%;";  
        div.appendChild(titlediv);  
        //body  
        var bodydiv = document.createElement("div");  
        bodydiv.style.cssText = "overflow:auto;height:" + that.height + ";";  
        bodydiv.appendChild(that.table);  
        div.appendChild(bodydiv);  
        var newtable = that.table.cloneNode(true);  
        var len = newtable.rows.length;  
        for (var i = len - 1; i > 0; i--) {  
            newtable.deleteRow(i);  
        }  
        titlediv.appendChild(newtable);  
        that.table.deleteRow(0);  
        that.tdiv = titlediv;  
        that.bdiv = bodydiv;  
    },  
    construct: function(table, dest, width, height) {  
        var that = this;  
        window.onload = function() {  
            if (table && typeof table == "string")  
                table = document.getElementById(table);  
            if (dest && typeof dest == "string")  
                dest = document.getElementById(dest);  
            else  
                dest = document.body;  
            widthwidth = width || "100%";  
            heightheight = height || "300px";  
            height = parseInt(height) - table.rows[0].offsetHeight;  
            that.table = table;  
            that.dest = dest;  
            that.width = width;  
            that.height = height;  
            that.create();  
            that.change();  
        }  
    },  
    change: function() {  
        var that = this;  
        if (that.table.offsetHeight > parseInt(that.height)) {  
            that.tdiv.style.width = parseInt(that.bdiv.offsetWidth) - 16;  
        }  
        else {  
            that.tdiv.style.width = parseInt(that.bdiv.offsetWidth);  
        }  
    }  
}; 

之所以會(huì)有一個(gè)change方法，是因?yàn)樵陧?xiàng)目當(dāng)中需要?jiǎng)討B(tài)改變列表，要計(jì)算表頭和表體滾動(dòng)條。

小結(jié)：Qt TableWidget 固定表頭 實(shí)例的內(nèi)容介紹完了， 希望本文對(duì)你有所幫助！