js左右选项移动

Posted 2020-11-28 尚宇园

function DataRelative(dataleft,dataright,lc,rc,add,remove,rightinput,leftinput,spanleft,spanright){
   var that = this;
   that.dataleft = dataleft;
   that.dataright = dataright;
   that.lc = lc;
   that.rc = rc;
   that.add = add;
   that.remove = remove;
   that.rightinput = rightinput;
   that.leftinput = leftinput;
   that.spanleft = spanleft;
   that.spanright = spanright;
   //左边全选
   var leftAll = function(){
      for(var i=0;i<that.leftinput.length;i++){
         that.leftinput[i].checked=that.lc.checked
         if(that.lc.checked){
            that.add.disabled=false
         }else{
            that.add.disabled=true
         }
      }
   }
   //右边全选
   var rightAll = function(){
      for(var i=0;i<that.rightinput.length;i++){
         that.rightinput[i].checked=that.rc.checked;
         if(that.rc.checked){
            that.remove.disabled=false
         }else{
            that.remove.disabled=true
         }
      }
   }
   //判断左边全选
   var left = function(){
      for(var i=0;i<that.leftinput.length;i++){
         that.leftinput[i].onclick=function(){
            var count=0;
            for(var j=0;j<that.leftinput.length;j++){
               if(that.leftinput[j].checked){
                  count++;
                  that.add.disabled=false
               }
            }
            if(count==0){
               that.add.disabled=true;
            }
            that.lc.checked=(count==that.leftinput.length);
         };
      }
   }
   var left1 = function(){
      for(let i=0;i<that.leftinput.length;i++){
         that.spanleft[i].onclick=function(){
            if (that.leftinput[i].checked==true){
               that.leftinput[i].checked=false;
            }else{that.leftinput[i].checked=true}
            var count=0;
            for(var j=0;j<that.leftinput.length;j++){
               if(that.leftinput[j].checked){
                  count++;
                  that.add.disabled=false
               }
            }
            if(count==0){
               that.add.disabled=true;
            }
            that.lc.checked=(count==that.leftinput.length);
         };
      }
   }
   //判断右边全选
   var right = function(){
      for(var i=0;i<that.rightinput.length;i++){
         that.rightinput[i].onclick=function(){
            var count=0;
            for(var j=0;j<that.rightinput.length;j++){
               if(that.rightinput[j].checked){
                  count++;
                  that.remove.disabled=false
               }
            }
            if(count==0){
               that.remove.disabled=true;
            }
            that.rc.checked=(count==that.rightinput.length);
         }
      }
   }
   var right1 = function(){
      for(let i=0;i<that.rightinput.length;i++){
         that.spanright[i].onclick=function(){
            if (that.rightinput[i].checked==true){
               that.rightinput[i].checked=false;
            }else{that.rightinput[i].checked=true}
            var count=0;
            for(var j=0;j<that.rightinput.length;j++){
               if(that.rightinput[j].checked){
                  count++;
                  that.remove.disabled=false
               }
            }
            if(count==0){
               that.remove.disabled=true;
            }
            that.rc.checked=(count==that.rightinput.length);
         }
      }
   }
   //被调用方法
   var getChecked = function(inputs){
      var checkedInputs = [];
      for(var i=0;i<inputs.length;i++){
         if(inputs[i].checked){
            checkedInputs.push(inputs[i].parentNode);
         }
      }
      return checkedInputs
   }
   //左边到右边
   var moveTo = function(){
      if(that.add.disabled==false){
         var checked = getChecked(that.leftinput);
         for(var i=0;i<checked.length;i++){
            that.dataright.appendChild(checked[i]);
         }
            that.lc.checked=false;
            that.add.disabled=true;
      }
   }
   //右边到左边
   var moveBack = function(){
      if(that.remove.disabled==false){
         var checked = getChecked(that.rightinput);
         for(var i=0;i<checked.length;i++){
            that.dataleft.appendChild(checked[i]);
         }
            that.rc.checked=false;
            that.remove.disabled=true;
      }
   }
   //自动判断全选
   left();
   right();
   left1();
   right1();
//左边到右边
   add.onclick = function(){
      moveTo();
      left();
      right();
      left1();
      right1();
      leftAll();
      rightAll();
   }
//右边到左边
   remove.onclick = function(){
      moveBack();
      left();
      right();
      left1();
      right1();
      leftAll();
      rightAll();
   }
//左边全选
   lc.onclick = function(){
      leftAll();
   }
//右边全选
   rc.onclick = function(){
      rightAll();
   }
}
//把上面封装起来
function RelativeMethods(num){ 
   new DataRelative(document.getElementsByClassName("data-left"+num)[0],document.getElementsByClassName("data-right"+num)[0],document.getElementById("left-checked"+num),document.getElementById("right-checked"+num),document.getElementById("add"+num),document.getElementById(\'remove\'+num),document.getElementsByClassName("data-right"+num)[0].getElementsByTagName("input"),document.getElementsByClassName("data-left"+num)[0].getElementsByTagName("input")
      ,document.getElementsByClassName("data-left"+num)[0].getElementsByTagName("span"),document.getElementsByClassName("data-right"+num)[0].getElementsByTagName("span"));
}

//用户的搜索
function searchUser(left_user,add_user_span,add_user1_span,nums){
   $(\'#\'+left_user).html(adduser);//先把原本数据显示出来 然后在进行搜索
   $(\'#\'+add_user1_span).each(function(){
      let a = this.innerHTML;
      $(\'#\'+add_user_span).each(function () {
         if (this.innerHTML==a){
            $(this.parentNode).html("")
         }
      })
   })
   let listuser = [];
   $(\'#\'+add_user_span).each(function(){
      if (this.innerHTML.match($(\'#list_user\').val())){
         listuser.push(this.parentNode);
      }
   })
   $(\'#\'+left_user).html(listuser)
   if ($(\'#\'+left_user).html()==""){
      $(\'#\'+left_user).html("<span style=\'font-size: 12px;margin-left: 36%;color: #8391a5;\'>无数据...</span>");
   }
   RelativeMethods(nums);
}