二级联动的原理

1.首选是把数据格式化,

格式如下图,在格式化数据的时候续手动,把分层的数据都放到一个数组里面,如果是第一层的就通过level加上一个标记 obj.level="1",还有就是上一级的id obj.parentId和生成的id
obj.id。

通过第二层的evel和第一层的id来找对应的数据

![23J4BEAXL_CM2ZQ]Q7~8P3J.png](http://upload-images.jianshu.io/upload_images/7143811-3c3937a7e704eda7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 $.ajax({
        url:'http://192.168.0.222/w/0.0.1-SNAPSHOT/base/dept/staticBaseDeptList',
        // url:'./a.json',
        method:'GET',
        dataType:'json',
        async:false,
        success:function (res) {
            DepartData=res;
        }
    });
    function jsonData() {
        var data=DepartData;
        var ary=[];
        var id=1;
        var parentId=0;
        for(var row in data){
            var obj={};
            var selfpid=id;
            obj.deptNameId=data[row].id;
            obj.deptName=data[row].deptName;
            obj.parentId=parentId;
            obj.level="1";
            obj.id=id;
            ary.push(obj);
            id++;
            var dataRoe=data[row].baseDeptList;
            for(var row1 in dataRoe){
                var obj={};
                obj.deptNameId=dataRoe[row1].id;
                obj.deptName=dataRoe[row1].deptName;
                obj.level="2";
                obj.parentId=selfpid;
                obj.id=id;
                ary.push(obj);
                id++;
            }
        }
console.log(ary);
        for(var i=0;i${ary[i].deptName}`;
            }
        }
        $('.level1').html(det);
        $('.level1>li').click(function () {
            var id=$(this).attr('id');
            for(var i=0;i${ary[i].deptName}`;
                }
            }
            $('.level2').html(def);
        });
    }
    jsonData();

你可能感兴趣的:(二级联动的原理)