Lauiuiでテーブルのヘッダーを修正する方法

layui でテーブル ヘッダーを修正する方法: まず、layui で table.js ファイルを見つけ、次に fiexdRowHeight 属性を変数テーブルに追加し、最後にコード「if(Object.prototype.toString.call()」を追加します。 .. 。））" します。

推奨: 「layUI チュートリアル 」

成果効果: ヘッダーと下部のページネーションが修正され、マウススクロールすると、本文内のデータのみがスクロールされます。結果は次のとおりです:

#1.layui で table.js ファイルを見つけて、赤いボックスで示されているように変数テーブルに属性を追加します。

##fiexdRowHeight: 固定行高さを有効にするかどうか、デフォルトは false

fiexdRowHeight_rows: テーブルに表示される行数、デフォルトは 10

上記 2 つの両方パラメータは単独で渡すことができます

2. pullData 関数を見つけます:

この関数に、 Ajax 非同期リクエスト成功コールバックの成功関数の最後のコード:

//固定行高、表头处理
if(Object.prototype.toString.call(options.fiexdRowHeight).slice(8, -1) === 'Boolean' && options.fiexdRowHeight) {
    var p_ = $("[lay-id='" + options.id +  "']")
    var tr_len = p_.find(ELEM_MAIN).find("tr").length
    if(tr_len > 10){
        if(Object.prototype.toString.call(options.fiexdRowHeight_rows).slice(8, -1) !== 'Number') {
            options.fiexdRowHeight_rows = 10
        }
        var height_main = (options.fiexdRowHeight_rows * 39) + 'px'
        var height_fixed = (options.fiexdRowHeight_rows * 39) + 'px'
        //如果出现横向滚动条时
        if(p_[0].parentNode.clientWidth < document.getElementsByClassName('layui-table-main')[0].getElementsByClassName('layui-table')[0].clientWidth) {
            height_main = ((options.fiexdRowHeight_rows * 39) + 18) + 'px'
        }
        p_.find(ELEM_MAIN).css("height", height_main);
        p_.find(ELEM_FIXL).find(ELEM_BODY).css("height", height_fixed);
        p_.find(ELEM_FIXR).find(ELEM_BODY).css("height", height_fixed);
    }else {
        p_.find(ELEM_MAIN).css("height", "auto");
        p_.find(ELEM_FIXL).find(ELEM_BODY).css("height", "auto");
        p_.find(ELEM_FIXR).find(ELEM_BODY).css("height", "auto");
    }
}

3. アプリケーション: 図に示すように:

以上がLauiuiでテーブルのヘッダーを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。