下載formSelects-v4插件(引入formSelects-v4.css和formSelects-v4.js)
下載地址:https://fly.layui.com/extend/formSelects/#download
<link rel="stylesheet" href="style/formSelects-v4.css"> //引入formSelects-v4樣式
<div class="layui-form-item">
<label class="layui-form-label">系統用戶</label>
<div class="layui-input-inline">
<select id="sysusers" name="systemUserIds" xm-select-height="36px" xm-select="select2">
<!-- <option value="">請選擇</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">重慶</option> -->
</select>
</div>
</div>
//注冊插件
layui.config({
base: './js/' //路徑為插件
}).extend({
formSelects: 'formSelects-v4'
});
//使用插件,在layui.use中添加formSelects
layui.use(['element', 'laydate', 'table', 'layer', 'form', 'laypage', 'upload', 'tree', 'formSelects'], function () {
var element = layui.element
laydate = layui.laydate,
table = layui.table,
layer = layui.layer,
form = layui.form,
upload = layui.upload,
tree = layui.tree,
laypage = layui.laypage,
formSelects = layui.formSelects;
form.render();
formSelects.btns('select2', []);
getSysname: function (typeKey) {
var keys = []
$.ajax({
url: url,
type: "post",
async: true,
data:{typeKey},
success: function (data) {
//console.log(data, '系統用戶');
if(data.data){
for (var i = 0; i < data.data.length; i++) { //formSelects-v4只支持name和value兩個屬性,使用時必須為josn格式屬性必須為name和value
var temp = {
"name": data.data[i].systemUserId,
"value": data.data[i].id //value為唯一標識,此處為id
}
keys.push(temp)
}
console.log(keys)
formSelects.data('select2', 'local', { //請求數據后,將數據動態渲染到下拉框中
arr: keys
});
form.render();
}
},
});
},
formSelects.btns('select2', []); //去掉全選等工具條
formSelects.data('select2', 'local', {arr: []}); //清空下拉框數據
formSelects.value('select2',data.data.systemUsers,true); //給下拉框中追加數據,true:如果該值已選中則跳過, 該值未選中則選中;若為false:如果該值沒有選中則跳過, 該值被選中則取消選中