14 Star 212 Fork 87

adminj / layui-form-render

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
Apache-2.0

AdminJ layui-form-render

界面图

介绍

基于layui的表单设计器,自己的一个开源项目里提出来的子项目,主要参考了阿狸的那个VUE的 form render,目前此项目处于开始阶段,另外并没有跟layui集成,如果想集成到一起只需要把HTML>body的内容放在变量里在render() 里开头写入即可

AdminJ layui-form-render 不只是生成html form 还另外提供了 AdminJFormData form的数据初始化组件(数据)并生成验证代码功能(参考editor_base.html),开箱即用。

演示地址: http://47.244.155.29:13308/editor/editor.html

扩展左则按钮和右则属性演示地址: http://47.244.155.29:13308/editor/editor_external.html

软件架构

基于layui开发,所使用的插件:

插件 说明
sortable 很COOL的拖动排序功能
jquery-sortable 让sortable支持Jquery的插件
select2 下拉多选框
ckeditor5 H5的文本编辑器

使用说明

var formRender = new AdminJLayuiFormRender();
formRender.exportToHTML();//导出html
formRender.importJSON('json');//导入逆向生成html
formRender.exportJSON();//导出JSON
formRender.disabledAll(formId, true/false);//禁用/启用所有字段
formRender.disabled(formId, ['title','username'], true/false);//禁用/启用title,username
参数 说明
id 组件ID text,image
label label
name input的唯一名称
labelWidth label列宽 px
rowWidth 行宽 %
inputWidth 输入框宽 %
validateRule 验证规则 array
comment 输入框后的说明
required 必填(选)
placeholder 输入框内的提示
defValue 默认值
minValue 最小值
maxValue 最大值
minLength 最小长度
maxLength 最大长度
options array(radio,checkbox select 选择项)
layuiSkin checkbox以layui样式显示
dateFormat 时间格式化样式
currentTime 当前时间为初始值
milliscondFormat 提交数据时格式化为毫秒
startDateName 时间范围开始时间的name
endDateName 时间范围结束时间的name
showInput 滑块是否显示输入框
suffix 滑块拖动时显示的后缀
rateCount 评分显示的星星总数
uploadType array 文件上传的类型
minSize 文件上传最小大小
maxSize 文件上传最大大小
uploadUrl 文件上传地址
uploadCount 最大文件上传数量
groupCount 多组布局的例的数量

AdminJFormData (editor_base.html) 功能使用说明

AdminJFormData 是对form render的增强,如果你在导出的html form里选择了长度,最大值 最小值验证等、使用了编辑器、滑块,用AdminJFormData会自动初始化这些组件并且生成验证功能,其节省的时间比 form render要多的多。

  • 如何使用:只需要把 form render 导出的html粘到 editor_base.html 的body 内就OK,功能参考 预览 功能

AdminJFormData集成说明

  • 初始化AdminJFormData 导入js:
<script src="adminj/adminj_form.js"></script>
<script src="adminj/adminj_utils.js"></script>
  • 获取AdminJFormData对像
var adminJFormData = layui.adminJFormData;
  • 初始化html form,初始化各种组件和初始值:
adminJFormData.init(_json, 'form');//_json 为form render导出 html时自动生成的代码,第2个参数为 form 的 lay-filter 值
  • 初始化数据:
var d={"hidden":"f","text":"123","textarea":"nn","password":"1222333","select":"2","radio":"2","checkbox":["0","2"],"select2":["0","2"],"color":"#0f3e62","switch":"1"};
adminJFormData.setData('form',d);//第一个参数为 form 的 lay-filter 值, 另外checkbox、select2的值必须是array
  • 取数据:
var data = adminJFormData.getData('form');//第一个参数为form 的 lay-filter 值

关于图片上传结果: 需要server返回 resultCode=0,result.filename=上传文件名 的json的数据结构,如果是多文件上传则getData时对应字段拿到的是个array,单文件是string 样例:{resultCode:0,message:"",result:结果}

resultCode 0 上传成功返回0
result.filename xx.jpg 上传成功的文件名

使用例子如下:

layui.use('element', function () {
        var adminJFormData = layui.adminJFormData;
        adminJFormData.init(_json, 'form');

        //初始化form数据
        var d={"hidden":"f","text":"123","textarea":"nn","password":"1222333","select":"2","radio":"2","checkbox":["0","2"],"select2":["0","2"],"color":"#0f3e62","switch":"1"};
        adminJFormData.setData('form',d);

        layui.form.on('submit(postButton)', function (data) {
            var data = adminJFormData.getData('form');//取form的数据
            var val = JSON.stringify(data);
            console.log(val)

            return false;
        });

    });

无限级联动 数据API说明

提交数据

parentId 上级ID 初始化时传值 ,在最顶级时 parentId会传空字符
selectId 选中的ID 在编辑时传值,与parentId只传一个值,传selectId时server必须返回 selectId所在级别的数据和它所有上级的数据列表,传selectId时parentId无效

返回数据

isSelect 是否选中 "0" 是 "1" 否
text 显示的文本
value select value

传parentId时返回的完整数据样例

{"resultCode":0,"result":[{"isSelect":"1","text":"title0","value":"0"},{"isSelect":"1","text":"title1","value":"1"},{"isSelect":"1","text":"title2","value":"2"}]}

传selectId时返回的完整数据样例

{"resultCode":0,"result":[[{"isSelect":"1","text":"title0","value":"0"},{"isSelect":"1","text":"title1","value":"1"},{"isSelect":"0","text":"title2","value":"2"}],[{"isSelect":"1","text":"title0","value":"0"},{"isSelect":"1","text":"title1","value":"1"},{"isSelect":"0","text":"title2","value":"2"}],[{"isSelect":"1","text":"title0","value":"0"},{"isSelect":"1","text":"title1","value":"1"},{"isSelect":"0","text":"title2","value":"2"}]]}

参与贡献

2开简单说明

在html里找到下面代码

<span id="cpts_items" style="display: none">

所有的拖动后生成的组件都在这里,可以显示出来进行编辑预览等操作

  • **11-26修正了 adminJFormData BUG,增加了禁用启用表单功能,增加了扩展左则按钮和右则属性演示

  • 8-2 增加无限级选择联动 修改了ajax请求时返回的结果的key name ,包括数据请求和文件上传 ,标准为{resultCode:0,message:"",result:结果} ,可在 config.ajaxRequestName 自定义

  • 8-1 发布 AdminJFormData 版本

  • 2021-7-2? 发布第一个form render版本

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

About

基于layui的表单设计器 expand collapse
JavaScript and 4 more languages
Apache-2.0
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/adminj/layui-form-render.git
git@gitee.com:adminj/layui-form-render.git
adminj
layui-form-render
layui-form-render
master

Search