摘要:之前使用寫了一個報表表格,最近突然找到我,說讓我看看能不能將表格的表頭和第一列進行固定,這樣的話方便查看數(shù)據(jù),于是,我開始了苦逼的研究起來,畢竟我是個后端啊,對于前端的樣式問題,特別是小功能,煩的一批這里就記錄下我的研究成果一引入和引入
之前使用bootstrap寫了一個報表表格,最近突然找到我,說讓我看看能不能將表格的表頭和第一列進行固定,這樣的話方便查看數(shù)據(jù),于是,我開始了苦逼的研究起來,畢竟我是個后端啊,對于前端的樣式問題,特別是小功能,煩的一批
這里就記錄下我的研究成果
一:引入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時,不要引入jquery2.0.0(包括2.0.0)版本以下,如果你引入了2.0.0版本以下的jquery的話,當你編寫完代碼之后,在控制臺會出現(xiàn)如下錯誤:
二:編寫table表格(固定表頭)
表頭一 | 表頭二 | 表頭三 | 表頭四 |
---|---|---|---|
1 | 2 | 3 | 4 |
1 | 2 | 3 | 4 |
上面代碼中的table標簽中的
data-toggle="table"表示的是啟用bootstrap表格,
data-height="200"表示設(shè)置表格的高度,用于配置固定表頭
由于我這里編寫的表格數(shù)據(jù)較少,所以展示出來的數(shù)據(jù)可能不會出現(xiàn)滑輪,看不出來固定表頭現(xiàn)象,你可以向表格中添加多一點數(shù)據(jù)就可以了
三:固定列
四:當瀏覽器窗口變化時,表頭與表格不對齊解決:
五:初次展示時表頭和表格數(shù)據(jù)不對齊解決(個人使用的方法,方法有點傻)
進過上面的過程我們已經(jīng)實現(xiàn)了表格的表格和列固定功能了,于是我便開始將報表修改起來,開始修改起來十分的輕松,沒有問題,但是,當我修改到一個報表的時候發(fā)現(xiàn),開始的時候,表頭和數(shù)據(jù)之間就發(fā)生了不對齊現(xiàn)象:
于是我開始在網(wǎng)上搜索起來,但是網(wǎng)上搜索的答案根本解決不了,例如:
找到bootstrap-table的源碼中
if (this.options.showHeader && this.options.height) { this.$tableHeader.show(); //注釋掉下面兩行 取消表頭初始化解決表頭和內(nèi)容不對齊問題 //this.resetHeader(); //padding += this.$header.outerHeight(); }
不知道寫這個的兄弟有沒有自己測試過,反正我注釋了之后,確實表頭和數(shù)據(jù)對齊了,但是表頭固定功能消失了,表頭和數(shù)據(jù)不對齊的原因就是因為你設(shè)置了固定表頭影響的,你這樣將表頭固定功能去掉了,那么我直接將table標簽中的data-height="200"去掉不久行了嗎,為什么還要改源碼呢?
于是我自己開始研究起來
最后我使用審查元素找到錯位的表頭位置,發(fā)現(xiàn)這樣一段代碼
這里將寬度設(shè)置為了146但是我的數(shù)據(jù)寬度只有120,這才造成了錯位,
然后我找到bootstrap-table源碼設(shè)置div的class為fht-cell寬度的代碼位置
雖然我找到了問題所在,但是源碼哪里出問題了,我還是不清楚,有知道的伙伴,歡迎告訴我答案
既然我不知道源碼出問題出在哪,那么我就使用十分傻的方法,直接設(shè)置class為fht-cell的寬度,將之前寬度為146的覆蓋
.fht-cell{width:120px!important;}
然后打開觀看,錯誤問題解決了?。?!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/102459.html
摘要:作者注是基于擴展的原生表格插件,設(shè)計理念來源于的組件該庫基于,暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路,歡迎討論和指正。 作者注:jsu.Table是基于jQuery擴展的原生表格插件,設(shè)計理念來源于Element.ui的Table組件(該UI庫基于vue.js,暫時未找到j(luò)Query版本因此在此造輪子)。本文將記錄jsu系列所有組件開發(fā)過程...
摘要:作者注是基于擴展的原生表格插件,設(shè)計理念來源于的組件該庫基于,暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路,歡迎討論和指正。 作者注:jsu.Table是基于jQuery擴展的原生表格插件,設(shè)計理念來源于Element.ui的Table組件(該UI庫基于vue.js,暫時未找到j(luò)Query版本因此在此造輪子)。本文將記錄jsu系列所有組件開發(fā)過程...
摘要:作者注是基于擴展的原生表格插件,設(shè)計理念來源于的組件該庫基于,暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路,歡迎討論和指正。 作者注:jsu.Table是基于jQuery擴展的原生表格插件,設(shè)計理念來源于Element.ui的Table組件(該UI庫基于vue.js,暫時未找到j(luò)Query版本因此在此造輪子)。本文將記錄jsu系列所有組件開發(fā)過程...
摘要:今天,你的瀏覽器滾動了嗎序在頁面中,一個有高度或者寬度的容器是最常見的構(gòu)成元素,而在其中的子元素有很大的概率超過父容器的尺寸限制,我們稱之為溢出。 今天,你的瀏覽器 滾動 了嗎? 序 在 Web 頁面中,一個有高度或者寬度的容器是最常見的構(gòu)成元素,而在其中的子元素有很大的概率超過父容器的尺寸限制,我們稱之為溢出。而應(yīng)對溢出,隱藏或者滾動是最常見的處理方式。滾動,作為 FEers 最經(jīng)常...
閱讀 2092·2023-04-25 20:52
閱讀 2473·2021-09-22 15:22
閱讀 2121·2021-08-09 13:44
閱讀 1766·2019-08-30 13:55
閱讀 2804·2019-08-23 15:42
閱讀 2278·2019-08-23 14:14
閱讀 2871·2019-08-23 13:58
閱讀 3001·2019-08-23 11:49