jquery穿梭框（动态加载数据）

<link href="${ss }/css/style2.css" rel="stylesheet" />
	<input type="hidden" name="clientIds" id="clientIds">
		<div class="ty-transfer mt20 ml20" id="ued-transfer-1">
			<div class="fl ty-transfer-list transfer-list-left">
				<div class="ty-transfer-list-head" >未分区客户机</div>

				<div class="ty-transfer-list-body" id="fenqu">
					
				</div>
				<div class="ty-transfer-list-foot" id="checkbok">
					<div class="ty-tree-div">
						<div class="tyc-check-blue fl">
							<input type="checkbox" class="transfer-all-check"
								id="tyc-check-blue"> <span> </span>
						</div>
						<div class="ty-tree-text">全选</div>
					</div>
				</div>
			</div>
			<div class="fl ty-transfer-operation" >
				<span class="ty-transfer-btn-toright to-switch disabled" id="stylediv">
				</span> <span class="ty-transfer-btn-toleft to-switch disabled" id="stylediv2">
				</span>
			</div>
			<div class="fl ty-transfer-list transfer-list-right">
				<div class="ty-transfer-list-head">已选择客户机</div>
				<div class="ty-transfer-list-body" id="checked">
					<ul class="ty-tree-select" >
						
					</ul>
				</div>
				<div class="ty-transfer-list-foot">
					<div class="ty-tree-div">
						<div class="tyc-check-blue fl">
							<input type="checkbox" class="transfer-all-check"
								id="tyc-check-blue"> <span> </span>
						</div>
						<div class="ty-tree-text">全选</div>
					</div>
				</div>
			</div>
			<div class="clearboth"></div>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</div>
		<script type="text/javascript" src="${ss }/js/Transfer.js"/></script>
        <script type="text/javascript">
        $("#ued-transfer-1").transferItem();
		 $.ajax({
				cache: true,
				type: "POST",
				url:'${ss}/partition/getClient.do?storeid='+storeid,
				//data:form,// 你的formid
				async: false,
				dataType:"json",
				 processData : false,  //必须false才会避开jQuery对 formdata 的默认处理   
		         contentType : false,  //必须false才会自动加上正确的Content-Type 
			/* 	beforeSend: function(xhr){  
	                xhr.setRequestHeader(header, token);  
	            }, */
	            success: function(result) {
	            	var str='<ul class="ty-tree-select" >'
	            	var fieldList=result.clList;//所有未分配的客户机
	            	if(fieldList != null && fieldList.length > 0){
      	        		 for(var i = 0; i< fieldList.length; i++){ 
      	        		
      	        		 str+='<li><div class="ty-tree-div"><label class="tyue-checkbox-wrapper"> <span class="tyue-checkbox"> <input type="checkbox"class="tyue-checkbox-input" id="tyue-checkbox-blue" name="id" value="'+fieldList[i].clientId+'"><span class="tyue-checkbox-circle"> </span></span> <span class="tyue-checkbox-txt" title="'+fieldList[i].clientSerialNumber+'">'+fieldList[i].clientSerialNumber+' </span></label></div></li>'
      	        		 }
      	        		 str+='</ul>'
      	        		 jQuery("#fenqu").html(str);
      	        		}
	      			/* var s='<div class="ty-tree-div"><div class="tyc-check-blue fl"><input type="checkbox" class="transfer-all-check"	id="tyc-check-blue"> <span> </span></div><div class="ty-tree-text">全选</div></div>'
	      				jQuery("#checkbok").html(s); */
	            },  
			});
		
		  $('#fenqu').on('click', function(){
			if($("input[type='checkbox']").is(':checked')){
			    //动态改变class属性
					document.getElementById("stylediv").className="ty-transfer-btn-toright to-switch active";
			}else{
		        document.getElementById("stylediv").className="ty-transfer-btn-toright to-switch disabled";
			}
		 })
		 $('#checked').on('click', function(){
			if($("input[type='checkbox']").is(':checked')){
				document.getElementById("stylediv2").className="ty-transfer-btn-toleft to-switch active";
			}else{
		        document.getElementById("stylediv2").className="ty-transfer-btn-toleft to-switch disabled";
			}
		 })
	})
</script>
复制代码

效果图：

转载于:https://juejin.im/post/5c08d4e96fb9a049bc4c7421