穿梭框 jquery实现简单实用易扩张

使用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"  >&gt;&gt;</button><br/><br/>
        <button data-target="assigned" >&lt;&lt;</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的引入，复制代码即可直接运行

穿梭框 jquery实现 简单实用易扩张

Guess you like

穿梭框 jquery实现简单实用易扩张