layui 表单增强插件

分享 未结
18 3229
或丶许
悬赏:30飞吻
/**
* 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对象
    简单三步,就能把表单数据赋值给表单了。
    2 回复
  • 给个图也感觉好点
    1 回复
  • DC
    2018-3-8
    给个演示地址呀~~
    0 回复
  • @DC 没得演示地址呀
    0 回复
  • Oozie
    2018-3-8
    @DC 使用说明可以说一下么
    0 回复
  • @Oozie 用法很简单的。
    0 回复
  • @柒爱 更多的,需要自己改写
    0 回复
  • layui,用到生成环境时。需要自己扩展很多
    0 回复
  • 柒爱
    2018-3-8
    @或丶许 你这个特别符合我的需求,直接拿过来就可以用[哈哈]
    我自己也写了一个,还没测试。
    看了你的才发现单选复选和下拉选择框赋完值后还需要局部渲染下。
    我给忘记了。[害羞]
    0 回复
  • @或丶许 同意,开始看着觉得功能很多很丰富,但是用的时候发现很多小的功能点都没有,很难满足开发,没办法很多就自己手工去写了。扩展。[汗]
    0 回复
  • 楼主能否写多一点DEMO,包括json格式,调用方式,小白用户表示需要一个齐全的页面环境才能够懂得怎么用。

    感谢![good]
    0 回复
  • Gcode
    2018-3-9
    强,感觉楼主分享[good]
    0 回复
  • moposun
    2018-3-10
    [赞] 感谢!
    0 回复
  • 厉害,感觉楼主分享[赞]
    0 回复
  • 此乃神器也
    0 回复
  • cwh0704
    2018-4-8
    下拉框select组件 与 文本域 textarea,不起作用
    源码中文本域没有去设置,可是下拉框设置了呀?
    0 回复
  • @cwh0704 select是可以的,textarea需要你自己加下了。
    0 回复
  • 南竹
    2018-5-24
    一脸懵逼的进来,一脸懵逼的出去
    0 回复