干货把ajax获取的数据转化成树状结构（并做成多级联动效果）

最新推荐文章于 2022-05-07 11:18:23 发布

巨鹿666

最新推荐文章于 2022-05-07 11:18:23 发布

阅读量2.8k

点赞数 2

本文链接：https://blog.csdn.net/weixin_40668775/article/details/79202375

版权

1.首先通过ajax获取数据，此处省略，直接贴出获取到的数据格式

var arr = [{
    id: 1,
    name: "一级标题",
    pid: 0
}, {
    id: 2,
    name: "二级标题",
    pid: 0
}, {
    id: 3,
    name: "2.1级标题",
    pid: 2
}, {
    id: 4,
    name: "2.2级标题",
    pid: 2
}, {
    id: 5,
    name: "1.1级标题",
    pid: 1
}, {
    id: 6,
    name: "1.2级标题",
    pid: 1
}, {
    id: 7,
    name: "1.21级标题",
    pid: 6
}, {
    id: 8,
    name: "三级标题",
    pid: 0
}, {
    id: 9,
    name: "1.22级标题",
    pid: 6
}, {
    id: 10,
    name: "1.221级标题",
    pid: 9
}, {
    id: 11,
    name: "1.2211级标题",
    pid: 10
}, {
    id: 12,
    name: "1.2212级标题",
    pid: 10
}

function proJSON(oldArr, pid) {
    var newArr = [];
    var self = this;
    oldArr.map(function(item) {
        if(item.pid == pid) {
            var obj = {
                id: item.id,
                value: item.name
            }
            var childs = self.proJSON(oldArr, item.id);
            if(childs.length > 0) {
                obj.childs = childs
            }
            newArr.push(obj)
        }

    })
    return newArr;
};

];

2.定义函数 proJSON将获取到的数据转化为树状结构

function proJSON(oldArr, pid) {
    var newArr = [];
    var self = this;
    oldArr.map(function(item) {
        if(item.pid == pid) {
            var obj = {
                id: item.id,
                value: item.name
            }
            var childs = self.proJSON(oldArr, item.id);
            if(childs.length > 0) {
                obj.childs = childs
            }
            newArr.push(obj)
        }

    })
    return newArr;
};

3.调用函数，将原始数据转化为树状结构数据

$(function(){
            var testdata = proJSON(arr,0);
            console.log(testdata);         
        })

此时输出的即为以下格式的树状结构

[{
    id: 1,
    value: "一级标题",
}, {
    id: 2,
    value: "二级标题",
    childs:[{
        id:3,
        value:"2.1级标题"
    }]
}
];

4.分享一个网上找的极好的插件mobileSelect.js

在实际开发过程中我们经常会遇到多级联动，比如省市区多级联动等等，之前就做过一个项目需要从数据库获取省市区的数据再在移动端展示出来，当时使用的插件是网上找的一个叫做LArea.js的插件，需要把获取的数据改成该插件自带数据的格式，用起来还不错，id和value都可以回写在标签中，但是有个很大的局限：只支持三级联动。所以当我发现以下插件的时候简直如获珍宝！！！LArea.js有的它都有，而且它支持无限级联动，使用时的数据结构正是上面所讲的树状结构，也就是说，当你拿到数据库的数据，proJSON一下，把数据塞进调用函数中就可以坐等一个完美的页面了（而且该插件是原生js写的不依赖jquery,只是我习惯用jquery所以引入了jquery插件），废话不多说，直接上代码。

html部分

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>多层级下拉框</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/public.css">

    <!-- 引入样式和js文件 -->
    <link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/mobileSelect.js" type="text/javascript"></script>

</head>
<body>
    <div class="contain">
        <div class="fixWidth">
            <div class="nav">
                <h1>mobileSelect Demo</h1>
            </div>
            <div class="demo">
                <div id="test">测试下拉框</div>
            </div>
        </div>
    </div>
</body>
</html>

js 直接用刚刚的树状结构数据

var mobileSelect5 = new MobileSelect({
                trigger: '#test',//下拉框id
                title: '测试下拉框',
                wheels: [
                {data : testdata}//树状结构数据
                ],
                transitionEnd:function(indexArr, data){
            // console.log(data);
        },
        callback:function(indexArr, data){//回调，此处即可将选择的数据post到数据库
            console.log(data);
            $("#test").attr("id",data[data.length-1].id);       
        }
    });

完活

附上插件下载地址点击打开链接

https://github.com/onlyhom/mobileSelect.js

本人职场小白，刚毕业，如有问题还请各位大神多多指教

巨鹿666

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
干货把ajax获取的数据转化成树状结构（并做成多级联动效果）

1.首先通过ajax获取数据，此处省略，直接贴出获取到的数据格式var arr = [{ id: 1, name: "一级标题", pid: 0}, { id: 2, name: "二级标题", pid: 0}, { id: 3, name: "2.1级标题", pid: 2}, { id: 4,
复制链接

扫一扫