首页 数据库 mysql教程 APEX 3.2上Interactive Report 的表头复制(1)(APEX4.1下运行通

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

Jun 07, 2016 pm 03:01 PM
apex 表头

最近为公司一个部门写了一个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:

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

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





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

 

 

 

 

 

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

说明InnoDB全文搜索功能。 说明InnoDB全文搜索功能。 Apr 02, 2025 pm 06:09 PM

InnoDB的全文搜索功能非常强大,能够显着提高数据库查询效率和处理大量文本数据的能力。 1)InnoDB通过倒排索引实现全文搜索,支持基本和高级搜索查询。 2)使用MATCH和AGAINST关键字进行搜索,支持布尔模式和短语搜索。 3)优化方法包括使用分词技术、定期重建索引和调整缓存大小,以提升性能和准确性。

如何使用Alter Table语句在MySQL中更改表? 如何使用Alter Table语句在MySQL中更改表? Mar 19, 2025 pm 03:51 PM

本文讨论了使用MySQL的Alter Table语句修改表,包括添加/删除列,重命名表/列以及更改列数据类型。

可以在 Windows 7 上安装 mysql 吗 可以在 Windows 7 上安装 mysql 吗 Apr 08, 2025 pm 03:21 PM

是的,可以在 Windows 7 上安装 MySQL,虽然微软已停止支持 Windows 7,但 MySQL 仍兼容它。不过,安装过程中需要注意以下几点:下载适用于 Windows 的 MySQL 安装程序。选择合适的 MySQL 版本(社区版或企业版)。安装过程中选择适当的安装目录和字符集。设置 root 用户密码,并妥善保管。连接数据库进行测试。注意 Windows 7 上的兼容性问题和安全性问题,建议升级到受支持的操作系统。

与MySQL中使用索引相比,全表扫描何时可以更快? 与MySQL中使用索引相比,全表扫描何时可以更快? Apr 09, 2025 am 12:05 AM

全表扫描在MySQL中可能比使用索引更快,具体情况包括:1)数据量较小时;2)查询返回大量数据时;3)索引列不具备高选择性时;4)复杂查询时。通过分析查询计划、优化索引、避免过度索引和定期维护表,可以在实际应用中做出最优选择。

如何为MySQL连接配置SSL/TLS加密? 如何为MySQL连接配置SSL/TLS加密? Mar 18, 2025 pm 12:01 PM

文章讨论了为MySQL配置SSL/TLS加密,包括证书生成和验证。主要问题是使用自签名证书的安全含义。[角色计数:159]

哪些流行的MySQL GUI工具(例如MySQL Workbench,PhpMyAdmin)是什么? 哪些流行的MySQL GUI工具(例如MySQL Workbench,PhpMyAdmin)是什么? Mar 21, 2025 pm 06:28 PM

文章讨论了流行的MySQL GUI工具,例如MySQL Workbench和PhpMyAdmin,比较了它们对初学者和高级用户的功能和适合性。[159个字符]

InnoDB中的聚类索引和非簇索引(次级索引)之间的差异。 InnoDB中的聚类索引和非簇索引(次级索引)之间的差异。 Apr 02, 2025 pm 06:25 PM

聚集索引和非聚集索引的区别在于:1.聚集索引将数据行存储在索引结构中,适合按主键查询和范围查询。2.非聚集索引存储索引键值和数据行的指针,适用于非主键列查询。

您如何处理MySQL中的大型数据集? 您如何处理MySQL中的大型数据集? Mar 21, 2025 pm 12:15 PM

文章讨论了处理MySQL中大型数据集的策略,包括分区,碎片,索引和查询优化。

See all articles