# 运行创建表单 for layui

**Repository Path**: qing1000/buildform

## Basic Information

- **Project Name**: 运行创建表单 for layui
- **Description**: js运行时根据字段数组生成表单的代码，直接显示。
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-03-03
- **Last Updated**: 2024-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 运行创建表单 for layui

#### 介绍
js运行时根据字段数组生成表单的代码，直接显示。
目前设计显示有二种方式：以DIV绑定直接显示，以对话窗口打开方式显示。

#### 软件架构
软件架构说明
1、要求layui 2.9.0版本以上
2、其它js要求与layui一致。

#### 安装教程

1.  直接下载，放到layui扩展目录下可以

#### 使用说明

1.  各个参数说明：
(1)elem:div绑定元素显示， 如'#demo',//div显示<div id="demo"></div> 要绑定DIV，dialog显示不需要
(2)viewtype:表单显示方式，div或dialog,
(3)form:表单设置参数，如id即表单form的Id，filter即lay-filter，filter不填则于id一致，showButton:false,labelcss:'',inputcss:'', showButton是否显示“确定”、“重置”按钮，labelcss标题列的宽度样式，inputcss表单元素列的宽度样式
(4)dialog:窗口参数，如设area,title,isma
(5)fiead:字段，各个输入框的参数
(6)initValue:初始值
(7)formSubmit:表单提交事件处理
2. 演示代码
var form1 = buildform.render({
    elem: '#demo',//div显示 要绑定DIV，dialog显示不需要
   //viewtype:"dialog",
   form: {showButton:true}, //id即表单form的Id，filter即lay-filter，filter不填则于id一致
  //form其他默认参数：showButton:false,labelcss:'',inputcss:'', showButton是否显示“确定”、“重置”按钮，labelcss标题列的宽度样式，inputcss表单元素列的宽度样式
  dialog:{},//设area,title,ismax
  fields: [
    {field: 'Id',title: 'Id',type: 'hide'},
    {field: 'FacCode', title: '厂商编号', type: 'text', comment: '后台自动生成', readonly: true },
    {field: 'FacName', title: '厂商名称', type: 'text', verify: true },
    {field: 'FacType',	title: '厂商类型',type: 'checkbox',option: {	"生产商": 0,	"供应商": 1,	"维修商": 2},verify: true,skin: "primary"},
    {field: 'state',title: '状态',type: 'switch',text: '东|北'},
    {field: 'Area',	title: '所属地区',type: 'select',option: {"": "","北京": 0,"上海": 1,	"广州": 2},verify: false	},
    {title: '我是分割线',type: 'hr'},
    {field: 'YwLinkPhone',title: '业务联系人电话',type: 'text'},
    {field: 'pw1',title: '口令',	type: 'password',affix: 'eye'},
    {field: 'CreateDate',title: '创建日期',	type: 'datetime',format: 'laydate'	},
    {field: 'JoinDate',	title: '加入月份',type: 'datetime',	format: 'laymonth'},
    {field: 'Status',title: '启用状态',type: 'radio',option: {"启用": 1,"停用": 2	}},
    {field: 'Remark',title: '备注',type: 'textarea',	comment: '补充说明'},
    {field: 'testhtml',title: '测试html',type: 'html',html: '<select name="city" id="city" lay-verify="required"><option value=""><option value="0">北京</option></option></select>'	},
    ],
    initValue:{state:"on",FacType:['0','2'],CreateDate:'2024-2-2',Area:1},
    formSubmit: function(field) {
        layer.alert(JSON.stringify(field), {
	    title: '当前填写的字段值'
	});
	return false; // 阻止默认 form 跳转
    }
});

 **3.  效果图** 

![输入图片说明](div1.jpg)
![输入图片说明](dialog.jpg)

![输入图片说明](div_value.jpg)


#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)