找回密码
 立即注册

QQ登录

只需一步,快速开始

Eric.Liang 讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2018-10-9 14:49  /   查看:15253  /  回复:1
本帖最后由 Eric.Liang 于 2018-11-12 17:05 编辑

在新版本发布来临之际,我们一直在探索活字格与自定义的HTML页面中是否可以做到交互,之前一个教程帖为大家讲解了如果在活字格中通过活字格的命令跳转本地资源HTML页面,但是那种方式只能做到跳转页面,无法进行对应的数据交互。降低了客户的易用性。
有的客户反映他们原本的前端页面逻辑都已经用代码开发完成,是否可以将这些前端页面和活字格做集成,把两者结合起来使用呢?

答案当然是可以的。活字格是个开发智力的软件

具体的做法请和我一起向下看。

1.在我们的不懈努力下,开发了一个对应的嵌套HTML页面的HTML页面插件。

2.将前端页面拷贝置活字格的资源文件目录下,或者使用自定义页面的URL链接均可(不需要拷贝HTML页面)。
image.png662013854.png

3.在活字格中设计数据表。
image.png633432921.png

4.设计活字格页面。将HTML页面插件设置在页面左上角,页面设为双向拉伸,将其他单元格全部隐藏,这样浏览器打开就只能看到自定义的HTML页面。
image.png820538329.png

5.HTML页面插件绑定对应的自定义HTML页面名称或者自定义页面URL链接。
image.png86467589.png

6.页面中其余的表格,按钮,绑定字段均是为了在自定义页面中获取做的测试。
image.png213269042.png

7.修改自定义页面的HTML代码和JS代码,用于与活字格进行交互。通过Forguncy = window.parent.Forguncy;$ = window.parent.$;引用活字格对象和jquery对象,其他JS操作见活字格官方API。
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <script>
  5.             function getCellValue(){
  6.                 alert(Forguncy.Page.getCell("Name").getValue());
  7.             }        
  8.             function getValueFromListView(){
  9.                 var listView = Forguncy.Page.getListView("Table1");
  10.                 var result = [];
  11.                 for(var i = 0; i< listView.getRowCount();i++){
  12.                     result.push(listView.getValue(i, "Name"));
  13.                 }
  14.                 alert(JSON.stringify(result));
  15.             }
  16.             function getValueByApi(){
  17.                 Forguncy.getTableDataByOData("Table1", function(data){
  18.                     alert(JSON.stringify(data));
  19.                 });
  20.             }
  21.             function executeCommand(){
  22.                 $("[fgcname='button'] button").click();
  23.             }
  24.         </script>
  25.     </head>
  26.     <body>
  27.         <H1>你好,我是活字格用的自定义页面。</H1>
  28.         <input type="button" onclick="getCellValue()" value="获取隐藏区域单元格的值"/>
  29.         <input type="button" onclick="getValueFromListView()" value="获取表格上的值"/>
  30.         <input type="button" onclick="getValueByApi()" value="通过Api获取数据库的值"/>
  31.         <input type="button" onclick="executeCommand()" value="执行单元格的命令"/>
  32.         <script>
  33.             Forguncy = window.parent.Forguncy;
  34.             $ = window.parent.$;
  35.         </script>   
  36.     </body>
  37. </html>
复制代码

8.效果如下:
自定义页面或者活字格数据.gif

工程文件,自定义HTML页面见附件。
嵌套自定义HTML页面插件见活字格论坛插件中心:https://gcdn.grapecity.com.cn/showtopic-50577-1-1.html




demo.html

1.47 KB, 下载次数: 655

嵌入HTMLDemo.fgcc

525.06 KB, 下载次数: 1066

1 个回复

倒序浏览
willning
超级版主   /  发表于:2022-8-15 15:22:46
沙发
提示:
如果iframe内外的页面不在同一个域,浏览器会禁止直接调用内外的JavaScript对象。此时,需要利用postMessage方法来实现iframe内外通信。详细做法,可以参考这篇文章:
http://events.jianshu.io/p/b2b20d6acdc6
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部