Qt TableWidget 固定表頭 實例是本文要介紹的內容，使TableWidget  固定表頭一個js插件的實例，先來看內容。

公司項目里面很多地方都需要用到,出列表的時候固定表頭，滾動表體，思路就是動態創建一個div,然后里面創建2個div,一個title,一個body，然后用clone的方法，分別處理2個div的內容

使用說明:

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

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

/*  
* 函數名稱: Widget  
* 作    者: yithcn  
* 功能說明: 固定表格頭，表體可以滾動  
* 創建日期: 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);  
        }  
    }  
}; 

之所以會有一個change方法，是因為在項目當中需要動態改變列表，要計算表頭和表體滾動條。

小結：Qt TableWidget 固定表頭 實例的內容介紹完了， 希望本文對你有所幫助！