ABI移动端页面表单回填报表开发心得分享

3274
1

leiz 小试身手Lv3

发表于2020-10-20 16:27

楼主
本帖最后由 leiz 于 2020-10-20 16:32 编辑

最近有做一个简单的ABI移动端页面表单回填的报表,下面有一些小小的经验分享一下~
  移动页面开发主要就是布局的问题,因为PC端的布局效果和移动端展示的效果是有差异的,通过浏览器F12即可看到,PC端的样式和移动端的样式是不一样的,所以布局这块如果展示效果不是很好的话,就需要配合客户端脚本一起使用。
  1.PC端查看移动端样式的方法,将报表区的设备名称改成手机,计算后F12进入开发者工具,开发者工具中切换设备为手机即可看到移动端的样式代码,如图
截图202010201631303665.png
    2.比较常用的小脚本
输入框在移动端展示的时候,在未输入内容是显示的是请输入,表单组件中单行输入框、下拉框在右侧属性中有一个输入框提示和下拉框提示可以直接使用,但是多行输入框是没有这个属性的,需要用到以下客户端脚本控制:
  1. $("#HHH14 textarea").attr({"placeholder":"要提示的内容"}) //HHH14为组件代号
复制代码
设置组件的背景颜色以及透明度、字体颜色
  1. $("#HHH55 input,#HHH9 input,#HHH14 textarea").css({"background":"#0a0b39","opacity":"0.55","color":"#fff"})
复制代码
动态控制组件的显示和隐藏(因为PC端和移动端样式不一样,所以脚本不是通用的,下面是移动端的客户端脚本):
  1. document.getElementById("HHH9").style.display="none";//组件默认隐藏
  2. document.getElementById("HHH14").style.display="none";//组件默认隐藏
  3. var mutationObserver = new MutationObserver(function(mutations) {
  4.                 mutations.forEach(function(mutation) {
  5.                     /************************当DOM元素发送改变时执行的函数体***********************/
  6.                         if(mutation.attributeName === "title") {
  7.                                 if($("#HHH87 input.eui-form-input").val() == "其他") {  //当HHH87组件的值等于多少时,HHH9、HHH14组件显示,否则就隐藏
  8.                                         document.getElementById("HHH9").style.display="flex";
  9.                                         document.getElementById("HHH14").style.display="block";
  10.                                 } else {
  11.                                         document.getElementById("HHH9").style.display="none";
  12.                                         document.getElementById("HHH14").style.display="none";
  13.                                 }
  14.                         }
  15.                   
  16.                     /*********************函数体结束*****************************/
  17.                 });
  18.             });
  19.                                                               /**Element**/
  20.             mutationObserver.observe($("#HHH87 input.eui-form-input").get(0), {
  21.                 attributeFilter: [ "title"],
  22.                 attributes: true,
  23.                 characterData: true,
  24.                 childList: false,
  25.                 subtree: true,
  26.                 attributeOldValue: true,
  27.                 characterDataOldValue: true
  28.             });
复制代码
按钮实现居中效果:
  1. $("#HHH101").css({"display":"block","margin":"18px auto"});
复制代码



还发现了一个ABI524版本新加的实用小功能,当组件的回填属性不勾选允许为空的时候,可以选择是否显示必填标识:
截图202010201624269259.png

好啦~简单的分享就到这里,ABI524版本还增加了其他很多实用的功能,等待各位发掘~~~

最近看过此主题的会员

myyouping

esen_3G8UN21O2849

esen_4O6N6U6ZN2

chestnut

JCsang

15830170651

13407717840

1个回答

只看楼主

xxxl 数据领袖Lv6

发表于2020-10-20 16:33

只看该作者

取消 关注该作者的回复

沙发

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号