html+jq+avalon2實現穿梭框
阿新 • • 發佈：2021-12-05
<!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>