Saiku如何固定查詢結果table的表頭和首列

2022-05-21 18:54:13 字數 3502 閱讀 1074

在使用saiku查詢的時候,當「行」和「列」的維度內容過多時,在檢視時只看到資料,不知道是什麼資料,維度不清楚,得來回拖動滾動條才行,所以同事提出想要固定「表頭」和「首列」。

在網上找了一些現成的外掛程式使用後效果都不理想,所以決定自己動手,豐衣足食。

我的思路來自:

使用四個table,其中乙個為saiku原有的,再增加3個,思路效果圖:

js**實現:

1.找到saikutablerenderer.js(此檔案為saiku生成table的js檔案)的「$(self._options.htmlobject).html(html)」**(40行左右,作用為新增saiku原有table),在後面插入**如下(作用為生成固定表頭和首列用的3個div):

/*

設定表頭固定和首列固定**-------------開始

*/$(self._options.htmlobject).parent().parent().css();

$(self._options.htmlobject).parent().height($(self._options.htmlobject).parent().parent().height());

$(self._options.htmlobject).parent().css();

//新增固定表頭div

var headerfixeddiv =$(self._options.htmlobject).parent().clone();

headerfixeddiv.find("tbody").css();

headerfixeddiv.attr("id","headerfixeddiv");

$(self._options.htmlobject).parent().before(headerfixeddiv);

$("#headerfixeddiv").css();

//新增固定首列div

var columnfixeddiv =$(self._options.htmlobject).parent().clone();

columnfixeddiv.find("thead").css();

columnfixeddiv.find("thead .col").remove();

columnfixeddiv.find("tbody .data").remove();

columnfixeddiv.attr("id","columnfixeddiv");

$(self._options.htmlobject).parent().before(columnfixeddiv);

$("#columnfixeddiv").css();

//新增固定表頭和固定首列重疊部分div

var overlapfixeddiv = $("#headerfixeddiv").clone();

overlapfixeddiv.find("thead .col").remove();

overlapfixeddiv.find("tbody .data").remove();

overlapfixeddiv.attr("id","overlapfixeddiv");

$("#headerfixeddiv").before(overlapfixeddiv);

$("#overlapfixeddiv").css();

//調整固定表頭和固定首列div的寬高

function

resizeheaderfixeddiv()

else

$("#headerfixeddiv").height($(self._options.htmlobject).find("thead").height());

//設定固定首列div寬高

//判斷是否出現橫向滾動條

if($(self._options.htmlobject).parent()[0].offsetwidth > $(self._options.htmlobject).parent()[0].clientwidth)

else

var columnfixeddivwidth = $("#columnfixeddiv").find("tbody tr:eq(0)")[0].offsetwidth;

$("#columnfixeddiv").width(columnfixeddivwidth);

$("#columnfixeddiv").find("thead tr").each(function

(index))

//設定固定表頭和固定首列重疊部分div寬高

$("#overlapfixeddiv").width($("#columnfixeddiv").width());

$("#overlapfixeddiv").height($("#headerfixeddiv").height());

$("#overlapfixeddiv").find("thead tr").each(function

(index))

}resizeheaderfixeddiv();

//滾動條滾動事件

$(self._options.htmlobject).parent().scroll(function

() );

//頁面大小調整事件

$(window).resize(function

());

/*設定表頭固定和首列固定**-------------結束

*/

view code

2.找到table.js的clearout: function(){},在方法內新增**如下(作用為清除上述**生成的3個固定div):

//

刪除固定表頭、首列及重疊部分div

var headerfixeddiv = document.getelementbyid("headerfixeddiv");

var columnfixeddiv = document.getelementbyid("columnfixeddiv");

var overlapfixeddiv = document.getelementbyid("overlapfixeddiv");

if(headerfixeddiv)

if(columnfixeddiv)

if(overlapfixeddiv)

view code

3.找到index.html,找到.workspace_results table並注釋掉,此**為設定查詢結果表距左側長度,不注釋掉的話在拖動滾動條的時候會有內容從**左邊溢位,也可以找其他方式解決,不如設定背景顏色為白色等。

實際效果圖:

ORACLE表查詢結果轉置(固定列)

為乙個可編輯grid,對應這樣的grid資料庫有兩種設計方式,方式1 將資料庫表中的每乙個列和grid中的每乙個列對應 方式2 可編輯部份每乙個單元格做乙個資料庫表的行,既採用縱表的方式儲存資料,當查詢時把縱表結果轉置90度既可。兩種方式對比 方式1 和grid中對應一致,對於資料庫設計來說比較直觀...

mysql查詢結果翻轉 如何把sql結果集翻轉

我用的是sql 請教如何把sql結果集翻轉?如下一張表 checkinout 顯示員工簽到,簽退的考勤表,checktype 考勤型別 i 表示簽到,o 表示簽退 timeflag 4表示上午,5表示下午 checktime 簽到,籤 userid checktype checktime timef...

MySQL查詢結果新增值固定列和自增列

測試資料準備 select 固定值 as 列名 from 示例 select 男 as from student 此時 變為字串型別 varchar mysql自動識別型別 select 1 as from student 此時 為int型別 寫法一 set rownum 0 select rown...