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。

ABC	DEF	GHI	JKL	.....	...	...	XYZ	...	...
123	456	789	012	....	...	...	999	...	...
...	...	...	...	...	...	...	...	...	...
...	...	...	...	...	...	...	...	...	...
（双	击插	入	表	头）
ABC	DEF	GHI	JKL	...	...	...	XYX	...	...
987	123	445	768	..	...	..	765	...	...
...	...	...	...	...	...	...	...	...	...

ABC

DEF

GHI

JKL

.....

...

...

XYZ

...

...

123

456

789

012

....

...

...

999

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

（双

击插

入

表

头）

ABC

DEF

GHI

JKL

...

...

...

XYX

...

...

987

123

445

768

..

...

..

765

...

...

...

...

...

...

...

...

...

...

...

...

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 ******************

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

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

 
  [Copy to Clipboard]
 
 
  [Close x ]

[x] copy finished.

// 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 = ''; // 初始化内容块(

).

        // 获取正文的引用
        //var body = document.getElementsByTagName("body")[0];

        // 创建一个;元素和

元素
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");

        // 创建所有单元格
        //for (var j = 0; j             // 创建一个表行
            //var row = document.createElement("tr");

            for (var i = 0; i                 var row = document.createElement("tr");
                // 创建一个元素和文本节点，使文本
                // 节点 的内容，并将 放入在
                // 表行末尾
                var cell     = document.createElement("td");
                var cellText = document.createTextNode(hdCols[i].innerHTML.replace(/<.>/gi,'').replace(/&.*?;/,''));
                cell.appendChild(cellText);
                row.appendChild(单元格);

                var cell     = document.createElement("td");
                var cellText = document.createTextNode(ctCols[i].innerHTML.replace(/<.>/gi,'').replace(/&.*?;/,''));
                cell.appendChild(cellText);
                row.appendChild(单元格);

                tblBody.appendChild(row);
            }

            // 将行添加到表体末尾
            //tblBody.appendChild(row);
        //}

        // 将

放入在
中         tbl.appendChild(tblBody);
        // 追加 ;进入
        //body.appendChild(tbl);
        boxContents.appendChild(tbl);
        // 设置tbl的border属性为2;
        tbl.setAttribute("border","1px");
}

function newHeader(table, from, to){
//alert(from+'-->'+to);

如果（到 if (from   var tbody = table.tBodies[0]; // 使用 tbody
  //var trFrom = tbody.rows[from]; // 确保行保持被引用
  //tbody.removeChild(trFrom); // 在插入之前删除该行（重复的 id's
  var trTo = tbody.rows[to];

  //var trClone = tbody.rows[from].cloneNode(true); // 也复制子项
  
  //trClone = newHeader();
  //tbody.insertBefore(trClone, trTo);

//alert(trClone.innerHTML);

//var table = document.getElementById(gTable);
  var header = table.getElementsByTagName('tr')[0];
  var cols = header.getElementsByTagName('th');
//alert(header.innerHTML);

  var newHeader = document.createElement('tr'); // 创建行节点

  for (i=0;i //alert(cols[i].getElementsByTagName('div')[0].id);

     col = document.createElement('th'); // 创建列节点
    

//alert(cols[i].innerHTML);

开关 (i){
  案例 0：
    col.innerHTML = cols[i].innerHTML; // 编辑链接列
    休息；
    默认值：
        if (to==1){col.innerHTML='';}
        else{col.innerHTML = cols[i].innerHTML.replace(/onclick=.*?>/gi,'onclick=goHome(event);gReport.controls.widget(this.id)>');}
        col.innerHTML = col.innerHTML + 'x';
        col.innerHTML = col.innerHTML + '     ';
        col.innerHTML = col.innerHTML + '+';

    休息；
}
     newHeader.appendChild(col); // 将一列附加到行
  }

tbody.insertBefore(newHeader, trTo); // 在 trTo
之前插入 newHeader 返回新标题；
}

函数removeHeader(tgtObj){
//alert(tgtObj.parentNode.parentNode.tagName);

  var lineClicked = tgtObj.parentNode.parentNode.rowIndex;
 if (lineClicked>0){
  var table = document.getElementById(gTable);
  table.deleteRow(lineClicked);
 }
}

函数 goHome(e){
  //alert('回家......');
  //window.scrollTo(0, 0);  // 滚动到位置(x,y)
  //警报(docY(e));
  window.scrollBy(0,-e.pageY||-99999999); // 水平和垂直滚动增量。 IE 速度慢....
  //window.scrollBy(0,-9999999999);
}