<强>一、layui下拉复选实现的背景:实现一个管理员拥有多个权限
<强>二,具体实现:
//依赖资源
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/$ {pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.css”rel=巴獠縩ofollow”/比;
& lt; !——引入组件——比;
& lt;脚本src=" https://www.yisu.com/zixun/$ {pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>//页面显示
& lt; div类=發ayui-inline”比;
& lt;标签类=" layui-form-label "祝辞角色:& lt;/label>
& lt; div类=發ayui-input-block”比;
& lt;选择name=" role_id " id=" role_id " xm-select-height=?6 px”
xm-select-search xm-select-skin=澳稀眡m-select=皊ys_role lay-filter”=皊ys_role”比;
& lt;/select>
& lt;/div>
& lt;/div>//配置路径
layui.config ({
基础:“$ {pageContext.request。contextPath}/src/layui-formSelects-master/dist/"//formSelects-v4.js的路径
.extend ({})
formSelects:“formSelects-v4”
}).use([“形式”,“jquery”,“上传”、“层”,“formSelects”),函数(){
var=layui形式。形式,美元=layui.jquery上传=layui.upload层=layui.layer formSelects=layui.formSelects;//从后台数据库中查出后回显
. ajax({美元
url:“$ {pageContext.request.contextPath}/菜单/queryall.action”,
类型:“文章”,
成功:功能(数据){
var str=" $ {sys_user.role_id} ';
str_arr=[];//str=?、2、3”
str_arr=str.split(", ");//获取那些该选中的数据
我(var=0; i< data.data.length;我+ +){
如果(data.data[我].status==1) {
var选项=new选项(data.data[我].role data.data[我].id);//全部列表信息展示}
(var j=0; j< str_arr.length; j + +) {
如果(str_arr [j]==data.data[我].id) {
option.setAttribute(“选择”,真的);//确定哪些是选中的
}
}
}
$ (" # role_id ") .append(选项);
}
formSelects.render();//渲染效果
}
错误:函数(){
alert("查询用户角色失败”)
}
});
之前
以上这篇layui实现下拉复选功能的例子(包括数据的回显与上传)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
