在使用saiku查詢的時候,當「行」和「列」的維度內容過多時,在檢視時只看到資料,不知道是什麼資料,維度不清楚,得來回拖動滾動條才行,所以同事提出想要固定「表頭」和「首列」。
在網上找了一些現成的外掛程式使用後效果都不理想,所以決定自己動手,豐衣足食。
我的思路來自:
使用四個table,其中乙個為saiku原有的,再增加3個,思路效果圖:
js**實現:
1.找到saikutablerenderer.js(此檔案為saiku生成table的js檔案)的「$(self._options.htmlobject).html(html)」**(40行左右,作用為新增saiku原有table),在後面插入**如下(作用為生成固定表頭和首列用的3個div):
/*view code設定表頭固定和首列固定**-------------開始
*/$(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
());
/*設定表頭固定和首列固定**-------------結束
*/
2.找到table.js的clearout: function(){},在方法內新增**如下(作用為清除上述**生成的3個固定div):
//view code刪除固定表頭、首列及重疊部分div
var headerfixeddiv = document.getelementbyid("headerfixeddiv");
var columnfixeddiv = document.getelementbyid("columnfixeddiv");
var overlapfixeddiv = document.getelementbyid("overlapfixeddiv");
if(headerfixeddiv)
if(columnfixeddiv)
if(overlapfixeddiv)
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...