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

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.

var box = document.getElementById('scrollBox');
var boxContents = document.getElementById('scrollBoxContents');
var lineClickedB4 = 0; // remember which line is clicked before
//-->

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

function copy2Clipboard(s){
 if( window.clipboardData && clipboardData.setData ){
          var tmpS =    s.replace(/\r?\n/g,'');
          tmpS     = tmpS.replace(//gi,'\t').replace(//gi,'\r\n');
          tmpS     = tmpS.replace(/<.>/gi,'');
          clipboardData.setData("Text", tmpS);
          //alert('Copied to your clipboard. Please check.');
          $x('boxMessage').innerHTML = '[x] Copy finished.';
 }
 else{
          //alert('Sorry, this browser does not support "copy to clipboard".');
          $x('boxMessage').innerHTML = '[x] Sorry, browser not supported function.';
        }
        $x('boxMessage').style.visibility='visible';
}

function moveTo(e) {
  //var scrollBox = document.getElementById('scrollBox');
  if(box.style.visibility  == 'visible'){
  //alert(docX(e)); alert(docY(e));
  //box.style.top  = docY(e);
  //box.style.left = docX(e);

  box.style.top  = docY(e) + "px"; //20120911, modified for firefox

  box.style.left = docX(e) + "px"; //20120911, modified for firefox

  }
}

function boxVisibility(flg) {
  //flg = visible || hidden
  //alert(flg);
  //var scrollBox = document.getElementById('scrollBox');
  box.style.visibility  = flg;
  $x('boxMessage').style.visibility='hidden'; //hide [copy to clipboard] message box if visible
}

// functions to get (x,y) in a documnet. Work both IE & FF.
function docX(e) {return e.pageX || e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;}
function docY(e) {return e.pageY || e.clientY + document.body.scrollTop  + document.documentElement.scrollTop ;}

function plusClicked(e){
    var tgt;
    if (document.all){tgt = e.srcElement;} //for IE
       else{tgt = e.target;} //for 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('visible');
   // moveTo(event);

   moveTo(e);  //20120911, modified for firefox
}

function insertHeader2Click(e){
    var tgt;
    if (document.all){tgt = e.srcElement;} //for IE
       else{tgt = e.target;} //for FireFox
    var lineClicked = tgt.parentNode.rowIndex;
    var table = document.getElementById(gTable);
    if (lineClicked>0){
       boxVisibility('hidden'); //hide scrollBox when make newHeader
       lineClickedB4 = 0;       //reset to 0 to prevent confuse.
       newHeader(table, 0, lineClicked);
    }
}

function makeScrollBox(table, hdLine, bdLine){
if (hdLine if (bdLine   //var tbody = table.tBodies[0]; // Use 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 = ''; // initialize contents block(

).

        // get the reference for the body
        //var body = document.getElementsByTagName("body")[0];

        // creates a

element and a element
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");

        // creating all cells
        //for (var j = 0; j             // creates a table row
            //var row = document.createElement("tr");

            for (var i = 0; i                 var row = document.createElement("tr");
                // Create a

in the

element and a text node, make the text                 // node the contents of the

, and put the

at                 // the end of the table row                 var cell     = document.createElement("td");                 var cellText = document.createTextNode(hdCols[i].innerHTML.replace(/<.>/gi,'').replace(/&.*?;/,''));                 cell.appendChild(cellText);                 row.appendChild(cell);                 var cell     = document.createElement("td");                 var cellText = document.createTextNode(ctCols[i].innerHTML.replace(/<.>/gi,'').replace(/&.*?;/,''));                 cell.appendChild(cellText);                 row.appendChild(cell);                 tblBody.appendChild(row);             }             // add the row to the end of the table body             //tblBody.appendChild(row);         //}         // put the

        tbl.appendChild(tblBody);
        // appends into
        //body.appendChild(tbl);
        boxContents.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border","1px");
}

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

if (to if (from   var tbody = table.tBodies[0]; // Use tbody
  //var trFrom = tbody.rows[from]; // Make sure row stays referenced
  //tbody.removeChild(trFrom); // Remove the row before inserting it (dupliate id's
  var trTo = tbody.rows[to];

  //var trClone = tbody.rows[from].cloneNode(true); // copy children too
  
  //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'); // create row node

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

     col = document.createElement('th'); // create column node
    

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

switch (i){
  case 0:
    col.innerHTML = cols[i].innerHTML; // Edit link column
    break;
    default:
        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 + '+';

    break;
}
     newHeader.appendChild(col); // append a column to row
  }

tbody.insertBefore(newHeader, trTo); // insert newHeader before trTo
return newHeader;
}

function removeHeader(tgtObj){
//alert(tgtObj.parentNode.parentNode.tagName);

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

function goHome(e){
  //alert('Going Home....');
  //window.scrollTo(0, 0);  // scroll to position(x,y)
  //alert(docY(e));
  window.scrollBy(0,-e.pageY||-99999999); // horizontal and vertical scroll increments. SLOW in IE....
  //window.scrollBy(0,-9999999999);
}