前端无限极联动的实现

前端无限极联动的实现

表设计

id：id

name：分类名

fathId：父级id

在表设计中用一个父级ID作为关联

后台返回的json格式：（默认第一级的父级id为0）
{“id”:1,“name”:“女装”,“fathId”:0,“shopId”:1,“info”:""}

html：

<div id="sp">
	
</div>

js代码：

$(function () {
        next(0)
    })
//list：查询出来的数据
//id：遍历的id（父级id）
function Liancha(list,id) {
    var List = new Array();
    for(var i = 0 ; i < list.length ; i++){
        var atm = list[i];
        if(atm.fathId == id){
            List.push(list[i])
        }
    }
    return List;
}

/**
 * 无限联动
 * @param id 父级的id
 * post（）：封装的ajax（第一位参数是发送给后台的data，第二位参数是请求地址，第三四位是回调的succes和error）
 *   //post请求方法
 *	 function post(data,url,success,error) {
 *	    // 全局替换
 *	    var text = JSON.stringify (data).replace(/null/g,'""');
 *	    $.ajax({
 *	        data: text,
 *	        url: HTTP+url,
 *	        type:'post',
 *	        crossDomain: true,
 *	        dataType:'text',
 *	        contentType: "application/json; charset=utf-8",
 *	        xhrFields: {withCredentials: true},
 *	        success: function (data) {
 *	          data =  getStr(data);
 *	            if (data.status == 200) {
 *	                if(success != null){
 *	                    success(data)
 *	                }
 *	            }else{
 *	                if(error != null){
 *	                    error(data.msg)
 *	                }
 *	            }
 *	        },
 *	        error: function (data) {
 *	            if(error != null){
 *	                error(data)
 *	            }
 *	            alert("请求失败");
 *	        },
 *	        complete: function () {
 *	
 *	        }
 *	
 *	    });
 *	
 *	}
 */
function next(id){
    post("", SELECTBYFENLEIID+"?shopId="+getInfo, function (data) {
        //转成Json对象
        result = eval(data.data);
        var List = Liancha(result,id);
        //判断如果查出来的数据小于0直接return
        if (List.length<=0){
            return
        }
        var first = "<select style='width: 100px' class='form-control' id='select_" + id +"'>";
        var option = "<option>请输入</option>"
        var cancel ="";
        for (var i = 0; i < List.length; i++) {
            cancel = cancel + "<option value="+List[i].id+">"+List[i].name+"</option>";
        }
        var last  ='</select>';
        $("#sp").append(first + option + cancel + last);
        $("#select_"+id).change(function (data) {
            //获取分类id
            var clas = $("#select_" + id).val()
            //删除子级的数据
            deleteItem(id);
            //递归
            next( clas);
        });


    },function (data) {

    })

}
/**
 * 删除儿子
 * @param id 老子的id
 */
function deleteItem(id) {
    var items = Liancha(result,id);
    if (items.length<=0){
        return
    }
    for (var i =0; i< items.length;i++){
        var item = $("#select_" +items[i].id);
        if (item!=null){
            deleteItem(items[i].id);
            item.remove();

        }
    }
}

图片效果：