Day03 Layui select 动态赋值，input动态赋值，form表单完整校验，提交，修改等细节操作
- 1.select动态赋值
将真正的value赋值给select。name为select标签后跟的name，value为想赋给select的值。
$(“select[name=example]”).val(“value”);
<div class="layui-form-item">
<label class="layui-form-label">角色类型label>
<div class="layui-input-block">
<select name="roleType" lay-filter="aihao" id="roleType" lay-verify="required">
<option value="assignment">任务分配option>
<option value="security-role">管理角色option>
<option value="user">普通角色option>
select>
div>
div>
//select数根据数据库数据进行相应匹配默认
$("select[name=roleType]").val(result.data.roleType);
- 2.input动态赋值
$(“#id”).val(“value”); //value赋值给所指id
<div class="layui-form-item">
<label class="layui-form-label">英文名称label>
<div class="layui-input-block">
<input type="text" name="enname" id="enname" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|enname"><span><font color="red">*font> 工作流用户组标识span>
div>
div>
$("#enname").val(result.data.enname);
- 3.完整form表单校验，提交，修改
<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">
<input type="text" name="id" placeholder="请输入" autocomplete="off" hidden id="id">
<div class="layui-form-item">
<label class="layui-form-label">归属机构label>
<div class="layui-input-block">
<input type="text" name="office.id" id="office_id" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">角色名称label>
<div class="layui-input-block">
<input type="text" name="name" id="name" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|name">
<input type="text" name="oldName" id="oldName" placeholder="请输入" autocomplete="off" 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" id="enname" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|enname"><span><font color="red">*font> 工作流用户组标识span>
<input type="text" name="oldEnname" id="oldEnname" placeholder="请输入" autocomplete="off" 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" id="roleType" lay-verify="required">
<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" id="sysData" checked="checked">
<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" id="useable" checked="checked" lay-filter="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" id="dataScope">
<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" id="remarks">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>