成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

bootstrap-table實(shí)現(xiàn)表頭固定以及列固定

B0B0 / 2818人閱讀

摘要：之前使用寫了一個(gè)報(bào)表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進(jìn)行固定，這樣的話方便查看數(shù)據(jù)，于是，我開始了苦逼的研究起來，畢竟我是個(gè)后端啊，對(duì)于前端的樣式問題，特別是小功能，煩的一批這里就記錄下我的研究成果一引入和引入

之前使用bootstrap寫了一個(gè)報(bào)表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進(jìn)行固定，這樣的話方便查看數(shù)據(jù)，于是，我開始了苦逼的研究起來，畢竟我是個(gè)后端啊，對(duì)于前端的樣式問題，特別是小功能，煩的一批
這里就記錄下我的研究成果
一：引入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時(shí)，不要引入jquery2.0.0(包括2.0.0)版本以下，如果你引入了2.0.0版本以下的jquery的話，當(dāng)你編寫完代碼之后，在控制臺(tái)會(huì)出現(xiàn)如下錯(cuò)誤：


二：編寫table表格(固定表頭)





        表頭一
        表頭二
        表頭三
        表頭四
    





        1
        2
        3
        4
    

    

1
2
3
4

上面代碼中的table標(biāo)簽中的
data-toggle="table"表示的是啟用bootstrap表格，
data-height="200"表示設(shè)置表格的高度，用于配置固定表頭
由于我這里編寫的表格數(shù)據(jù)較少，所以展示出來的數(shù)據(jù)可能不會(huì)出現(xiàn)滑輪，看不出來固定表頭現(xiàn)象，你可以向表格中添加多一點(diǎn)數(shù)據(jù)就可以了
三：固定列

四：當(dāng)瀏覽器窗口變化時(shí)，表頭與表格不對(duì)齊解決：

五：初次展示時(shí)表頭和表格數(shù)據(jù)不對(duì)齊解決(個(gè)人使用的方法，方法有點(diǎn)傻)
進(jìn)過上面的過程我們已經(jīng)實(shí)現(xiàn)了表格的表格和列固定功能了，于是我便開始將報(bào)表修改起來，開始修改起來十分的輕松，沒有問題，但是，當(dāng)我修改到一個(gè)報(bào)表的時(shí)候發(fā)現(xiàn)，開始的時(shí)候，表頭和數(shù)據(jù)之間就發(fā)生了不對(duì)齊現(xiàn)象：


于是我開始在網(wǎng)上搜索起來，但是網(wǎng)上搜索的答案根本解決不了，例如：

找到bootstrap-table的源碼中

if (this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
            //注釋掉下面兩行 取消表頭初始化解決表頭和內(nèi)容不對(duì)齊問題
            //this.resetHeader();
            //padding += this.$header.outerHeight();
}

不知道寫這個(gè)的兄弟有沒有自己測(cè)試過，反正我注釋了之后，確實(shí)表頭和數(shù)據(jù)對(duì)齊了，但是表頭固定功能消失了，表頭和數(shù)據(jù)不對(duì)齊的原因就是因?yàn)槟阍O(shè)置了固定表頭影響的，你這樣將表頭固定功能去掉了，那么我直接將table標(biāo)簽中的data-height="200"去掉不久行了嗎，為什么還要改源碼呢？

于是我自己開始研究起來

最后我使用審查元素找到錯(cuò)位的表頭位置，發(fā)現(xiàn)這樣一段代碼

這里將寬度設(shè)置為了146但是我的數(shù)據(jù)寬度只有120,這才造成了錯(cuò)位，

然后我找到bootstrap-table源碼設(shè)置div的class為fht-cell寬度的代碼位置


雖然我找到了問題所在，但是源碼哪里出問題了，我還是不清楚，有知道的伙伴，歡迎告訴我答案

既然我不知道源碼出問題出在哪，那么我就使用十分傻的方法，直接設(shè)置class為fht-cell的寬度，將之前寬度為146的覆蓋

.fht-cell{width:120px!important;}

然后打開觀看，錯(cuò)誤問題解決了?。。?/p>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102459.html

相關(guān)文章

  • jsu系列之表格組件 ---- jsu.Table

    摘要：作者注是基于擴(kuò)展的原生表格插件，設(shè)計(jì)理念來源于的組件該庫(kù)基于，暫時(shí)未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴(kuò)展的原生表格插件，設(shè)計(jì)理念來源于Element.ui的Table組件（該UI庫(kù)基于vue.js，暫時(shí)未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

    soasme 評(píng)論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

    摘要：作者注是基于擴(kuò)展的原生表格插件，設(shè)計(jì)理念來源于的組件該庫(kù)基于，暫時(shí)未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴(kuò)展的原生表格插件，設(shè)計(jì)理念來源于Element.ui的Table組件（該UI庫(kù)基于vue.js，暫時(shí)未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

    everfly 評(píng)論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

    摘要：作者注是基于擴(kuò)展的原生表格插件，設(shè)計(jì)理念來源于的組件該庫(kù)基于，暫時(shí)未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴(kuò)展的原生表格插件，設(shè)計(jì)理念來源于Element.ui的Table組件（該UI庫(kù)基于vue.js，暫時(shí)未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

    張巨偉 評(píng)論0 收藏0

  • 今天，你的瀏覽器 “滾動(dòng)” 了嗎？

    摘要：今天，你的瀏覽器滾動(dòng)了嗎序在頁(yè)面中，一個(gè)有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。 今天，你的瀏覽器 滾動(dòng) 了嗎？ 序 在 Web 頁(yè)面中，一個(gè)有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應(yīng)對(duì)溢出，隱藏或者滾動(dòng)是最常見的處理方式。滾動(dòng)，作為 FEers 最經(jīng)常...

    leo108 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

B0B0

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<