SOURCE

console 命令行工具 X clear

                    
>
console
var SourceOptions = [{'value':'content01','ischecked':false,'isDiasble':false},{'value':'content02','ischecked':false,'isDiasble':true},{'value':'content03','ischecked':false,'isDiasble':false},{'value':'content04','ischecked':false,'isDiasble':false},{'value':'content05','ischecked':false,'isDiasble':false},{'value':'content06','ischecked':false,'isDiasble':false},{'value':'content07','ischecked':false,'isDiasble':false},{'value':'content08','ischecked':false,'isDiasble':false}];
var TargetOptions = [{'value':'content09','ischecked':false,'isDiasble':false},{'value':'content10','ischecked':false,'isDiasble':false}];
var leftheadDom = document.getElementById("transfer").getElementsByClassName("optionsContain")[0].getElementsByClassName("header")[0];
var leftcontentDom = document.getElementById("transfer").getElementsByClassName("optionsContain")[0].getElementsByClassName("content")[0];
var rightheadDom = document.getElementById("transfer").getElementsByClassName("optionsContain")[1].getElementsByClassName("header")[0];
var rightcontentDom = document.getElementById("transfer").getElementsByClassName("optionsContain")[1].getElementsByClassName("content")[0];
var transferDom = document.getElementById("transfer").getElementsByClassName("transfer")[0];
var isAllCheckSource = false;
var isAllCheckTarget = false;
function checkOption(value) {
  var tempItm = SourceOptions.find(function(option) {
    return option.value == value;
  });
  if(tempItm && !tempItm.isDiasble) {
     tempItm.ischecked = !tempItm.ischecked;
     operateItem(leftcontentDom,tempItm.value,tempItm.ischecked);
     checkActiveTransfer('left');
     checkIfAllChecked('source');
     updateSelectText('source');
     return;
  }
  var tempItm = TargetOptions.find(function(option) {
    return option.value == value;
  });
  if(tempItm && !tempItm.isDiasble) {
     tempItm.ischecked = !tempItm.ischecked;
     operateItem(rightcontentDom,tempItm.value,tempItm.ischecked);
    checkActiveTransfer('right');
    checkIfAllChecked('target');
  	updateSelectText('target');
    return;
  }
}
function operateItem(mbDom,value,isChecked) {
  var operOption;
  var tempOpDoms = mbDom.getElementsByClassName("option");
  for(var i=0;i < tempOpDoms.length;i++) {
    var textValue = tempOpDoms[i].getElementsByClassName("item")[0].innerHTML;
    if(textValue == value) {
      operOption = tempOpDoms[i];
      break;
    }
  }
  if(operOption) {
     if(isChecked) {
        operOption.setAttribute("class","option checked");
     } else {
       operOption.setAttribute("class","option");
     }
  }
}
function checkActiveTransfer(type) {
  if(type == 'left') {
     var tmp = SourceOptions.some(function(op) {
       return !op.isDiasble && op.ischecked;
     });
    if(tmp) {
      transferDom.getElementsByClassName("toright")[0].setAttribute("class","toright active");
    } else {
      transferDom.getElementsByClassName("toright")[0].setAttribute("class","toright");
    }
  } else {
     var tmp = TargetOptions.some(function(op) {
       return !op.isDiasble && op.ischecked;
     });
    if(tmp) {
      transferDom.getElementsByClassName("toleft")[0].setAttribute("class","toleft active");
    } else {
      transferDom.getElementsByClassName("toleft")[0].setAttribute("class","toleft");
    }    
  }
}
function checkAllSource() {
  isAllCheckSource = !isAllCheckSource;
  if(isAllCheckSource) {
    checkAllItems('source'); 
    leftheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all checked");
  } else {
    checkAllItems('source'); 
    leftheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all");
  }
}
function checkAllTarget() {
  isAllCheckTarget = !isAllCheckTarget;
  if(isAllCheckTarget) {
    checkAllItems('target'); 
    rightheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all checked");
  } else {
    checkAllItems('target'); 
    rightheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all");
  }
}
function checkAllItems(type) {
  if(type == 'source') {
    SourceOptions.forEach(function(opto) {
       if(!opto.isDiasble && (opto.ischecked != isAllCheckSource)) {
          checkOption(opto.value);
       }
     });      
  } else {
    TargetOptions.forEach(function(opto) {
       if(!opto.isDiasble && (opto.ischecked != isAllCheckTarget)) {
          checkOption(opto.value);
       }
     });     
  }
}
function updateSelectText(type) {
  if(type == 'source') {
  	var temps = SourceOptions.filter(function(op) {
      return op.ischecked;
    });
    leftheadDom.getElementsByClassName("select-all")[0].getElementsByClassName("items")[0].innerHTML = temps.length+"/"+SourceOptions.length+" items";
  } else {
  	var temps = TargetOptions.filter(function(op) {
      return op.ischecked;
    });
    rightheadDom.getElementsByClassName("select-all")[0].getElementsByClassName("items")[0].innerHTML = temps.length+"/"+TargetOptions.length+" items";
  }
}
function checkIfAllChecked(type) {
  if(type == 'source') {
     var tmp = SourceOptions.some(function(op) {
       return !op.isDiasble && !op.ischecked;
     });
    if(tmp || (SourceOptions.length == 0)) {
      leftheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all");      
    } else {
      leftheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all checked");      
    }
  } else {
     var tmp = TargetOptions.some(function(op) {
       return !op.isDiasble && !op.ischecked;
     }); 
    if(tmp || (TargetOptions.length == 0)) {
      rightheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all");      
    } else {
      rightheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all checked");      
    }
  } 
}
function SourceToTarget() {
  var mvItems = [];
  SourceOptions.forEach(function(option) {
    if(!option.isDiasble && option.ischecked) {
       movingOption(option,mvItems,SourceOptions,TargetOptions,leftcontentDom,rightcontentDom);
    }
  });
  SourceOptions = SourceOptions.filter(function(op) {
    var tmp = mvItems.findIndex(function(item) {
      return item == op.value;
    });
    return tmp == -1;
  });
  checkIfAllChecked('source');
  updateSelectText('source');
  checkActiveTransfer('left');
	updateSelectText('target');
}
function filterSourItems(options,mvItems) {
  options = options.filter(function(op) {
    var tmp = mvItems.findIndex(function(item) {
      return item == op.value;
    });
    return tmp == -1;
  });
}
function TargetToSource() {
  var mvItems = [];
  TargetOptions.forEach(function(option) {
    if(!option.isDiasble && option.ischecked) {
       movingOption(option,mvItems,TargetOptions,SourceOptions,rightcontentDom,leftcontentDom);
    }
  });
  TargetOptions = TargetOptions.filter(function(op) {
    var tmp = mvItems.findIndex(function(item) {
      return item == op.value;
    });
    return tmp == -1;
  });
  checkIfAllChecked('target');
  updateSelectText('target');
  checkActiveTransfer('right');
	updateSelectText('source');
}
function movingOption(option,mvItems,sourOptions,TargOptions,sourContentDoms,TargContentDoms) {
  var moveOption;
  var tempOpDoms = sourContentDoms.getElementsByClassName("option");
  for(var i=0;i < tempOpDoms.length;i++) {
    var textValue = tempOpDoms[i].getElementsByClassName("item")[0].innerHTML;
    if(textValue == option.value) {
      moveOption = tempOpDoms[i];
      break;
    }
  }
  if(moveOption) {
    moveOption.setAttribute("class","option");
    option.ischecked = false;
    TargOptions.push(option);
    mvItems.push(option.value);
    
    sourContentDoms.removeChild(moveOption);
    TargContentDoms.appendChild(moveOption);
  }
}
	<div id="transfer" class="transferContainer">
		<div class="optionsContain">
			<div class="header">
				<span class="select-all">
					<span class="checkbox" onclick="checkAllSource()">✔</span>
					<span class="items">0/8 items</span>
				</span>
				<span class="text">Source</span>
			</div>
			<div class="content">
				<span class="option" onclick="checkOption('content01')">
					<span class="checkbox">✔</span>
					<span class="item">content01</span>
				</span>
				<span class="option disable"  onclick="checkOption('content02')">
					<span class="checkbox">✔</span>
					<span class="item">content02</span>
				</span>
				<span class="option" onclick="checkOption('content03')">
					<span class="checkbox">✔</span>
					<span class="item">content03</span>
				</span>
				<span class="option" onclick="checkOption('content04')">
					<span class="checkbox">✔</span>
					<span class="item">content04</span>
				</span>
				<span class="option" onclick="checkOption('content05')">
					<span class="checkbox">✔</span>
					<span class="item">content05</span>
				</span>
				<span class="option" onclick="checkOption('content06')">
					<span class="checkbox">✔</span>
					<span class="item">content06</span>
				</span>
				<span class="option" onclick="checkOption('content07')">
					<span class="checkbox">✔</span>
					<span class="item">content07</span>
				</span>
				<span class="option" onclick="checkOption('content08')">
					<span class="checkbox">✔</span>
					<span class="item">content08</span>
				</span>
			</div>
		</div>
		<div class="transfer">
			<div class="toleft" onclick="TargetToSource()">‹</div>
			<div class="toright" onclick="SourceToTarget()">›</div>
		</div>
		<div class="optionsContain">
			<div class="header">
				<span class="select-all">
					<span class="checkbox" onclick="checkAllTarget()">✔</span>
					<span class="items">0/2 items</span>
				</span>
				<span class="text">Target</span>
			</div>
			<div class="content">
				<span class="option" onclick="checkOption('content09')">
					<span class="checkbox">✔</span>
					<span class="item">content09</span>
				</span>
				<span class="option" onclick="checkOption('content10')">
					<span class="checkbox">✔</span>
					<span class="item">content10</span>
				</span>
			</div>
		</div>
	</div>
.transferContainer{
  display:flex;
  justify-content:center;
  height:240px;
  //border:solid 1px;
  width:460px;
  padding:0;
}
.transferContainer .optionsContain{
  display:flex;
  flex-direction:column;
  height:100%;
  width:200px;
  border:solid 1px #999;
  border-radius:4px;
}
.transferContainer .optionsContain .header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:36px;
  width:100%;
  border-bottom:solid 1px #999;
  font-size:12px;
  color:#666;
}
.transferContainer .optionsContain .header .select-all{
  margin-left:10px;
  height:100%;
  display:flex;
  align-items:center;
  border:solid 0px;
}
.transferContainer .checkbox{
  display:inline-block;
  height:12px;
  width:12px;
  border:solid 1px #808080;
  border-radius:2px;
  margin-right:5px;
  cursor:pointer;
  font-size:12px;
  color:#fff;
  text-align:center;
  line-height:12px;
}
.transferContainer .checkbox:hover{
  border-color:#3399ff;
}
.transferContainer .optionsContain .header .select-all.checked .checkbox{
  border-color:#1aa3ff;
  background:#1aa3ff;
  color:#fff;
}
.transferContainer .optionsContain .header .text{
  margin-right:10px;
}
.transferContainer .optionsContain .content {
  //display:inline-block;
  height:100%;
  overflow-y:auto;
}
.transferContainer .optionsContain .content .option {
  display:flex;
  align-items:center;
  height:30px;
  width:100%;
  font-size:14px;
  color:#333;
  padding-left:10px;
  box-sizing:border-box;
}
.transferContainer .optionsContain .content .option:hover{
  background:#e5ffff;
}
.transferContainer .optionsContain .content .option:not(.disable) {
  cursor:pointer;
}
.transferContainer .optionsContain .content .option.disable {
  cursor:not-allowed;
}
.transferContainer .optionsContain .content .option.checked.disable .checkbox{
  border-color:#808080;
  background:#d9d9d9;
  opacity:0.7;
  cursor:not-allowed;
  color:#666;
}
.transferContainer .optionsContain .content .option.disable:not(.checked) .checkbox{
  border-color:#808080;
  background:#d9d9d9;
  opacity:0.7;
  cursor:not-allowed;
  color:#d9d9d9;
}
.transferContainer .optionsContain .content .option.checked .checkbox{
  border-color:#1aa3ff;
  background:#1aa3ff;
  color:#fff;
}
.transferContainer .optionsContain .content .option .item{
  margin-left:5px;
}
.transferContainer .transfer{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100%;
  width:60px;
}
.transferContainer .transfer div {
  display:inline-block;
  height:23px;
  width:36px;
  line-height:23px;
  border:solid 1px #999;
  border-radius:4px;
  background:#e6e6e6;
  color:#808080;
  text-align:center;
  margin-top:5px;
  margin-bottom:5px;
  cursor:not-allowed;
}
.transferContainer .transfer div.active {
  border-color:#0099ff;
  background:#0099ff;
  color:#fff;
  cursor:pointer;
}
.transferContainer .transfer div.active:hover {
  background:#006bb3;
  border-color:#006bb3;
}