之前一段时间都在跟一个前端用 AngularJS 写的项目实习,有一个地方需要用到穿梭框,在网上找了几个组件,但是发现这个项目都没有引入这几个组件的框架,老板又不想引入新的框架,所以…只能手写一个,直接上手硬写。写之前觉得很难,但是写完之后觉得,也没有想象中的那么难。所以 行动 > 想法。最后吐槽一句: 这项目真垃圾,改别人的代码真痛苦。
先说说思想: 就是有两个数组,一个数组存放所有的用户,一个数组存放被选中的用户,点击用户列表里面的用户时,触发事件将 用户名用变量存储,此时仅仅是点击了用户,还没有将该用户选中,然后再点击选中按钮时,触发事件,将这个储存的用户名添加到选中用户的数组中,此时右侧就出现了选中的用户名,左侧的用户列表不变。
撤销的过程就是点击右侧的用户名,存储该用户名,然后点击撤销,触发事件将该元素从右侧数组中删除。
全选就是将左侧的数组拷贝一份赋值给右侧数组。
全撤就是将右侧数组赋值为空。
先来一张效果图:
然后上代码:
html:
<div class="select-user">
<span class="select-user-title">接收用户</span>
<div class="chuansuokuang">
<div class="csk-left">
<div class="csk-left-title">用户列表</div>
<div class="csk-left-search">
<span class="iconfont icon-fangdajing"></span>
<input type="text" class="csk-left-input" placeholder="请输入关键字搜索用户" ng-model="keywords" ng-change="searchUser()">
</div>
<div>
<ul>
<li ng-repeat="item in data" ng-bind="item.userName" ng-click="selectUser(item.userName)" ng-class="status.uname === item.userName? 'seleted-li' : ''"></li>
</ul>
</div>
</div>
<div class="center">
<div class="right-btn" ng-click="trueUser()">选中</div>
<div class="left-btn" ng-click="cancleUser()">撤销</div>
<div class="all-select" ng-click="allSelect()">全选</div>
<div class="all-cancle" ng-click="allCancle()">全撤</div>
</div>
<div class="csk-right">
<div class="csk-right-title">选中的用户</div>
<ul>
<li ng-repeat="item in selectedData" ng-bind="item.userName" ng-click="selectUser2(item.userName)" ng-class="status.uname2 === item.userName? 'seleted-li' : ''"></li>
</ul>
</div>
</div>
</div>
css(less):
.select-user {
display: flex;
align-items: flex-start;
margin-top: 40px;
.select-user-title {
font-size: 16px;
margin-right: 10px;
}
.chuansuokuang {
display: inline-block;
width: 600px;
height: 500px;
//border: 2px solid #cccccc;
border-radius: 4px;
.csk-left {
float: left;
width: 270px;
height: 100%;
// border-right: 1px solid #cccccc;
background-color: #F5F5F5;
.csk-left-title {
width: 100%;
height: 40px;
font-size: 18px;
text-align: center;
padding-top: 10px;
background-color: #cccccc;
}
.csk-left-search {
position: relative;
.icon-fangdajing {
position: absolute;
top: 14px;
left: 25px;
}
.csk-left-input {
width: 86%;
height: 30px;
margin-top: 10px;
margin-left: 7%;
margin-bottom: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
padding-left: 25px;
}
}
li {
width: 100%;
height: 30px;
padding-top: 5px;
text-align: center;
margin-top: 2px;
//background-color: #00a2d4;
}
li:hover {
background-color: #cccccc;
}
.seleted-li {
background-color: #3b97d7 !important;
}
ul {
height: 410px;
overflow: auto;
}
}
.center {
position: relative;
float: left;
width: 55px;
height: 500px;
.right-btn {
position: absolute;
top: 80px;
left: 10px;
width: 40px;
height: 25px;
padding-top: 2px;
text-align: center;
border: 1px solid #cccccc;
border-radius: 2px;
}
.left-btn {
position: absolute;
top: 150px;
left: 10px;
width: 40px;
height: 25px;
padding-top: 2px;
text-align: center;
border: 1px solid #cccccc;
border-radius: 2px;
}
.all-select {
position: absolute;
top: 220px;
left: 10px;
width: 40px;
height: 25px;
padding-top: 2px;
text-align: center;
border: 1px solid #cccccc;
border-radius: 2px;
}
.all-cancle {
position: absolute;
top: 290px;
left: 10px;
width: 40px;
height: 25px;
padding-top: 2px;
text-align: center;
border: 1px solid #cccccc;
border-radius: 2px;
}
div:hover {
border-color: #3b97d7;
color: #3b97d7;
}
}
.csk-right {
float: right;
width: 270px;
height: 100%;
// border-left: 1px solid #cccccc;
background-color: #F5F5F5;
.csk-right-title {
width: 100%;
height: 40px;
font-size: 18px;
text-align: center;
padding-top: 10px;
background-color: #cccccc;
}
li {
width: 100%;
height: 30px;
padding-top: 5px;
text-align: center;
margin-top: 2px;
//background-color: #00a2d4;
}
li:hover {
background-color: #cccccc;
}
.seleted-li {
background-color: #3b97d7 !important;
}
ul {
height: 410px;
overflow: auto;
}
}
}
}
js:
// 1.需要的变量
$scope.status = {
uname : '', // 点击的用户名
uname2 : '',// 选中的用户名
}
$scope.data = []; // 存放所有用户
$scope.selectedData = []; // 存放选中的用户
$scope.keywords = ''; // 关键字搜索用户
// 2.函数
/*
* 输入关键字后 查找相关用户
* */
$scope.searchUser = function() {
$scope.data = [{
userName: '搜索中...'
}]
var params = {
sFiledValue: $scope.keywords
}
httpService.http("后台接口", params, "post").then(function(data) {
$scope.data = data.data.ldata
if($scope.data.length == 0) {
$scope.data = [{
userName: '未找到相关用户'
}]
}
});
}
// 点击左侧用户 但还没有添加到右侧
$scope.selectUser = function (uname) {
$scope.status.uname = ''
if(uname != '搜索中...' && uname != '未找到相关用户') { // 不能让他选中这两种情况
$scope.status.uname = uname
$scope.bool = 'success'
}
}
// 选择右侧选中的用户
$scope.selectUser2 = function (uname) {
$scope.status.uname2 = uname
}
// 确定选择用户 挪到右边穿梭框
$scope.trueUser = function () {
if( $scope.status.uname != '') {
var a = 0;
for(var i=0;i<$scope.selectedData.length;i++) {
if($scope.selectedData[i].userName == $scope.status.uname) { // 避免重复选择
a = 1;
}
}
if(a === 0) {
let user = {
userName: $scope.status.uname
}
$scope.selectedData.push(user);
}
}
}
// 取消选择用户 将右边穿梭框的人取消
$scope.cancleUser = function () {
for(var i=0;i< $scope.selectedData.length;i++) {
if($scope.selectedData[i].userName == $scope.status.uname2) {
$scope.selectedData.splice(i,1)
}
}
}
// 全选
$scope.allSelect = function () {
$scope.selectedData=angular.copy($scope.data) // 一定要用angular.copy() 深拷贝
}
// 全撤
$scope.allCancle = function () {
$scope.selectedData=[]
$scope.status.uname2 = ''
}
// 查询所有用户
function searchAllUser() {
var params = {
sFiledValue: ''
}
httpService.http("后台接口", params, "post").then(function(data) {
$scope.data = data.data.ldata
});
}