APEX 3.2上Interactive Report 的表头复制（1）(APEX4.1下运行通

最近为公司一个部门写了一个APEX应用。 他们要把Excle上的100多栏（太宽？）的表显示在APEX的Interactive Report上。 还不止这些，每页要显示的记录行数也要尽量多，250行（太长？）。 这样实现并不难，但有个问题，用户在看数据时，表头经常跑到画面外。身

最近为公司一个部门写了一个APEX应用。

他们要把Excle上的100多栏（太宽？）的表显示在APEX的Interactive Report上。

还不止这些，每页要显示的记录行数也要尽量多，250行（太长？）。

这样实现并不难，但有个问题，用户在看数据时，表头经常跑到画面外。身首异地，很不方便。

能像Excel那样，将画面分割表示当然好，可惜不能。于是就想出了复制表头信息，将其插入需要的地方这一笨招。

 其实也简单，在需要的地方双击（DoubleClick)，复制表头（下表中以红色示意的部分）。

按（x）可消去复制的表头；按（+）可将该行数据纵向显示，如果用IE，还可以拷贝到Clipboard。

Screenshot：

Javascript code：

// **************************************
// Name: f104_insertheader.js
// Created by Cho for APEX IR. 2011/11/20
// Added 1st line (Table Header) when double clicked.
// Tested OK under IE v7.0 and FF v8.0
//***************************************

/************ Put following line(s) in IR Region Header HTML ******************

// 2011/11/17... 工作版本。由曹。通过双击插入标题。

var box = document.getElementById('scrollBox');
var boxContents = document.getElementById('scrollBoxContents');
var lineClickedB4 = 0; // 记住之前点击过哪一行
//-->

****************************************************** ******************************/

函数copy2Clipboard(s){
 if( window.clipboardData && ClipboardData.setData ){
          var tmpS =    s.replace(/r?n/g,'');
          tmpS     = tmpS.replace(//gi,'t').replace(//gi,'rn');
          tmpS     = tmpS.replace(/<.>/gi,'');
          ClipboardData.setData("Text", tmpS);
          //alert('已复制到剪贴板。请检查。');
          $x('boxMessage').innerHTML = '[x] 复制完成。';
 }
 其他{
          //alert('抱歉，该浏览器不支持“复制到剪贴板”。');
          $x('boxMessage').innerHTML = '[x] 抱歉，浏览器不支持此功能。';
        }
        $x('boxMessage').style.visibility='visible';
}

函数 moveTo(e) {
  //varscrollBox = document.getElementById('scrollBox');
  if(box.style.visibility  == '可见'){
  //警报(docX(e));警报(docY(e));
  //box.style.top = docY(e);
  //box.style.left = docX(e);

  box.style.top = docY(e) + "px"; //20120911，针对firefox进行修改

  box.style.left = docX(e) + "px"; //20120911，针对firefox进行修改

  }
}

函数框可见性（flg）{
  //flg = 可见 ||隐藏
  //警报(flg);
  //varscrollBox = document.getElementById('scrollBox');
  box.style.visibility = flg;
  $x('boxMessage').style.visibility='隐藏'; //如果可见则隐藏[复制到剪贴板]消息框
}

// 在文档网络中获取 (x,y) 的函数。同时支持 IE 和 FF。
函数 docX(e) {return e.pageX || e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;}
函数 docY(e) {return e.pageY || e.clientY + document.body.scrollTop + document.documentElement.scrollTop ;}

函数 plusClicked(e){
    var tgt;
    if (document.all){tgt = e.srcElement;} //对于 IE
       else{tgt = e.target;} //对于 FireFox
    var lineClicked = tgt.parentNode.parentNode.rowIndex+1;
    //alert(lineClicked+'     if (lineClickedB4 != lineClicked){
       lineClickedB4 = lineClicked;
       var table = document.getElementById(gTable);
       makeScrollBox(table, 0, lineClicked);
    }
    boxVisibility('可见');
   // moveTo(事件);

   moveTo(e);  //20120911，针对firefox修改
}

函数insertHeader2Click(e){
    var tgt;
    if (document.all){tgt = e.srcElement;} //对于 IE
       else{tgt = e.target;} //对于 FireFox
    var lineClicked = tgt.parentNode.rowIndex;
    var table = document.getElementById(gTable);
    if (lineClicked>0){
       boxVisibility('隐藏'); //创建newHeader
时隐藏scrollBox        行点击B4 = 0;       //重置为0以防止混淆。
       newHeader(表, 0, lineClicked);
    }
}

函数 makeScrollBox(table, hdLine, bdLine){
if (hdLine if (bdLine   //var tbody = table.tBodies[0]; // 使用 tbody

var header = table.getElementsByTagName('tr')[hdLine];
var contnt = table.getElementsByTagName('tr')[bdLine];
var hdCols = header.getElementsByTagName('th');
var ctCols = contnt.getElementsByTagName('td');

boxContents.innerHTML = ''; // 初始化内容块(