使用layui的穿梭框做RBAC时发现其在数据传输时数据的分类比较困难,就手撸了一个支持分类的穿梭框,样式自己随意修改,支持搜索
先上效果图:
代码如下:
<!--style-->
<style>
select{width: 100%;height:34%;}
div{float: left;width:30%;}
.o{width: 10%;text-align: center;line-height: 17px;padding-top:100px;}
</style>
<!--html-->
<body>
<div >
<input type="text" data-target="available" class="search" placeholder="search ..">
<select multiple data-target="available" class="list"></select>
</div>
<div class="o">
<button data-target="available" >>></button><br/><br/>
<button data-target="assigned" ><<</button>
</div>
<div >
<input type="text" data-target="assigned" class="search" placeholder="search ..">
<select multiple data-target="assigned" class="list"></select>
</div>
</body>
<!--js-->
<script src="你的jquery.js文件"></script>
<script>
let _o = JSON.parse('{"items":{"available":{"admin":"role","添加图书":"permission","/index/index":"routes"},"assigned":{"删除图书":"permission"}}}');
// 初始化
s("available");
s("assigned");
// 填充select
function s(target){
let $s = $('select.list[data-target="'+target+'"]');
$s.html('');
let q = $('input[data-target="'+target+'"]').val();
let opts = {
role:[$('<optgroup label="roles">'),false],
permission:[$('<optgroup label="permission">'),false],
routes:[$('<optgroup label="routes">'),false]
}
$.each(_o.items[target],function (n,g) {
if(n.indexOf(q) >= 0){
$('<option>').text(n).val(n).appendTo(opts[g][0]);
opts[g][1] = true;
}
})
$.each(opts,function () {
if(this[1]){
$s.append(this[0]);
}
})
}
//查询
$(".search[data-target]").keyup(function () {
s($(this).data('target'))
})
// 点击事件
$("button").click(function () {
let $this = $(this);
let f = $this.data('target');
let t = f == 'available' ? 'assigned' : 'available';
let list = $('select[data-target="'+f+'"]').val();
let o = $(_o);
$.each(list,function (i,n) {
o[0].items[t][n] = o[0].items[f][n];
delete o[0].items[f][n];
})
_o = o[0];
s('available');
s('assigned');
})
</script>
注意jquery.js的引入,复制代码即可直接运行