|
--javascriptふぁいる
//テーブル初期化(New時に呼ばれる)
var ScrollTable = function(tableId,headId){
//プロパティ一覧
this.tableId = tableId; //テーブルID
this.table = undefined; //メインtable
this.headId = headId; //ヘッダID
this.header = undefined; //ヘッダdiv
this.body = undefined; //明細div
this.scroll_XBar = undefined; //横軸スクロールバー
this.scroll_YBar = undefined; //縦軸スクロールバー
this.scroll_X = undefined; //横軸スクロールバーの中身
this.scroll_Y = undefined; //縦軸スクロールバーの中身
this.maxHeight = 0; //縦軸最大サイズ
this.maxWidth = 0; //横軸最大サイズ
this.isScrollX = true; //横スクロール有フラグ
this.isScrollY = true; //縦スクロール有フラグ
if(navigator.appName == 'Microsoft Internet Explorer'){
this.isIE = true; //ブラウザ種別：Internet Explorer
this.isFF = false; //ブラウザ種別：Firefox
}else if(navigator.appName == 'Netscape'){
this.isIE = false;
this.isFF = true;
}else{
this.isIE = false;
this.isFF = false;
}
var me = this;
this.addEvent(window,'load',function(){me.Table_Load();});
}
//テーブル初期表示処理
ScrollTable.prototype.Table_Load = function(){
var hedHeight = 0;
var borderHeight = 0;
//テーブル設定
this.table = document.getElementById(this.tableId);
if(this.table == undefined){
return false;
}
this.table.style.borderCollapse = 'separate';
var me = this;
//イベント設定
this.addEvent(document,'click',function(){return me.SetXY();});
//ヘッダ設定
this.header = document.getElementById(this.headId);
this.header.style.overflow = 'hidden';
if(this.table.firstChild.tagName == 'THEAD'){
this.header.style.paddingTop = this.table.firstChild.offsetHeight + 'px';
for(var i=0;i<this.table.firstChild.childNodes.length;i++){
borderHeight = Number(this.table.rows[i].cells[0].style.borderTopWidth.replace('px','')) + Number(this.table.rows[i].cells[0].style.borderBottomWidth.replace('px',''))
switch(this.table.rows[i].cells[0].style.borderStyle){
case 'ridge':
borderHeight = borderHeight + 2;
break;
}
this.table.rows[i].style.position = 'absolute';
this.table.rows[i].style.top = hedHeight + borderHeight + 'px';
this.table.rows[i].style.left = this.table.rows[this.table.rows.length - 1].offsetLeft;
hedHeight = hedHeight + this.table.rows[i].offsetHeight;
}
}else{
borderHeight = Number(this.table.rows[0].cells[0].style.borderTopWidth.replace('px','')) + Number(this.table.rows[0].cells[0].style.borderBottomWidth.replace('px',''))
switch(this.table.rows[0].cells[0].style.borderStyle){
case 'ridge':
borderHeight = borderHeight + 2;
break;
}
this.header.style.paddingTop = this.table.rows[0].offsetHeight + borderHeight + 'px';
this.table.rows[0].style.position = 'absolute';
this.table.rows[0].style.top = '0px';
if(this.table.rows.length > 1){
this.table.rows[0].style.left = this.table.rows[1].offsetLeft;
}
}
//明細設定
this.body = document.createElement('div');
if(this.isScrollY == true){
this.body.style.overflowY = 'hidden';
if(this.isIE == true){
this.addEvent(this.body,'mousewheel',function(){me.ScrollMouseW(window.event);});
}else{
this.addEvent(this.body,'DOMMouseScroll',function(e){me.ScrollMouseW(e);});
}
}
//ヘッダとテーブルの間に明細を入れる
this.header.removeChild(this.header.firstChild);
this.body.appendChild(this.table);
this.header.appendChild(this.body);
//横軸スクロールバー追加
if(this.isScrollX == true){
this.scroll_XBar = document.createElement('div');
this.scroll_XBar.style.overflowX = 'scroll';
this.scroll_XBar.style.overflowY = 'hidden';
this.scroll_XBar.style.position = 'absolute';
this.scroll_XBar.style.zIndex = '1';
this.addEvent(this.scroll_XBar,'scroll',function(){return me.GrdScrollX();});
document.body.appendChild(this.scroll_XBar);
this.scroll_X = document.createElement('div');
this.scroll_XBar.appendChild(this.scroll_X);
}
//縦軸スクロールバー追加
if(this.isScrollY == true){
this.scroll_YBar = document.createElement('div');
this.scroll_YBar.style.overflowY = 'scroll';
this.scroll_YBar.style.overflowX = 'hidden';
this.scroll_YBar.style.position = 'absolute';
this.scroll_YBar.style.zIndeY = '1';
this.addEvent(this.scroll_YBar,'scroll',function(){return me.GrdScrollY();});
document.body.appendChild(this.scroll_YBar);
this.scroll_Y = document.createElement('div');
this.scroll_YBar.appendChild(this.scroll_Y);
}
//見た目調整
this.maxHeight = this.header.offsetHeight;
this.maxWidth = this.header.offsetWidth;
me.SetXY();
me.onload();
}
//onloadイベント
ScrollTable.prototype.onload = function(){}
//イベント追加処理
ScrollTable.prototype.addEvent = function(place,name,shori){
if(place.addEventListener) {
place.addEventListener(name,shori,false);
}else{
//IEはこの処理を通る
place.attachEvent("on"+name,shori);
}
}
//スクロールバー(横軸)のスクロール時処理
ScrollTable.prototype.GrdScrollX = function(){
this.header.scrollLeft = this.scroll_XBar.scrollLeft;
}
//スクロールバー(縦軸)のスクロール時処理
ScrollTable.prototype.GrdScrollY = function(){
this.body.scrollTop = this.scroll_YBar.scrollTop;
}
//明細をマウスホイールでスクロールした場合の処理
ScrollTable.prototype.ScrollMouseW = function(e){
var move;
if(this.isIE == true){
move = e.wheelDelta;
}else{
move = e.detail * 10 * -1; //Firefoxはスクロールが遅いので加速
}
this.scroll_YBar.scrollTop = this.scroll_YBar.scrollTop - move;
}
//テーブルとdivの幅合わせ
ScrollTable.prototype.SetXY = function(){
var changeY = 0;
var changeX = 0;
var tableY = this.table.offsetHeight;
var tableX = this.table.offsetWidth;
var headY = Number(this.header.style.paddingTop.replace('px',''));
//明細の横幅調整
if(tableX > this.maxWidth){
//横幅の最大値を超えている場合
changeX = this.maxWidth;
}else{
changeX = tableX
}
this.body.style.width = tableX + 'px';
this.header.style.width = changeX + 'px';
//明細の高さ調整
if(tableY > this.maxHeight - (headY * 2)){
//高さの最大値を超えている場合
changeY = this.maxHeight - (headY * 2);
}else{
changeY = tableY;
}
this.body.style.height = changeY + 'px';
this.header.style.height = changeY + 'px';
//スクロールバーの設定
var obj = this.header;
var x = 0;
var y = 0;
while(obj) {
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
}
if(this.isScrollX == true){
this.scroll_XBar.style.top = y + changeY + headY + 'px';
this.scroll_XBar.style.left = x + 'px';
this.scroll_XBar.style.height = '16px';
this.scroll_XBar.style.width = changeX + 'px';
this.scroll_X.style.width = tableX + 'px';
}
if(this.isScrollY == true){
this.scroll_YBar.style.top = y + headY + 'px';
this.scroll_YBar.style.left = x + changeX - 4 + 'px'; //4は微調整
this.scroll_YBar.style.width = '20px';
this.scroll_YBar.style.height = changeY + 'px';
this.scroll_Y.style.height = tableY + 'px';
}
}
|