bootstrap-tableは表の固定と列の固定を実現します。


以前はbootstrapを使ってレポートの表を書いていましたが、最近突然見つけました。表の表と第一列を固定してもいいですか?と言われました。このようにすれば、データを見やすくなります。そこで、私は苦労して研究を始めました。結局、私は後端です。前端の様式問題に対して、特に小機能です。ここで私の研究成果を記録します。jsとcssを導入します。










queryダウンロードアドレス:http://www.jq22.com/jquery-in...bootstrapダウンロード :http://www.bootcss.com/bootstrap-tableダウンロード :https://bootstrap-table.com/bootstrap-table-fixed-columnsダウンロード :https://github.com/wenzhixin/...ここで してください。jqueryを する 、jquery 2..0(2..0を む)のバージョンを しないでください。もし2.0バージョン のjqueryを したら、コードを し わったら、コンソールに のようなエラーが します。
:テーブルを する(テーブルを する)
1 2 3 4
1 2 3 4
のコードのテーブルの のdata-toggle=「table」は、bootstrapテーブルを にすることを しています。data-height=「200」は テーブルの さを しています。 ヘッダを するために、ここで したテーブルのデータが ないため、 されたデータは が れないかもしれません。 にもう し くのデータを してもいいです。3:

$(function(){
 //#table      table    id
 $("#table").bootstrapTable('destroy').bootstrapTable({
        fixedColumns: true, 
        fixedNumber: 1 //    
    });
})
四:ブラウザのウィンドウが変化すると、表と表が整列しなくなります。

$(function(){
$('#table').bootstrapTable();
    $(window).resize(function () {
        $('#table').bootstrapTable('resetView');
    });
})
最初のディスプレイでは、表と表のデータがそろっていません。(個人的に使う方法はちょっとばかげています。)上に進む過程で、表の表と列の固定機能が実現されました。そこで、レポートを修正し始めました。表面とデータの間に不整合が発生します。
そこで私はネットで検索し始めましたが、ネットで検索した答えはまったく解決できませんでした。例えば:
bootstrap-tableのソースコードを見つけました。
if (this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
            //                           
            //this.resetHeader();
            //padding += this.$header.outerHeight();
}
これを書いた兄弟は自分でテストしたことがあるかどうか分かりません。とにかくコメントしてから、確かに頭とデータがそろっています。しかし、表の固定機能がなくなりました。表の頭とデータが揃っていない原因は、あなたが固定ヘッドを設定したためです。このように表の固定機能がなくなりました。テーブルのタグの中のdata-height=200をそのまま外してもいいですか?なぜソースの変更が必要ですか?
そこで自分で研究を始めました。
最後に、私は審査要素を使って、転位の先頭位置を見つけました。このようなコードを発見しました。

这里将宽度设置为了146但是我的数据宽度只有120,这才造成了错位,

然后我找到bootstrap-table源码设置div的class为fht-cell宽度的代码位置


虽然我找到了问题所在,但是源码哪里出问题了,我还是不清楚,有知道的伙伴,欢迎告诉我答案

既然我不知道源码出问题出在哪,那么我就使用十分傻的方法,直接设置class为fht-cell的宽度,将之前宽度为146的覆盖

.fht-cell{width:120px!important;}
そして開けてみたら、エラーが解決しました!!!