zoukankan      html  css  js  c++  java
  • js左右选项移动

    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);
    }

  • 相关阅读:
    nexus搭建maven私服
    eclipse 使用git
    多启动引导工具_YUMI – Multiboot USB Creator
    减压Zip与创建Zip文档
    将设置集成到右键联级菜单
    在Windows 10上清除和管理TPM (受信任的平台模块)
    删除Windows运行记录
    计算文本HasH
    在右键新建中添加"Windows PowerShell脚本"
    调整Windows 10字号
  • 原文地址:https://www.cnblogs.com/wxy0715/p/12376742.html
Copyright © 2011-2022 走看看