克隆层级实现批量添加打包数组

主要是实现批量添加，加减层级处理 数据验证，以及打包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 数据