jquery 做表頭固定及列固定,出現4個導航條,解決方法用百分比
很多用jquery做的表頭固定,列固定;當瀏覽器縮小的時候出現4個導航條
正文:先看程式碼
var superTable = function (tableId, options) {
/////* Initialize */
options = options || {};
this.cssSkin = options.cssSkin || "";
this.headerRows = parseInt(options.headerRows || "1");
this.fixedCols = parseInt(options.fixedCols || "0");
this.colWidths = options.colWidths || [];
this.initFunc = options.onStart || null;
this.callbackFunc = options.onFinish || null;
this.initFunc && this.initFunc();
/////* Create the framework dom */
this.sBase = document.createElement("DIV");
this.sFHeader = this.sBase.cloneNode(false);
this.sHeader = this.sBase.cloneNode(false);
this.sHeaderInner = this.sBase.cloneNode(false);
this.sFData = this.sBase.cloneNode(false);
this.sFDataInner = this.sBase.cloneNode(false);
this.sData = this.sBase.cloneNode(false);
this.sColGroup = document.createElement("COLGROUP");
this.sDataTable = document.getElementById(tableId);
this.sDataTable.style.margin = "0px"; /* Otherwise looks bad */
if (this.cssSkin !== "") {
this.sDataTable.className += " " + this.cssSkin;
}
if (this.sDataTable.getElementsByTagName("COLGROUP").length > 0) {
this.sDataTable.removeChild(this.sDataTable.getElementsByTagName("COLGROUP")[0]); /* Making our own */
}
this.sParent = this.sDataTable.parentNode;
this.sParentHeight = this.sParent.offsetHeight;
this.sParentWidth = this.sParent.offsetWidth;
/////* Attach the required classNames */
this.sBase.className = "sBase";
this.sFHeader.className = "sFHeader";
this.sHeader.className = "sHeader";
this.sHeaderInner.className = "sHeaderInner";
this.sFData.className = "sFData";
this.sFDataInner.className = "sFDataInner";
this.sData.className = "sData";
/////* Clone parts of the data table for the new header table */
var alpha, beta, touched, clean, cleanRow, i, j, k, m, n, p;
this.sHeaderTable = this.sDataTable.cloneNode(false);
if (this.sDataTable.tHead) {
alpha = this.sDataTable.tHead;
this.sHeaderTable.appendChild(alpha.cloneNode(false));
beta = this.sHeaderTable.tHead;
} else {
alpha = this.sDataTable.tBodies[0];
this.sHeaderTable.appendChild(alpha.cloneNode(false));
beta = this.sHeaderTable.tBodies[0];
}
alpha = alpha.rows;
for (i=0; i<this.headerRows; i++) {
beta.appendChild(alpha[i].cloneNode(true));
}
this.sHeaderInner.appendChild(this.sHeaderTable);
if (this.fixedCols > 0) {
this.sFHeaderTable = this.sHeaderTable.cloneNode(true);
this.sFHeader.appendChild(this.sFHeaderTable);
this.sFDataTable = this.sDataTable.cloneNode(true);
this.sFDataInner.appendChild(this.sFDataTable);
}
/////* Set up the colGroup */
alpha = this.sDataTable.tBodies[0].rows;
for (i=0, j=alpha.length; i<j; i++) {
clean = true;
for (k=0, m=alpha[i].cells.length; k<m; k++) {
if (alpha[i].cells[k].colSpan !== 1 || alpha[i].cells[k].rowSpan !== 1) {
i += alpha[i].cells[k].rowSpan - 1;
clean = false;
break;
}
}
if (clean === true) break; /* A row with no cells of colSpan > 1 || rowSpan > 1 has been found */
}
cleanRow = (clean === true) ? i : 0; /* Use this row index to calculate the column widths */
for (i=0, j=alpha[cleanRow].cells.length; i<j; i++) {
if (i === this.colWidths.length || this.colWidths[i] === -1) {
this.colWidths[i] = alpha[cleanRow].cells[i].offsetWidth;
}
}
for (i=0, j=this.colWidths.length; i<j; i++) {
this.sColGroup.appendChild(document.createElement("COL"));
this.sColGroup.lastChild.setAttribute("width", this.colWidths[i]);
}
this.sDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sDataTable.firstChild);
this.sHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sHeaderTable.firstChild);
if (this.fixedCols > 0) {
this.sFDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sFDataTable.firstChild);
this.sFHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sFHeaderTable.firstChild);
}
/////* Style the tables individually if applicable */
if (this.cssSkin !== "") {
this.sDataTable.className += " " + this.cssSkin + "-Main";
this.sHeaderTable.className += " " + this.cssSkin + "-Headers";
if (this.fixedCols > 0) {
this.sFDataTable.className += " " + this.cssSkin + "-Fixed";
this.sFHeaderTable.className += " " + this.cssSkin + "-FixedHeaders";
}
}
/////* Throw everything into sBase */
if (this.fixedCols > 0) {
this.sBase.appendChild(this.sFHeader);
}
this.sHeader.appendChild(this.sHeaderInner);
this.sBase.appendChild(this.sHeader);
if (this.fixedCols > 0) {
this.sFData.appendChild(this.sFDataInner);
this.sBase.appendChild(this.sFData);
}
this.sBase.appendChild(this.sData);
this.sParent.insertBefore(this.sBase, this.sDataTable);
this.sData.appendChild(this.sDataTable);
/////* Align the tables */
var sDataStyles, sDataTableStyles;
this.sHeaderHeight = this.sDataTable.tBodies[0].rows[(this.sDataTable.tHead) ? 0 : this.headerRows].offsetTop;
sDataTableStyles = "margin-top: " + (this.sHeaderHeight * -1) + "px;";
sDataStyles = "margin-top: " + this.sHeaderHeight + "px;";
sDataStyles += "height: " + (this.sParentHeight - this.sHeaderHeight) + "px;";
if (this.fixedCols > 0) {
/* A collapsed table's cell's offsetLeft is calculated differently (w/ or w/out border included) across broswers - adjust: */
this.sFHeaderWidth = this.sDataTable.tBodies[0].rows[cleanRow].cells[this.fixedCols].offsetLeft;
if (window.getComputedStyle) {
alpha = document.defaultView;
beta = this.sDataTable.tBodies[0].rows[0].cells[0];
if (navigator.taintEnabled) { /* If not Safari */
this.sFHeaderWidth += Math.ceil(parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width")) / 2);
} else {
this.sFHeaderWidth += parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width"));
}
} else if (/*@
alpha = this.sDataTable.tBodies[0].rows[0].cells[0];
beta = [alpha.currentStyle["borderRightWidth"], alpha.currentStyle["borderLeftWidth"]];
if(/px/i.test(beta[0]) && /px/i.test(beta[1])) {
beta = [parseInt(beta[0]), parseInt(beta[1])].sort();
this.sFHeaderWidth += Math.ceil(parseInt(beta[1]) / 2);
}
}
/* Opera 9.5 issue - a sizeable data table may cause the document scrollbars to appear without this: */
if (window.opera) {
this.sFData.style.height = this.sParentHeight + "px";
}
this.sFHeader.style.width = this.sFHeaderWidth + "px";
sDataTableStyles += "margin-left: " + (this.sFHeaderWidth * -1) + "px;";
sDataStyles += "margin-left: " + this.sFHeaderWidth + "px;";
sDataStyles += "width: " + (this.sParentWidth - this.sFHeaderWidth) + "px;";
} else {
sDataStyles += "width: " + this.sParentWidth + "px;";
}
this.sData.style.cssText = sDataStyles;
this.sDataTable.style.cssText = sDataTableStyles;
/////* Set up table scrolling and IE's onunload event for garbage collection */
(function (st) {
if (st.fixedCols > 0) {
st.sData.onscroll = function () {
st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
st.sFDataInner.style.top = (st.sData.scrollTop * -1) + "px";
};
} else {
st.sData.onscroll = function () {
st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
};
}
if (/*@
window.attachEvent("onunload", function () {
st.sData.onscroll = null;
st = null;
});
}
})(this);
this.callbackFunc && this.callbackFunc();
};
(function($) {
$.fn.extend(
{
toSuperTable: function(options) {
var setting = $.extend(
{
width: "640px", height: "320px",
margin: "10px", padding: "0px",
overflow: "hidden", colWidths: undefined,
fixedCols: 0, headerRows: 1,
onStart: function() { },
onFinish: function() { },
cssSkin: "sSky"
}, options);
return this.each(function() {
var q = $(this);
var id = q.attr("id");
q.removeAttr("style").wrap("<div id='" + id + "_box'></div>");
var nonCssProps = ["fixedCols", "headerRows", "onStart", "onFinish", "cssSkin", "colWidths"];
var container = $("#" + id + "_box");
for (var p in setting) {
if ($.inArray(p, nonCssProps) == -1) {
container.css(p, setting[p]);
delete setting[p];
}
}
var mySt = new superTable(id, setting);
});
}
});
})(jQuery);
看的眼花繚亂,這個不要去看。到時候直接呼叫就Ok了
看看我更改的css樣式,怎麼設定
/*
/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables v0.30 - MIT Style License
// Copyright (c) 2008 Matt Murphy --- www.matts411.com
// cssSkin:表格的樣式。目前有:sDefault,sSky,sOrange,sDark,可以通過修改superTables.css自定義樣式
// Contributors:
// Joe Gallo
/////////////////////////////////////////////////////////////////////////////////////////
*/
.fakeContainer {
margin: 0px;
padding: 0px;
border: none;
/* width: 1410px;
height: 550px;*/
overflow: hidden;
}
.sBase {
position: relative;
width: 100%;
height: 70%;
overflow: hidden;
}
/* HEADERS */
.sHeader {
position: absolute;
z-index: 3;
background-color: #ffffff;
}
.sHeaderInner {
position: relative;
}
.sHeaderInner table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
}
/* HEADERS - FIXED */
.sFHeader {
position: absolute;
z-index: 4;
overflow: hidden;
}
.sFHeader table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
}
/* BODY */
.sData {
position: absolute;
z-index: 2;
overflow: auto;
background-color: #ffffff;
height: 90%;
}
.sData table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
}
/* BODY - FIXED */
.sFData {
position: absolute;
z-index: 1;
background-color: #ffffff;
}
.sFDataInner {
position: relative;
}
.sFData table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
}
/*
/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables - Skin Classes
// Remove if not needed
/////////////////////////////////////////////////////////////////////////////////////////
*/
/* sDefault */
.sDefault {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sDefault th, .sDefault td {
border: 1px solid #cccccc;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sDefault th {
background-color: #e5e5e5;
border-color: #c5c5c5;
}
.sDefault-Fixed {
background-color: #eeeeee;
border-color: #c5c5c5;
}
/* sSky */
.sSky {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sSky th, .sSky td {
border: 1px solid #9eb6ce;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sSky th {
background-color: #CFDCEE;
}
.sSky-Fixed {
background-color: #e4ecf7;
}
/* sOrange */
.sOrange {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sOrange th, .sOrange td {
border: 1px solid #cebb9e;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sOrange th {
background-color: #ECD8C7;
}
.sOrange-Fixed {
background-color: #f7ede4;
}
/* sDark */
.sDark {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
color: #ffffff;
}
.sDark th, .sDark td {
border: 1px solid #555555;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sDark th {
background-color: #000000;
}
.sDark-Fixed {
background-color: #222222;
}
.sDark-Main {
background-color: #333333;
}
/*person add*/
.rowStyle
{
background-color: #FFFFFF;
}
.alterStyle
{
background-color: #ddddff;
}
這個不管,這個外掛注意的幾個地方,同jquery,追加了幾個div,這個可以用ie瀏覽器F12檢視,追加了幾個div,
要注意的div,第一個div的class為sBase(是要顯示資料的div),正文css已經設定好了,我這裡設定的是70%(看個人),看第二個div的class是sFHeader,這個高度和寬度是jquery,自動計算的。這裡的意思就我們固定列寬度的大小;這個我們不管它,還有個就是sDate了,圖示:
介紹完了,接下來改怎麼設定導航條:首先4個導航條,最外面的導航條是body的。好我們關了它style="overflow:hidden;",然後跟我上面提供的css預設設定;接著然後我們設定sDate,用百分比。就是用sBase的寬度減去sFheader的寬度,然後sBase的高度,就是sBase的高度減去sDate這個div導航條的高度大概22px,這個根據個人除錯設定。看程式碼:
<% if(list.size()>0){%>
<script type="text/javascript">
(function() {
new superTable("demoTable", {cssSkin:"sDefault",fixedCols:4,headerRows:1});
//this.sData.style.height="100%";
var sfHeader_width= $('.sFHeader').width();
var sBase_width=$('.sBase').width();
var sDate_width=sBase_width-sfHeader_width;
//$('.sData').css({"width":sDate_width, "height":"95.5%"});
//$('.sDataTable').css({"width":"80%", "height":"55%"});
var sfHeader_height= $('.sBase').height();
var sFData_height= $('.sFData').height();
var sFHeader_h =$('.sFHeader').height();
var sDate_height=0;
if(sFData_height>sfHeader_height){
sDate_height=sfHeader_height-22;
$('.sData').css({"width":sDate_width, "height": sDate_height});
}
if(sFData_height<sfHeader_height){
sDate_height=sFData_height;
$('.sData table').css({"margin-top":"0px"});
$('.sData').css({"width":sDate_width, "height": sDate_height+20,"margin-top":"0px"});
}
})();
$(window).resize(function(){
sfHeader_width= $('.sFHeader').width();
sBase_width=$('.sBase').width();
sDate_width=sBase_width-sfHeader_width;
sfHeader_height= $('.sBase').height();
sFData_height= $('.sFData').height();
sFHeader_h =$('.sFHeader').height();
sDate_height=0;
if(sFData_height>sfHeader_height){
sDate_height=sfHeader_height-22;
$('.sData').css({"width":sDate_width, "height": sDate_height});
}
if(sFData_height<sfHeader_height){
sDate_height=sFData_height;
$('.sData table').css({"margin-top":"0px"});
$('.sData').css({"width":sDate_width, "height": sDate_height+20,"margin-top":"0px"});
}
});
</script>
<%}%>
好了這樣就可以了。要是不懂,找個美工調調把。
下載檔案:http://download.csdn.net/detail/wang1989cs/8225201
相關推薦
jquery 做表頭固定及列固定,出現4個導航條,解決方法用百分比
很多用jquery做的表頭固定,列固定;當瀏覽器縮小的時候出現4個導航條 正文:先看程式碼 var superTable = function (tableId, options) { /////* Initialize */ options = options
eclipse插入資料到MySQL資料庫時,出現中文亂碼問題的解決方法
中文亂碼 問題,一直讓人很煩,在百度上找了很多方法,都不行,後來,忽然想到一個方法,竟然沒有亂碼了,好了,進入正題; 首先,說明我的中文亂碼是出現在配置hibernate
gson將json轉為map的時候,出現型別轉換異常的解決方法
Type type = new TypeToken<Map<String, Object>>() { }.getType(); Map<String, Object> dataMap = gson.fromJson(
table固定表頭行及列,其中行包含合併單元格(支援IE,但滑鼠滾動輪滾動效果不太友好)
PS:該程式碼用於學習,大部分不是原創,在他(她)人程式碼的基礎上修改成自己想實現的效果,來源不明,因此沒有加轉載連結,如有問題,先在這裡抱歉,請聯絡我刪除。 內容實現的效果與上一篇一樣,但是這個這個用了一點點js去實現IE沒有辦法相容的一些屬性,所以這個版本可以相容IE的高版本和低版本,測試用的版本時IE8
Vue多種方法實現表頭、首列固定
有時表格太大,滾動時資訊檢視不方便,需要對錶格進行全域性表頭、首列固定, 上效果: 一、建立多個表格進行覆蓋 思路:當頁面滾動到臨界值時,出現固定表頭、首列 先建立一個活動表格 <!DOCTYPE html&g
用ionic做的列表向左滑動,出現刪除等功能按鈕
ann 需要 balance -o tails details edate sts tran 廢話不多說,直接上代碼 html代碼: <!--列表--><ul class="lists" ng-repeat="list in lists"> <
pandas布林表示式篩選表的列資料,注意多個條件需加括號
result[(result.CREATE_TIME > pd.to_datetime('2018-07')) & (result.CREATE_TIME < pd.to_datetime('2018-08'))] 如果要使用與(and),用符號&表示,如df.A&n
android全屏/沉浸式狀態列下,各種鍵盤擋住輸入框解決辦法
*本篇文章已授權微信公眾號 guolin_blog (郭霖)獨家釋出 在開發中,經常會遇到鍵盤擋住輸入框的情況,比如登入介面或註冊介面,彈出的軟鍵盤把登
移動端固定輸入框在底部會被鍵盤遮擋的解決方法
由於公司需求,需要做一個實時對話的聊天功能。遇到各種小坑就不多說了,下面就記錄一下遇到最坑的一個問題。。 頁面佈局寫完後,在安卓和蘋果手機測試了一下,問題來了!!!在安卓手機中佈局完美展示(這很好),但在蘋果手機下,經常點選輸入框鍵盤會把輸入框擋住。如下圖顯示: (圖
html固定寬度下拉框內容顯示不全問題解決方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
WordPress固定連結修改報錯:Object not found的解決方法
WordPress預設使用帶有問號和很多數字的URL作為固定連結,就像這個樣紙: http://frozensky.sinaapp.com/?p=123 這種毫無意義的URL對於SEO來說很不友好呀。 所以某雪要把它設定為文章名的形式: http://frozens
JQuery datatables 表頭複選框切換頁面時保持選中的問題解決
在使用強大的datatables表格外掛時,發現,發現如果在表頭添加了複選框之後,當第一頁選中,點選切換下一頁的時候,複選框還是選中的狀態,這個是不對的,需要找一個監聽表格繪製完成的函式,重
包含目錄、庫目錄、附加包含目錄、附加庫目錄、附加依賴項如何使用? 及靜態庫,動態庫的創建與調用和vs裏引用的使用
pragma 經驗 dll blog res 編譯器 rdquo 編譯期 靜態 https://blog.csdn.net/Young__Fan/article/details/80528740 引言:vs中怎麽添加外部頭文件?如過直接在項目頭文件處,添加一下,如下
Cocos2d-x3.0 載入Cocostudio的UI後,button無法點擊的解決方法
archive nor tar console 大小 接下來 variant set http 近期發現不少朋友都遇到這個問題,用Cocostudio的UI編輯器創建好UI後。在代碼中載入UI,然後給button(Button)加入點擊監聽事件。發現不管怎樣都點擊不了bu
JS異步加載,JQ事件不被執行解決方法
出現 xhtml 解決 col 添加 str 事件 src del 一,在我們實現動態生成HTML代碼時會出現,使用JQ方法會不被執行,解決方法,如下:使用jquery的委托事件,將該方法委托到頁面已經存在的一個節點上 <!DOCTYPE html> <
oracle業務硬盤出現故障無法訪問,提示需要重新格式化後解決方法
互聯網 折騰了兩天,終於把這個問題解決了,記錄一下,也幫助那些和我一樣碰到類似問題的朋友們,數據無價,我們必須謹慎處理。 這塊硬盤是我們公司一卡通平臺的存儲服務器LUN,由多塊硬盤組成,按道理說它不應該出現問題,因為裏面還有RAID等保護,但偏偏就出現了這樣的問題:硬盤盤符還能看見,但一打開提示“需要
使用筆記本撥通openvpn後,筆記本不能上網的解決方法
openvpn iptables 網上也流傳著一些,解決方法:一:方法1:配置ip轉發,iptables規則來轉發首先,修改openvpnserver端的ip轉發功能echo 1 > /proc/sys/net/ipv4/ip_forward然後配置iptables,使用NAT技術iptable
ireport報表,打印時,報表加載失敗的解決方法
.cn HR width gpo image img ron bsp nbsp 1、報表加載失敗圖示 2、解決方法 原創作者:DSHORE 出處:http://www.cnblogs.com/dshore123/ 歡迎轉載,轉載務必說明出處。(如果本
easyUI datagrid 多行多列數據渲染異常緩慢原因以及解決方法
後端 http 前後端 公司 發送請求 class 之前 vue 做的 原因 最近,在優化之前公司幫聯想(外包)做的一個老的後臺管理系統,由於項目是基於easy UI框架,頁面是後臺用jsp實現的,再加上在公司推行前後端分離的實踐,大部分項目都基於vue采用前後端分離去實現
jsp頁面表單提交,controller接收亂碼,數據庫亂碼等解決方法
ren ping redirect etc 打開數據庫 解決方法 ews web ext 1.web項目出現亂碼問題 做web項目的時候,多多少少會出現中文亂碼問題。 對於jsp頁面表單提交,controller接收亂碼,保存到數據庫中文亂碼等問題,統一給出幾種亂碼的解決