表单生成器 formGenerator

在这里插入图片描述

<!--自定义表单-->  
<link href="/plugins/formGenerator/formGenerator.css" rel="stylesheet">  
<script src="/plugins/formGenerator/formGenerator.js"></script>  
<script src="/plugins/formGenerator/formGenerator-plugin.js"></script>

github https://github.com/abook23/formGenerator

Github

<div id="add_div"></div>

<script>
    formGenerator.addFormInit({
        elem: '#add_div',
        data: rowData,//全局赋值来源
        inputs: [
            {name: "userName", text: '登录名', required: 'required'},
            {name: "password", text: '密码', required: 'required'},
            {name: "name", text: '用户名', required: 'required', data: rowData.userInfo},
            {name: "phone", text: '手机号', required: 'required', data: rowData.userInfo},//局部赋值来源
            {name: "email", text: '邮箱', required: 'required', data: rowData.userInfo},
            {name: "qq", text: 'QQ', data: rowData.userInfo},
            {
                name: "status",
                text: '状态',
                type: 'select',
                options: [{text: '启用', value: '1'}, {text: '禁用', value: '0'}]
            },
            {
                name: 'type',
                text: '用户类型',
                type: 'select',
                options: [{text: '前台用户', value: 1}, {text: '后台用户', value: 2}],
            },
        ],
        save: function (layerIndex) {
            let param = $('#add_div_form').serializeJson();
            param.userId = rowData.userId;
            console.log(param);
            $.post("/user/save", param, function (data) {
                layer.msg(data.msg, {
                    time: 1000 //s后自动关闭
                }, function () {
                    layer.close(layerIndex);
                    table.refresh();
                });
            });
            return false;
        }
    });
</script>

表格参数

名称类型默认示例描述
elemstring必填‘#add_div’id,class,$(属性)
dataobject{}{name: “张山”, age: 12}初始化赋值,适用用于编辑自动赋值
inputsarray必填参考inputs 属性
validatefunctionvalidate:function(from)自定义验证,默认用jquery.validate.min.js
saveFunctionsave: function (layerIndex) {表单 验证通过,回调
closeFunction关闭按钮

inputs参数

名称类型默认示例描述
namestring必填{name: “userName”,…name 属性值
textstring必填text: ‘登录名’text 属性值
requiredBoolean/Stringrequired:true or required: ‘required’是否启用验证
dataobj优先级 value > data >全局 data
typeStringtexttext/number/time/dateTime/select/textarea/button更多请到formGenerator-plugin.js自定义
valueobjvalue:1赋值:优先级 value > data >全局 data
optionsarray[{text: ‘启用’, value: ‘1’}, {text: ‘禁用’, value: ‘0’}]设置 option 时,自动切换成 select
urlString/menu/list远程option 参数地址,会自动叠加到 options,如果数据格式不是[{text: ‘启用’, value: ‘1’}, {text: ‘禁用’, value: ‘0’}],请设置data
dataurl: ‘/menu/list’, data: {text: ‘name’, value: ‘menuId’}当设置 url 是,data不在是赋值,而是数据转换声明 在这里插入图片描述
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值