layui 表单增强插件

转自：http://fly.layui.com/jie/23002/

/**
 * Created by  Doyle on 2018年3月6日17点09分
 * layui表单增加插件
 * 
 * 
 * 
 */
layui.define(['jquery', 'form'],
    function(exports) {
        var $ = layui.jquery,
            form = layui.form,
            formObj,
            hint = layui.hint();
        var EnhanceForm = function(options) {
            this.options = options;
            formObj = $(options.elem);
        };
        /**
         * 设置select选中值
         * @param {String} name 对象名称，指“name”
         * @param {String} val 值
         * @param {Boolean} isOnSelect 是否触发选中事件
         * @returns {} 
         */
        EnhanceForm.prototype.setSelectVal = function(name, val, isOnSelect) {
            if (name === undefined) {
                throw "name no undefined";
            }
            formObj.find('select[name="' + name + '"]').val(val);
            form.render('select');
            if (typeof (isOnSelect) === "boolean") {
                if (isOnSelect) {
                    formObj.find("dd[lay-value='" + val + "']").trigger("click");
                }
            }
            return this;
        };
        /**
         * 设置radio选中
         * @param {String} name 对象名称，指“name”
         * @param {String} val 对象值
         * @returns {} 
         */
        EnhanceForm.prototype.setRadioVal = function(name, val) {
            if (name === undefined) {
                throw "name no undefined";
            }
            formObj.find('input[type="radio"][name="' + name + '"][value="' + val + '"]').prop("checked", true);
            form.render('radio');
            return this;
        };
        /**
         * 设置checkbox选中
         * @param {String} name 对象名称，指“name”
         * @returns {} 
         */
        EnhanceForm.prototype.setCheckboxVal = function(name) {
            if (name === undefined) {
                throw "name no undefined";
            }
            formObj.find('input[type="checkbox"][name="' + name + '"]').prop("checked", true);
            form.render('checkbox');
            return this;
        }
        /**
         * 设置表单元素禁用
         * @param {String} type 类型，select、checkbox、radio
         * @param {String} name  对象名称，指“name”
         * @param {String} val 值，radio元素需要用到
         * @returns {} 
         */
        EnhanceForm.prototype.setElemDisabled = function(type, name, val) {
            switch (type) {
            case "select":
                formObj.find('select[name="' + name + '"]').prop("disabled", true);
                form.render('select');
                break;
            case "checkbox":
                formObj.find('input[type="checkbox"][name="' + name + '"]').prop("disabled", true);
                form.render('checkbox');
                break;
            case "radio":
                if (val === undefined) {
                    throw "val不能为undefined";
                }
                formObj.find('input[type="radio"][name="' + name + '"][value="' + val + '"]').prop("disabled", true);
                form.render('radio');
                break;
            default:
                hint.error('layui.enhanceform 不支持该类型，type：' + type);
            }
            return this;
        }
        /**
         * 表单填充
         * @param {Object} data 
         * @returns {} 
         */
        EnhanceForm.prototype.filling = function(data) {
            if (typeof data !== "object") {
                throw "data no object";
            }
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    var inputs = formObj.find('input[name = "' + key + '"]');
                    if (inputs.length > 0) {
                        var input = inputs[0];
                        switch (input.type) {
                        case "text":
                            input.value = data[key];
                            break;
                        case "hidden":
                            input.value = data[key];
                            break;
                        case "radio":
                            this.setRadioVal(key, data[key]);
                            break;
                        case "checkbox":
                            if (data[key] === true) {
                                this.setCheckboxVal(key, data[key]);
                            }
                            break;
                        }
                    } else {
                        var select = formObj.find('select[name="' + key + '"]');
                        if (select.length > 0) {
                            this.setSelectVal(key, data[key], true);
                        }
                    }
                }
            }
            return this;
        };
        /**
         * 接口输出
         */
        exports('enhanceform',
            function(options) {
                var enhance = new EnhanceForm(options = options || {});
                var elem = $(options.elem);
                if (!elem[0]) {
                    return hint.error('layui.enhanceform 没有找到' + options.elem + '元素');
                }
                return enhance;
            });
    });

1、包含select、radio、checkbox设置选中值，后自动渲染，
2、select、checkbox、radio对象设置禁用，后自动渲染
3、表单填充值

---

使用方法

<script type="text/javascript">
    layui.config({
        base: '../Scripts/layui-expand/' //插件路径
    }).extend({
        enhanceform: 'enhanceform'
    });
    layui.use(['form', 'enhanceform'],
        function() {
            var form = layui.form,
                enhanceForm = layui.enhanceform;
            var enhance = new enhanceForm({
                elem: '#mainForm' //表单选择器
            });
        /**
         * 设置select选中值
         * @param {String} name 对象名称，指“name”
         * @param {String} val 值
         * @param {Boolean} isOnSelect 是否触发选中事件
         * @returns {} 
         */
          1、enhance.setSelectVal
         /**
         * 设置radio选中
         * @param {String} name 对象名称，指“name”
         * @param {String} val 对象值
         * @returns {} 
         */
         2、enhance.setRadioVal
         /**
         * 设置checkbox选中
         * @param {String} name 对象名称，指“name”
         * @returns {} 
         */
          3、 enhance.setCheckboxVal
           /**
         * 设置表单元素禁用
         * @param {String} type 类型，select、checkbox、radio
         * @param {String} name  对象名称，指“name”
         * @param {String} val 值，radio元素需要用到
         * @returns {} 
         */
          4、enhance.setElemDisabled
         /**
         * 表单填充
         * @param {Object} data 
         * @returns {} 
         */
          5、 enhance.filling({ testSelect: 2 }); //表单填充
        });

</script>

回帖

柒爱

2018-3-8

用起来真的很简单!

var enhanceForm = layui.enhanceform;
var enhance = new enhanceForm({
          elem: '#userEditForm' //表单选择器
});
enhance.filling(jsonData);//其中jsonData为表单数据的json对象