迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:ayq-layui-form-designer开源软件地址:https://gitee.com/ayq947/ayq-layui-form-designer开源软件介绍:中文 | English Classic modular front-end UI framework ayq-layui-form-designer最新代码将于4月1日更新介绍基于layui的表单设计器 声明:基本代码已经上传,可以在上面玩一玩,测试一下BUG,希望大家提出问题,也希望大家参与进来,提供一些有趣的组件,现在发布第一版本V1.0.0,开发和编写文档不易,要求不多,给个Star支持一下,需要一些开发动力,嘿嘿演示地址说明:基本组件已经写得差不多,后面会优化整体的功能,提升体验感,后续会优化一些显示特效,主要会做表单数据的获取与回显,手写签名组件暂时不开源,手写签名自适应pc和移动端,但可以体验一些,提出有用的意见。手写签名演示地址http://www.anyongqiang.com/HandwrittenSignature/index.html 使用说明
开发计划
入门案例(设计页面)var render = formDesigner.render({ data:[],//表单设计数据 elem:'#formdesigner' });//重新渲染数据render.reload(options)//获取相关配置信息render.getOptions() //获取表单设计数据render.getData()//获取外部编辑器对象render.geticeEditorObjects() 入门案例(视图页面)var render = formPreview.render({ elem: '#testdemo', data: [],//表单设计数据 formData: {"textarea_1":"123", "input_2":"123", "password_3":"123"}//要回显的表单数据 });//重新渲染数据render.reload(options)//获取相关配置信息render.getOptions() //获取表单设计数据render.getData()//获取外部编辑器对象render.geticeEditorObjects()//获取上传图片的id与上传路径render.getImages()//数据案例 select 对应文件对象的id uploadUrl对应文件的上传路径[{select: "imageimage_2",uploadUrl: ""}]//获取上传文件的id与上传路径render.getFiles()//数据案例 select 对应文件对象的id uploadUrl对应文件的上传路径[{select: ""filefile_1"",uploadUrl: ""}]//获取表单数据 **注意: 当前方法会避开校验规则,最好放在表单提交里面 form.on('submit(demo1)', function(data){});** render.getFormData()//回显表单数据 render.setFormData(json)//全局禁用表单render.globalDisable()//全局启用表单render.globalNoDisable() ** 说明: 这些方法有2个组件不受控制(文件组件和图片组件),我把这两个组件通过方法单独提出来,因为文件上传的方式比较多,提出来让使用者自己去定义和实现自己的文件上传方式,具体的案例在preview.html里面已经写好,你们自己参考** 基础参数
组件参数
更新日志
特技
![]() |
2022-08-15
2022-08-17
2023-10-27
2022-09-23
2022-08-13
请发表评论