- 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" 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);<!--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" 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表單校驗，提交，修改
<!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 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>