~~~ /** * 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> ~~~