# layui-form-render

**Repository Path**: x_mier/layui-form-render

## Basic Information

- **Project Name**: layui-form-render
- **Description**: 基于layui的表单设计器
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 91
- **Created**: 2021-08-18
- **Last Updated**: 2021-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AdminJ layui-form-render

![界面图](https://images.gitee.com/uploads/images/2021/0720/001030_f747e566_9463723.jpeg "editor1.jpg")

 **现在正在进行比较大的改版，主要是代码方面的，最近几天会提交...** 

#### 介绍
基于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

#### 软件架构
基于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.importHtmlJSON(json);//导出HTML后，可以把导出的HTML开头的_json里的数据粘出来后通过些函数逆向生成form
```
| 参数           | 说明      |            |
|--------------|---------|------------|
| 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开简单说明

1. 在initLeftUI()方法cpts_base增加左边拖动按钮,如:'rate': '评分'
2. 在html的body>#cpts_items下增加自定义组件，拖放完成后会替换成这里的代码,需要增加参数 cpt_id='rate' rename='true/false' 增加css 'adminj-sort-item'，如果你增加的容器组件，需要在容器组件里放其它拖放组件的上一级增加css 'adminj-col-item' ，然后把有'adminj-col-item'的节点绑定拖动事件:that.createSortable('有adminj-col-item节点的ID', {}),初始化组件事件参考第3步,参考renderGroupLayout

| cpt_id | 组件名             |                 |
|--------|-----------------|-----------------|
| rename | true/false | 是否对节点下的:input改名，组件的初始化name,不是ID |


3. 在initInputComponents()里的components 节点增加 renderXX 初始化组件，如果你cpts_base的组件名是 rate ,方法名则为 renderRate
4. 在initRightPropertiesComponents().tools 里增加点击组件后右边显示的属性编辑器，方法命名为 tools.renderXXX，如果你cpts_base的组件名是 rate ,方法名则为 tools.renderRate
5. 导入导出，如果是非容器组件不需要再进行其它操作，会自动完成，容器组件自行参考代码 groupLayout、tab



-  **8-13 增加选项卡组件,增加html json转form(导入HTML JSON)** 

    - 增加选项卡组件
    - html json转form(导入HTML JSON):导出HTML后，可以把导出的HTML开头的_json里的数据粘出来后通过些函数逆向生成form
    - 这里是列表文本修正导出html时里生成的json有重复数据问题
    - 这里是列表文本修正admin_form js里里groupLayou子组件不显示BUG
    - 这里是列表文本修正其它小BUG

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

-  **8-1 发布 AdminJFormData 版本** 

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