帮你打开活字格更神奇的功能：四十五，集成自定义HTML页面（上）

收藏 · 2018-11-12 17:04 上传

本帖最后由 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。

<html>
<head>
<meta charset="utf-8">
<script>
function getCellValue(){
alert(Forguncy.Page.getCell("Name").getValue());
}
function getValueFromListView(){
var listView = Forguncy.Page.getListView("Table1");
var result = [];
for(var i = 0; i< listView.getRowCount();i++){
result.push(listView.getValue(i, "Name"));
}
alert(JSON.stringify(result));
}
function getValueByApi(){
Forguncy.getTableDataByOData("Table1", function(data){
alert(JSON.stringify(data));
});
}
function executeCommand(){
$("[fgcname='button'] button").click();
}
</script>
</head>
<body>
<H1>你好，我是活字格用的自定义页面。</H1>
<input type="button" onclick="getCellValue()" value="获取隐藏区域单元格的值"/>
<input type="button" onclick="getValueFromListView()" value="获取表格上的值"/>
<input type="button" onclick="getValueByApi()" value="通过Api获取数据库的值"/>
<input type="button" onclick="executeCommand()" value="执行单元格的命令"/>
<script>
Forguncy = window.parent.Forguncy;
$ = window.parent.$;
</script>
</body>
</html>

复制代码

8.效果如下:

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

willning · willning

提示：
如果iframe内外的页面不在同一个域，浏览器会禁止直接调用内外的JavaScript对象。此时，需要利用postMessage方法来实现iframe内外通信。详细做法，可以参考这篇文章：
http://events.jianshu.io/p/b2b20d6acdc6

		自动登录	找回密码
密码			立即注册

[神奇功能] 帮你打开活字格更神奇的功能：四十五，集成自定义HTML页面（上）

1 个回复

讲师达人

悬赏达人

元老葡萄

活字格认证

活字格高级认证

微信认证勋章