jq + avalon2 实现穿梭框

position:absolute
于 2021-12-02 17:46:24 发布
阅读量640
点赞数
文章标签： es6
本文链接：https://blog.csdn.net/qq_40652338/article/details/121682696
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>穿梭框</title>
        <link rel="stylesheet" href="index.css">
        <script src="./jquery.js"></script>
        <script src="./avalon2.js"></script>
        <style>
            ul,
            li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            body {
                background-color: #e3e3e3;
                margin: 0px;
            }
            
            .box {
                width: 300px;
                background-color: #ffffff;
                height: 240px;
                float: left;
            }
            
            .Path {
                color: #ffffff !important;
                background-color: #1890ff !important;
                border-bottom: 1px solid #ffffff;
                transition: all .01s;
            }
            
            .box li {
                padding: 8px;
                border-bottom: 1px solid #ffffff;
                background-color: #f4f4f4;
                cursor: pointer;
                transition: all .5s;
            }
            
            #btn {
                height: 240px;
                float: left;
                width: 80px;
                text-align: center;
            }
            
            #btn button {
                width: 50px;
                height: 30px;
                display: block;
                margin: 20px auto;
                line-height: 30px;
                color: white;
                cursor: pointer;
                background-color: #1890ff;
                border-radius: 5px;
                transition: all .5s;
                border: none;
            }
            .ant-input {
                box-sizing: border-box;
                margin: 0;
                font-variant: tabular-nums;
                list-style: none;
                font-feature-settings: "tnum";
                position: relative;
                display: inline-block;
                height: 32px;
                padding: 4px 0px;
                color: rgba(0,0,0,.65);
                font-size: 14px;
                background-color: #fff;
                background-image: none;
                border: 1px solid #d9d9d9;
                border-radius: 4px;
                transition: all .3s;
            }
        </style>
    </head>
    <body ms-controller="test">
        <div>
            <input placeholder="请输入搜索内容" type="text" :input="searchLeft($event)">
        </div>
        <li class="box">
            <input type="checkbox" name="left" :click="selectLeftAll($event)"> 全部
            <ul id="shuttleLeft">
                <li :for="el in leftList" :click="shuttleLeft($event)" :if="!filterLeftIdList.contains(el.id)">
                    <input type="checkbox" name="left" :attr="{value:el.id}">
                    {{el.name}}
                </li>
            </ul>
        </li>
        <li id="btn">
            <button id="toRight" :click="toRight">></button>
            <button id="toLeft" :click="toLeft"><</button>
        </li>
        <div>
            <input placeholder="请输入搜索内容" type="text" :input="searchRight($event)">
        </div>
        <li class="box">
            <input type="checkbox" name="right"  :click="selectRightAll($event)"> 全部
            <ul id="shuttleRight">
                <li :for="el in rightList" :click="shuttleRight($event)" :if="!filterRightIdList.contains(el.id)">
                    <input type="checkbox" name="right" :attr="{value:el.id}">
                    {{el.name}}
                </li>
            </ul>
        </li>
    </body>
    <script>
        var test = avalon.define({
            $id: "test",
            // 左边展示的数据数组
            leftList: [],
            // 左边不展示的数据id数组
            filterLeftIdList: [],
            // 右边展示的数据数组
            rightList: [],
            // 右边不展示的数据id数组
            filterRightIdList: [],
            // 左边选中
            selectLeftAll: function(event) {
                var isChecked = $(event.target).is(":checked");
                if(isChecked){
                    $("input[name='left']").prop("checked", true); 
                } else {
                    $("input[name='left']").prop("checked", false); 
                }
            },
            // 右边选中
            selectRightAll: function(event) {
                var isChecked = $(event.target).is(":checked");
                if(isChecked){
                    $("input[name='right']").prop("checked", true); 
                } else {
                    $("input[name='right']").prop("checked", false); 
                }
            },
            // 通过checkbox name 获取所有绑定的数据id
            getCheckBoxValues: function (name) {
                var ids = [];
                //获取所有选中的值，将其用逗号隔开
                $("input[name='" + name + "']:checked").each(function() {
                    var v = $(this).val();
                    if($(this).val() != 'on') {
                        ids.push($(this).val());
                    }
                });
                return ids;
            },
            // 右边数据往左边移动
            toLeft: function(){
                var ids = this.getCheckBoxValues('right');
                if (ids.length == 0) {
                    return;
                }
                this.rightList = this.rightList.filter(e => {
                    var currentId = JSON.stringify(e.id);
                    if(ids.indexOf(currentId) != -1){
                        this.leftList.push(e);
                        return false;
                    }
                    return true;
                });
                $("input[name='right']").prop("checked", false); 
            },
            // 左边数据往右边移动
            toRight: function(){
                var ids = this.getCheckBoxValues('left');
                if (ids.length == 0) {
                    return;
                }
                this.leftList = this.leftList.filter(e => {
                    var currentId = JSON.stringify(e.id);
                    if(ids.indexOf(currentId) != -1){
                        this.rightList.push(e);
                        return false;
                    }
                    return true;
                });
                $("input[name='left']").prop("checked", false);
            },
            // 左边搜索
            searchLeft: function(event) {
                this.filterLeftIdList = [];
                var v = $(event.target).val();
                for(var i = 0 ;i < this.leftList.length; i++){
                    var element = this.leftList[i];
                    if(!element.name.startsWith(v)){
                        this.filterLeftIdList.push(element.id);
                    }
                }
            },
            // 右边搜索
            searchRight: function(event) {
                this.filterRightIdList = [];
                var v = $(event.target).val();
                for(var i = 0 ;i < this.rightList.length; i++){
                    var element = this.rightList[i];
                    if(!element.name.startsWith(v)){
                        this.filterRightIdList.push(element.id);
                    }
                }
            }
        })
        $(function(){
            initList();
            function initList(){
                var size  = 3
                for(var i = 1; i <= size; i++){
                    var obj = {id: i, name: "哈哈"+ i};
                    test.leftList.push(obj);
                    var obj = {id: size + i, name: "嘎嘎"+ i};
                    test.rightList.push(obj);
                }
            }
        })
    </script>
</html>
position:absolute
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq + avalon2 实现穿梭框

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>穿梭框</title> <link rel="stylesheet" href="index.css"> <script src="./jquery.js"></script> <scrip
复制链接

扫一扫