angular js 左右选择框 Freemarker+js
|
Freemarker：
<div class="form-group"> <label for="summary" class="col-sm-2 control-label">相关艺人选择</label> <div class="col-sm-4" > <ul class="list-group" style ="border:solid 1px #ccc;border-radius: 4px;width:280px;height:320px; overflow:auto;" id = "can"> <li class="list-group-item" data-ng-repeat = "row in artistleft track by $index" id = "can{{$index}}" data-ng-click = "canClick($index)">{{row.artistNameC}}</li> </ul> </div> <div class="col-sm-1"> <button type="button" style = "margin-top:80px;margin-left:-15px;'" class="btn btn-primary btn-width-default" data-ng-click = "select()">＜</button> <button type="button" style = "margin-left:-15px;margin-top:20px;'" class="btn btn-primary btn-width-default" data-ng-click = "cancel()">＞</button> </div> <div class="col-sm-4" id="index" > <ul class="list-group" style ="border:solid 1px #ccc;border-radius: 4px;width:280px;height:320px; overflow:auto;" id ="sel"> <li class="list-group-item" data-ng-repeat = "row in artistAll track by $index" id ="sel{{$index}}" data-ng-click = "selClick($index)">{{row.artistNameC}} </li> <!-- <li class="list-group-item" data-ng-repeat = "row in dataInfo.lstSelection track by $index" id ="sel{{$index}}" data-ng-if ="row.nameCn == null " data-ng-click = "selClick($index)">{{row.artistNameCn}} </li> --> </ul> </div> </div> JS： js：//左右选择框 //选中的艺人 var selectId = ""; var selectName = ""; var selectIndex = ""; var selectTeamName = ""; var cancelId = ""; var cancelName = ""; var cancelTeamName = ""; var cancelIndex = ""; //选择区列表选择 $scope.selClick = function(index){ $('#sel li').not("#sel"+index).css('background-color','white'); $('#sel'+index).css('background-color','rgb(230,242,251)'); selectName = $scope.artistAll[index].artistNameC; selectId = $scope.artistAll[index].stringArtId; selectIndex = index; }; //关联区列表选择 $scope.canClick = function(index){ $('#can li').not("#can"+index).css('background-color','white'); $('#can'+index).css('background-color',251)'); cancelId = $scope.artistleft[index].stringArtId; cancelName = $scope.artistleft[index].artistNameC; cancelIndex = index; }; //从选择区选择艺人添加到关联区 $scope.select = function(){ if (!$scope.artistleft) { $scope.artistleft = []; } if (!selectId) { return; } var obj = {"stringArtId":selectId,"artistNameC":selectName}; $scope.artistleft.push(obj); $scope.artistAll.splice(selectIndex,1); selectId=""; selectName=""; selectTeamName = ""; $('#sel li').css('background-color','white'); }; //从关联区撤还艺人到选择区 $scope.cancel = function(){ if (!$scope.artistAll) { $scope.artistAll = []; } if (!cancelId) { return; } var obj = {"stringArtId":cancelId,"artistNameC":cancelName}; $scope.artistAll.push(obj); $scope.artistleft.splice(cancelIndex,1); cancelId = ""; cancelName = ""; cancelTeamName = ""; $('#can li').css('background-color','white'); }; save： $scope.save = function() { // 防止二次提交 $scope.btnSaveEnable = false; $scope.error = ""; //拼接相关艺人id $scope.searchInfo.artistIds = ""; for(var i=0;i<$scope.artistleft.length;i++){ $scope.searchInfo.artistIds += $scope.artistleft[i].stringArtId +","; }; alert(123); // check if (!inputCheck()) { // 防止二次提交 $scope.btnSaveEnable = true; return; } $scope.searchInfo.type=$("#type").val(); $scope.searchInfo.playbackId=$("#playbackId").val(); $scope.searchInfo.pubTime=$("#start").val(); $http({ method : "post",url : "find/backplayRoomSave",data :$scope.searchInfo }).success(function(rs,status,headers,config) { chkSession(rs); if (rs.status == 0) { $scope.success = "操作成功。"; var back = 1; location.href = base + "/backplayroom-" + back; } else { $scope.error = rs.message; $scope.btnSaveEnable = true; } }).error(function(rs,config) { $scope.error = "保存时，发生系统异常。"; $scope.btnSaveEnable = true; }); }; （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |