码迷,mamicode.com
首页 > 其他好文 > 详细

双向选择

时间:2017-07-14 20:31:13      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:双向选择

    <div class="modal fade" id="distribute" tabindex="-1" role="dialog"    data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 800px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">为{{add_group_Name}}分配功能</h4>
                </div>
                <div class="modal-body" style="max-height:400px">
                    <div class="row" style="padding-bottom:5px;">
                        <div class="col-xs-5">
                            <h5>可分配功能</h5>
                        </div>
                        <div class="col-xs-2 text-center">
                            <h5>操作</h5>
                        </div>
                        <div class="col-xs-5">
                            <h5>已分配功能</h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-5">
                            <select name="s1" size="10" multiple="multiple" id="s1" class="form_selectgro">
                                
                            </select>
                        </div>
                        <div class="col-xs-2 text-center">
                            <button type="button" name="addall" id="addall" value=""
                                class="btn btn-info mb15">
                                全选 <i class="fa fa-fast-forward"></i>
                            </button>
                            <br />
                            <button type="button" name="add" id="add" value=""
                                class="btn btn-primary mb15">
                                选择 <i class="fa fa-step-forward"></i>
                            </button>
                            <br />
                            <button type="button" name="remove" id="remove"
                                class="btn btn-danger mb15">
                                <i class="fa fa-step-backward"></i> 移除
                            </button>
                            <br />
                            <button type="button" name="removeall" id="removeall" value=""
                                class="btn btn-danger mb15">
                                <i class="fa fa-fast-backward"></i> 全删
                            </button>
                            <br /> <input type="button" name="s2up" id="s2up"
                                value="&uarr; 上移" class=‘btn btn-primary mb15‘ /><br /> <input
                                type="button" name="s2down" id="s2down" value="&darr; 下移"
                                class=‘btn btn-primary mb15‘ />
                        </div>
                        <div class="col-xs-5">
                            <select name="s2" size="10" multiple="multiple" id="s2" class="form_selectAdd">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                    </button>
                    <button type="button" class="btn btn-info " ng-click="go_allot_Group();">确定</button>
                </div>
            </div>
        </div>
    </div>
                //功能分配菜单
                注释这行为了避免左选右选会多带过去数据 so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);  
            $scope.AddCollectionAssureId = function(){
//                $("#s1 option:first,#s2 option:first").attr("selected",true);  
                $("#s1").dblclick(function(){  
                     var alloptions = $("#s1 option");  
                     var so = $("#s1 option:selected");  
//                     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);  
                     $("#s2").append(so);  
                });  
                $("#s2").dblclick(function(){  
                     var alloptions = $("#s2 option");  
                     var so = $("#s2 option:selected");  
//                     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);  
                     $("#s1").append(so);  
                });  
                $("#add").click(function(){  
                     var alloptions = $("#s1 option");  
                     var so = $("#s1 option:selected");  
//                     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);  
                     $("#s2").append(so); 
                });  
                $("#remove").click(function(){  
                     var alloptions = $("#s2 option");  
                     var so = $("#s2 option:selected");  
//                     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);  
                     $("#s1").append(so);
                });  
                $("#addall").click(function(){  
                    $("#s2").append($("#s1 option").attr("selected",true));  
                });  
                $("#removeall").click(function(){  
                    $("#s1").append($("#s2 option").attr("selected",true));  
                });  
                $("#s1up").click(function(){  
                     var so = $("#s1 option:selected");  
                     if(so.get(0).index!=0){  
                       so.each(function(){  
                           $(this).prev().before($(this));  
                       });  
                     }  
                });  

                $("#s1down").click(function(){  
                     var alloptions = $("#s1 option");  
                     var so = $("#s1 option:selected");  
                     if(so.get(so.length-1).index!=alloptions.length-1){  
                           for(var i=so.length-1;i>=0;i--)  
                           {  
                             var item = $(so.get(i));  
                             item.insertAfter(item.next());  
                           }  
                     }  
                });  

                $("#s2up").click(function(){  
                     var so = $("#s2 option:selected");  
                     if(so.get(0).index!=0){  
                       so.each(function(){  
                           $(this).prev().before($(this));  
                       });  
                     }  
                });  

                $("#s2down").click(function(){  
                     var alloptions = $("#s2 option");  
                     var so = $("#s2 option:selected");  
                     if(so.get(so.length-1).index!=alloptions.length-1){  
                           for(var i=so.length-1;i>=0;i--)  
                           {  
                             var item = $(so.get(i));  
                             item.insertAfter(item.next());  
                           }  
                     }  
                });  
            };
数据渲染页面去重
                 $("#s1 option").remove();
                 $("#s2 option").remove();
                 var CoreUrl = new coreUrl({"transCode":"B000200","funState":‘1‘,});
                 CoreUrl.$save(function(result){
                     var a =result.rows;
                     var CoreUrl2 = new coreUrl({"transCode":"B000405","groupId": $scope.add_group_id});
                     CoreUrl2.$save(function(data){
                         var n =data.row;
                         if(n!=undefined){
                            for(var i=0;i<n.length;i++){
                                $("#s2").append("<option value=‘"+n[i].funId+"‘>"+n[i].funDisplayName+"</option>"); 
                            }
                            //查找重复数据
                            var isrep;
                            for(var j =0;j<a.length;j++){
                                isrep = false;
                                for(var i=0;i<n.length;i++){
                                    if(n[i].funId==a[j].funId){
                                        isrep = true;
                                        break;
                                    }
                                }
                                if(!isrep){
                                    $("#s1").append("<option value=‘"+a[j].funId+"‘>"+a[j].funDisplayName+"</option>"); 
                                    }
                            };
                          }else{
                               for(var i=0;i<a.length;i++){
                                 $("#s1").append("<option value=‘"+a[i].funId+"‘>"+a[i].funDisplayName+"</option>"); 
                          }
                       }
                   },"json");
               },"json");


本文出自 “紫枫5966” 博客,请务必保留此出处http://zifeng5966.blog.51cto.com/8763113/1947646

双向选择

标签:双向选择

原文地址:http://zifeng5966.blog.51cto.com/8763113/1947646

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!