Layui select 动态赋值，input动态赋值，form表单完整校验，提交，修改等细节操作【转】
- 1.select动态赋值
将真正的value赋值给select。name为select标签后跟的name，value为想赋给select的值。
$(“select[name=example]”).val(“value”);
<!--select标签-->
<div class="layui-form-item">
<label class="layui-form-label">角色类型</label>
<div class="layui-input-block">
<select name="roleType" lay-filter="aihao" >
<option value="assignment">任务分配</option>
<option value="security-role">管理角色</option>
<option value="user">普通角色</option>
</select>
</div>
</div>
//select数根据数据库数据进行相应匹配默认
$("select[name=roleType]").val(result.data.roleType);<!--result.data.roleType为真实值-->
2.input动态赋值
$(“#id”).val(“value”); //value赋值给所指id
<!-- input标签 -->
<div class="layui-form-item">
<label class="layui-form-label">英文名称</label>
<div class="layui-input-block">
<input type="text" name="enname" >*</font> 工作流用户组标识</span>
</div>
</div>
<!-- 赋值 -->
$("#enname").val(result.data.enname);
3.完整form表单校验，提交，修改
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>角色修改</title>
<style type="text/css">
.help-inline {
display: inline-block;
padding-left: 10px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li>
<a href="http://localhost:8080/pro/start/#/sys/role/list">角色列表</a>
</li>
<li class="active">
<a href="http://localhost:8080/pro/start/#/sys/role/form">角色添加</a>
</li>
</ul>
</div>
<form class="layui-form" lay-filter="example">
<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<input type="text" name="id" placeholder="请输入" autocomplete="off" hidden >
<div class="layui-form-item">
<label class="layui-form-label">归属机构</label>
<div class="layui-input-block">
<input type="text" name="office.id" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色名称</label>
<div class="layui-input-block">
<input type="text" name="name" >
<input type="text" name="oldName" hidden>
<font color="red">*</font>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">英文名称</label>
<div class="layui-input-block">
<input type="text" name="enname" >*</font> 工作流用户组标识</span>
<input type="text" name="oldEnname" hidden>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色类型</label>
<div class="layui-input-block">
<select name="roleType" lay-filter="aihao" >
<option value="assignment">任务分配</option>
<option value="security-role">管理角色</option>
<option value="user">普通角色</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否系统数据</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="switch" name="sysData" >
<span class="help-inline">“是”代表此数据只有超级管理员能进行修改，“否”则表示拥有角色修改人员的权限都能进行修改</span>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否可用</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="switch" name="useable" >
<span class="help-inline">“是”代表此数据可用，“否”则表示此数据不可用</span>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据范围</label>
<div class="layui-input-block">
<select name="dataScope" lay-filter="aihao" >
<option value="1">本人</option>
<option value="2">全部</option>
</select>
<span class="help-inline">特殊情况下，设置为“按明细设置”，可进行跨机构授权</span>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remarks" class="layui-textarea" ></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script>
layui.use(['form', 'jquery', 'upload'], function() {
$ = layui.$;
var form = layui.form;
//获取Location对象的search属性值
var url = window.location.href;
//通过判断url链接是否有参数，从而判断是否是进入修改页面，需要加载初始数据
if(url.indexOf("?") != -1) { //判断是否有参数
$(function() {
url = url.split("?");
var tmpId = url[1].substr(1);
tmpId = tmpId.split("=");
$.ajax({
type: 'get',
url: 'http://192.168.25.38:8080/jeesite/f/sys/role/get',
dataType: "json",
data: {
"id": tmpId[1]
},
success: function(result) {
$("#office_id").val(result.data.officeIds);
$("#name").val(result.data.name);
$("#enname").val(result.data.enname);
$("#remarks").val(result.data.remarks);
$("#oldName").val(result.data.name);
$("#oldEnname").val(result.data.enname);
//select数根据数据库数据进行相应匹配默认
$("select[name=roleType]").val(result.data.roleType);
$("select[name=dataScope]").val(result.data.dataScope);
//开关状态根据数据库数据进行相应的匹配默认
var switchon2 = "";
if(result.data.sysData == "1") {
switchon2 = "checked";
}
if($("#sysData").attr("checked") != switchon2) {
$("#sysData").removeAttr('checked');
}
var switchon1 = "";
//如果数据可用的话，修改标记为checked
if(result.data.useable == "1") {
switchon1 = "checked";
}
//如果与不是默认属性checked，则移除属性checked
if($("#useable").attr("checked") != switchon1) {
$("#useable").removeAttr('checked');
}
//元素更新必须使用,否则没有效果
form.render();
},
error: function(error) {
alert(error);
}
});
});
}
//表单校验
form.verify({
name: function(value) {
var oldName = $("#oldName").val(); //获取旧名称值
var msg = "";
$.ajax({
type: "get",
url: 'http://192.168.25.38:8080/jeesite/f/sys/role/checkName',
async:false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
data: {
name: value,
oldName: oldName
},
success: function(result) {
msg = result;
},
error: function(error) {
alert(error.status);
}
});
if(msg == "false") {
return "角色名已存在";
}
},
enname: function(value) {
var oldEnname = $("#oldEnname").val(); //获取旧名称值
var msg = "";
$.ajax({
type: "get",
url: 'http://192.168.25.38:8080/jeesite/f/sys/role/checkEnname',
async:false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
data: {
enname: value,
oldEnname: oldEnname
},
success: function(result) {
msg = result;
},
error: function(error) {
alert(error.status);
}
});
if(msg == "false") {
return "英文名已存在";
}
}
});
//监听提交
form.on('submit(*)', function(data) { //submit(*)中的 * 号为事件过滤器的值，是在绑定执行提交的元素时设定的,eg:lay-filter="*"
//修改开关的值on或""
if(data.field.sysData == "on") {
data.field.sysData = "1";
} else {
data.field.sysData = "0";
}
if(data.field.useable == "on") {
data.field.useable = "1";
} else {
data.field.useable = "0";
}
$.ajax({
type: "get",
url: 'http://192.168.25.38:8080/jeesite/f/sys/role/save',
data: data.field,
success: function(result) {
if(result == "success") {
layer.msg("保存成功", {
icon: 5
});
} else {
layer.msg("保存失败", {
icon: 6
});
}
},
error: function(error) {
layer.msg("保存失败", {
icon: 6
});
}
});
return false;
});
});
</script>
</body>