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

来源：互联网发布：淘宝助理属性不一致编辑：程序博客网时间：2024/05/16 15:36

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

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

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

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

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

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

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

ABCDEFGHIJKL...........XYZ......123456789012..........999..................................................................（双击插入表头） ABCDEFGHIJKL.........XYX......987123445768.......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 ******************
<div ondblclick="insertHeader2Click(event)" onclick="moveTo(event);">

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

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

</div>

<div id="scrollBox" style="position:absolute; background-color:lightBlue;border-width:5px; border-style:outset; visibility:hidden;">

<div name="submenu" style="text-align:center; background-color:darkgray; color:white; cursor: hand;cursor:pointer; white-space:nowrap;">
<span onmouseover="copy2Clipboard(boxContents.innerHTML);">
[Copy to Clipboard]</span>
      
<span onmouseover="boxVisibility('hidden');" >
[Close x ]</span>
</div>

<div id="boxMessage" onmouseover="javascript:this.style.visibility='hidden';" style="position:absolute; top:250px; left:30px; visibility:hidden; white-space:nowrap; background-color:darkgray; color:white; border-style:groove;"> [x] copy finished.</div>

</div>

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

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 ;}

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

function makeScrollBox(table, hdLine, bdLine){
if (hdLine<0){hdLine=0;}
if (bdLine<=0){return;} // if bdLine<=0, it's not a table line, so exit(return).
//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(<div>).

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

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

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

            for (var i = 0; i<hdCols.length; i++) {
                var row = document.createElement("tr");
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> 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 <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        //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<0){to=0;}
if (from<0){from=0;}
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<cols.length;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 + '<span title="Remove Header" style="cursor: hand;cursor: pointer;" onclick=removeHeader(this)>x</span>';
        col.innerHTML = col.innerHTML + '     ';
        col.innerHTML = col.innerHTML + '<span title="Show Detail" style="cursor:hand; cursor:pointer; font-size:small;" onclick="plusClicked(event)">+</span>';

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);
}