克隆層級實現批量添加打包數組

主要是實現批量添加，加減層級處理 數據驗證，以及打包push處理

HTML只保留一層數據源 所有的克隆根據他來處理
必須分層 比如 ceng_1 ceng_2 … ceng_N 數據後期和刪除好處理
這裏邊夾雜其他處理 比如點擊切換出來 select 下拉框等等

<div class="">
        <table class="tablelist">
               <thead>
                     <tr>
                         <th>城市</th>
                         <th style="width:150px">用戶名</th>
						 <th>密碼</th>                                    
                         <th>經銷商公司名稱</th>
                         <th>經銷商公司地址</th>
			 			 <th>電話</th>
					 	 <th id="jxs_xz" style="display: none;">選擇經銷商公司</th>
                         <th style="width:105px;">操作</th>									
                     </tr>
                 </thead>
                 <tbody id="hezi">
				<tr id="ceng_1">
				    <td>
				<select class="select-box select_350 city_id"  name="city_id" style="width: 165px;margin:5px 3px;">
                      <option value="0" >請選擇城市 </option> 
				    	<{foreach from=$city_list_info item=city key=k}>
			                <{foreach from=$city item=citys}>
				    			<option value="<{$citys.city_id}>" > <{$k}> <{$citys.city_name}></option> 
				    		<{/foreach}>
				        <{/foreach}>
				</select>
				</td>
			    <td class="uName"><input class="input_box" name="user_name" value="" onblur="yzName(this)" placeholder="請輸入用戶名" type="text" style="width: 90px;" />
					<span style="display: none" class="ok">[外鏈圖片轉存失敗(img-9SLGl2iG-1562211137414)(https://mp.csdn.net/static/images/admin/right_icon.png)]</span>
					<span style="display: none;" class="cuo">[外鏈圖片轉存失敗(img-dDEJUQLq-1562211137417)(https://mp.csdn.net/static/images/admin/x.png)]</span>
				</td>
			    <td><input class="input_box" name="user_passwd" value="" placeholder="請輸入密碼" type="password" style="width: 90px;" /></td>
			    <td><input class="input_box" name="company_name" value="" placeholder="請輸入經銷商公司名稱" type="text" /></td>
			    <td><input class="input_box" name="address" value="" placeholder="請輸入經銷商公司地址" type="text" /></td>
				<td><input class="input_box" name="telephone" value="" placeholder="請輸入電話" type="text" maxlength="11" style="width: 95px;" /></td>
			    <td id="gq_company_name" class="company_names" style="display: none;">										
                   <select class="select-box select_350 other_jxs_type" id="other_jxs_type" class="other_jxs_type" name="other_jxs_type" style="margin:5px 3px;"> 
					<option value="0">選擇品牌</option> 
					<option value="1" id="ts_cate49" style=" display: none">廣汽三菱</option> 
					<option value="2" id="ts_cate197" style="display: none">奇瑞</option>
					<option value="5" id="ts_cate169" style="display: none">東風風光</option>                                                                              
				</select>
				<select class="select-box select_350 other_jxs_id" id="other_jxs_id" name="other_jxs_id" style="margin:5px 3px;">
					<option value="0">選擇經銷商公司</option>
				</select>
				</td>
				<td>
					<i class="jxs_i delete_icons" onclick="deleteItem(this)" ></i>
					<i class="jxs_i addjxs_icon" style="margin-left: 5px;" onclick="addItem(this)" ></i>
				</td>						
			</tr>                              	           
           </tbody>
       </table>
       <input type="button" class="formsubmit tianjia mt" value="保存" style="margin-top: 20px;" />
	</div>
    				

JQ
刪除層級和添加樣式處理

	//整個盒子的第一層 必須隱藏掉刪除最少留一層在頁面
	//第一條數據的刪除按鈕
	var count = $('#hezi').children("tr").length;
    if(count == 1){
        $("#ceng_1").find(".delete_icons").hide();
    }   
    
	//層級 刪除處理
    function deleteItem(obj){
    	//看盒子的長度 多少
        var count = $(obj).parents("#hezi").children("tr").length;  
        var r = confirm("確定要刪除？");
        //確認刪除
        if(r ==true){
            if(count==2){
            	//對象的祖父的tr元素 remove 刪除
                $(obj).parents('tr').remove();
                //找到hezi 最後一層 的刪除關閉 添加開啓
                $('#hezi tr:last-child').find(".addjxs_icon").show();
                $('#hezi tr:last-child').find(".delete_icons").hide(); 
            }else{
                var f_id = $(obj).parent("tr").attr('id');
                var p_id = "ceng_"+count;
                //如果只剩一層 不要再把刪除打開 只開啓添加
                $(obj).parents('tr').remove();
                $('#hezi tr:last-child').find(".addjxs_icon").show();
            }  
        }
    }
    //多層處理
    function addItem(obj){
        var count = $('#hezi').children("tr").length;
        if(count >20){
            alert("增加到最大範圍！");
            return false;
        }
        //增加一行,克隆第一個對象
        var td = $('#hezi tr:first-child').clone();
        //除了第一層以外 都要打開刪除鍵
        $(obj).parent().children(".delete_icons").show();
        //這一層的添加 隱藏起來
        $(obj).hide();
        //根據層級count 一次次累加 1
        var el = td.attr('id', "ceng_" + (count + 1));
        td.find("input[name='user_name']").val('');
        td.find("select[name='city_id']").val('');
        td.find("input[name='user_passwd']").val('');

        $('#hezi').append(td);
        //最後一行開啓所有的 刪除 和添加標識  其實就是新加的一層
        $('#hezi tr:last-child').find(".delete_icons").show();
        $('#hezi tr:last-child').find(".addjxs_icon").show();
    }

驗證的JQ

	//定義一個全局變量
	var nextName = true;
	//yzName 這個名 上邊定義 了
	function yzName(obj){
		//同樣獲取對象 找到層id 好定位處理
		var parents = $(obj).parents("tr").attr("id");
		var u_name = $(obj).val();
		$.post("/OsUser/ifUsername/", {user_name: u_name}, function (data) {
            var data = JSON.parse(data);

            if (data.resultId == 0) {
                $("#"+parents).find(".ok").show();
                $("#"+parents).find(".cuo").hide();
                nextName = true;
            } else {
                $("#"+parents).find(".ok").hide();
                $("#"+parents).find(".cuo").show();
                nextName = false;
            }
        })
	}
	//第三方 接入 用class live change 事件處理 
	$(".other_jxs_type").live("change",function(){
		//獲取 層級
    	var ceng = $(this).parents("tr").attr("id");
    	//獲取內容
    	var type = $(this).val(); 
    	var city_id = $("#"+ceng).find("select[name='city_id']").find("option:selected").val();
    	//驗證點擊層 數據驗證
    	if(city_id == '' || city_id == 0){
        	alert("請選擇城市！");
        	$(this).val('0');
        	return false;
        }
        if(type > 0){
          		$.post('/Osuser/dffgJxsName/',{type:type,city_id:city_id} , function(data){
	                var data = JSON.parse(data);
					var data_option = "<option value='0' datas=''>選擇經銷商公司</option>";
					if(data.code == '200'){
						$.each(data.data, function (key, value) {
		                    data_option += "<option value='" + value.id +   "'datas='" + value.name + "'>" + value.name + "</option>";
						})
					}
					//處理到對應的 層級的html 中
					$("#"+ceng).find("select[name='other_jxs_id']").html(data_option);
	            })
      	}else{
        	var data_option = "<option value='0' datas=''>選擇經銷商公司</option>";
        	$("#"+ceng).find("select[name='other_jxs_id']").html(data_option);
      	}
	})

數據驗證 JQ 和 二維數組處理

$('.tianjia').click(function(){
	//品牌
	var brand_id = $("#hide_cate").val();
	//車型
	var cate_id = $("#hide_cates").val();

	//是否統一扣費
	var auto_leff_fee = $("#auto_leff_fee").val();
	//是否特殊經銷商
	
	var next = true;
	var is_spe_jxs = $("#is_spe_jxs").val();
	// alert(brand_id);
	if (brand_id == '') {
           alert('請選擇品牌！');
           return false;
   	}
	if (cate_id == '') {
           alert('請選擇車型！');
           return false;
   	}
   		//二維數組 變量
       var zhAry = [];
       $("#hezi").children("tr").each(function(key,val){
       //一位數組 變量定義
       	var Ary = {};
 		// 一一獲取數值
       	var user_name = $(val).find("input[name='user_name']").val();
       	var user_passwd = $(val).find("input[name='user_passwd']").val();
       	var city_id = $(val).find("select[name='city_id']").val();
       	var telephone = $(val).find("input[name='telephone']").val();
       	var address = $(val).find("input[name='address']").val();
		var other_jxs_type = $(val).find("select[name='other_jxs_type']").find("option:selected").val();
		var company_name = $(val).find("input[name='company_name']").val();
		if(other_jxs_type == '5'){
			var company_names = $(val).find("select[name='other_jxs_id']").find("option:selected").attr("datas");
			if (company_names != '') {
				var company_name = company_names;
			}
		}

		var other_jxs_id = $(val).find("select[name='other_jxs_id']").val();
		//驗證非空或者數據 有一項值爲空 無論多少層都會報錯
        if (city_id == '' || city_id == '0') {
        	alert("城市不能爲空");
        	next = false;
        	return false;
        };
		if (user_name == '') {
			alert('用戶名不能爲空');
			next = false;
			return false;
		}

		if (user_passwd == '') {
			alert('密碼不能爲空');
			next = false;
			return false;
		}
		if (user_passwd.length < 6) {
			alert('密碼不能少於6位');
			next = false;
			return false;
		}
		if(company_name == '' ){
            alert('經銷商公司名稱不能爲空');
            next = false;
            return false;
        }
		if (address == '') {
            alert('公司地址不能爲空');
            next = false;
            return false;
        }
        var reg = /^0?(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[0-9]|16[0-9]|19[0-9])[0-9]{8}$/;
        if (!reg.test(telephone)){
           alert('請輸入正確的手機號');
           next = false;
           return false;
        }        
		
        var salt = 'KMtuan';
        user_passwd = $.md5(user_passwd + salt);   //密碼傳輸加密
		//根據要處理的字段 一一對應賦值給一位數組
		Ary['user_name'] = user_name;
        Ary['user_passwd'] = user_passwd;
        Ary['cate_id'] = brand_id;
        Ary['car_id'] = cate_id;
        Ary['telephone'] = telephone;
        Ary['other_jxs_type'] = other_jxs_type;
        Ary['other_jxs_id'] = other_jxs_id;
        Ary['address'] = address;
        Ary['company_name'] = company_name;
        Ary['is_spe_jxs'] = is_spe_jxs;
        Ary['city_id'] = city_id;
        Ary['roles_id'] = '12';
        Ary['auto_leff_fee'] = auto_leff_fee;
		//二維數組拿到
       	zhAry.push(Ary);
       	
       })
       //當所有 都不爲空 無錯誤提示時 給後臺 ajax 數組處理一下 stringify
       if (next == true && nextName == true) {
		$.ajax({
          	type:'POST',
	        url:'/Osuser/batchJxsUser/',
	        data:{
	        	data:JSON.stringify(zhAry)
	        },
	        dataType:'json',
	        success:function(data){
	        	if (data.resultId == '0') {
	        		alert(data.Data);
	        		window.location.href = "/OsUser/list/";
	        	}
	        }
      	})
	}else{
		alert("選項爲空/錯誤輸入！");
		return false;
	}
})

後端接收參數名 注意一下

$params = json_decode($params_post['data'],true);//解析下json 數據