AJAX获取json文件生成树

最新推荐文章于 2019-02-28 09:55:14 发布
最新推荐文章于 2019-02-28 09:55:14 发布
阅读量1.3k 收藏
点赞数
分类专栏： 个人
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwj515615152/article/details/79174426
版权

前辈给我的练习,如题.大概做出来了,记录一下.

参考了:jQuery递归便利JSON树

重点在于如何递归json文件.这里用的是for循环,据说用each循环比较好.直接上代码.

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>testJSON</title>
    <link rel="stylesheet" href="../css/jquery-ui.css">
    <script src="../js/jquery-ui.js"></script>
    <style>
    li {
        list-style-image: url("../images/p.png");
    }

    li:hover {
        cursor: pointer;
    }

    .hide {
        display: none;
    }

    #jsonArea {
        width: 350px;
    }
    </style>
</head>

<body>
    <div id="jsonArea">
    </div>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script>
    var menulist = "";
    $.ajax({
        url: "data.json",
        data: {},
        type: "POST",
        dataType: "JSON",
        success: function(result) {
            menulist = result;
        }
    });

    $(function() {
        var showlist = $("<ul></ul>");
        showall(menulist.menulist, showlist);
        $("#jsonArea").append(showlist);
        $("#jsonArea ul li").find("li").addClass("hide");
        $("li").click(function() {
            if(!$(this).children("ul").length){
                $(this).css("list-style-image", "url('../images/m.png')");
            }else if ($(this).children("ul").children("li").hasClass("hide")) {
                $(this).children("ul").children("li").removeClass("hide");
                $(this).css("list-style-image", "url('../images/m.png')");
                return false;
            } else {
                $(this).find("li").addClass("hide");$(this).find("li").css("list-style-image", "url('../images/p.png')");
                $(this).css("list-style-image", "url('../images/p.png')");
                return false;
            }
            return false;
        });
    });

    function showall(menu_list, parent) {　　 
        for (var menu in menu_list) {
            if (menu_list[menu].menulist.length > 0) {
                var li = $("<li></li>");
                $(li).append(menu_list[menu].MName).append("<ul></ul>").appendTo(parent);
                showall(menu_list[menu].menulist, $(li).children().eq(0));
            }
            else {
                $("<li></li>").append(menu_list[menu].MName).appendTo(parent);
            }
        }
    }
    </script>
</body>

</html>

json文件为: 

{
    "menulist": [
    {
        "MName": "重点区域",
        "menulist": [
        {
            "MName": "南京城市管理",
            "menulist": [
            {
                "MName": "区县单位",
                "menulist": ""
            },
            {
                "MName": "执行总队",
                "menulist": [
                {
                    "MName": "玄武区大队",
                    "menulist": [
                    {
                        "MName": "中队1",
                        "menulist": ""
                    },
                    {
                        "MName": "中队2",
                        "menulist": ""
                    },
                    {
                        "MName": "中队3",
                        "menulist": ""
                    }]
                },
                {
                    "MName": "秦淮区大队",
                    "menulist": [
                    {
                        "MName": "中队1",
                        "menulist": ""
                    },
                    {
                        "MName": "中队2",
                        "menulist": ""
                    },
                    {
                        "MName": "中队3",
                        "menulist": ""
                    }]
                },
                {
                    "MName": "建邺区大队",
                    "menulist": [
                    {
                        "MName": "中队1",
                        "menulist": ""
                    },
                    {
                        "MName": "中队2",
                        "menulist": ""
                    },
                    {
                        "MName": "中队3",
                        "menulist": ""
                    }]
                }]
            }]
        }]
    },
    {
        "MName": "核心岗位",
        "menulist": [
        {
            "MName": "南京城市管理",
            "menulist": [
            {
                "MName": "区县单位",
                "menulist": ""
            },
            {
                "MName": "执行总队",
                "menulist": [
                {
                    "MName": "玄武区大队",
                    "menulist": [
                    {
                        "MName": "中队1",
                        "menulist": ""
                    },
                    {
                        "MName": "中队2",
                        "menulist": ""
                    },
                    {
                        "MName": "中队3",
                        "menulist": ""
                    }]
                },
                {
                    "MName": "秦淮区大队",
                    "menulist": [
                    {
                        "MName": "中队1",
                        "menulist": ""
                    },
                    {
                        "MName": "中队2",
                        "menulist": ""
                    },
                    {
                        "MName": "中队3",
                        "menulist": ""
                    }]
                },
                {
                    "MName": "建邺区大队",
                    "menulist": [
                    {
                        "MName": "中队1",
                        "menulist": ""
                    },
                    {
                        "MName": "中队2",
                        "menulist": ""
                    },
                    {
                        "MName": "中队3",
                        "menulist": ""
                    }]
                }]
            }]
        }]
    }]
}



十二页书
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js,json生成树
01-09
json数据直接生成js对象树
js 解析 json 生成树
03-23
都已经封装好了，只需要在test.html里面传递JSON的格式数据就可以了,节点动态生成。
json树
qq_41988504的博客
11-29 265
JavaJson转Json树格式 1. 工具类 package com.tl.visual.util; import java.util.ArrayList; import java.util.List; /** * @author lc * @Date: 2018/11/21 15:51 * json Tree工具类 */ public class BuildTree { p...
JsonTreeJson树
10-22
JsonTree，JQery中常使用的Json简单实现。
【转】extjs加载json数据动态生成树
zhldt2008的专栏
03-07 7352
<br />使用ExtJS2，以JSON（JavaScript Object Notation）TreeLoader 异步读取数据，构造一棵异步加载的树。 <br /><br />1. 下载ExtJS2，地址：http://www.extjs.com/<br />   下载Ext JS 2.1 SDK：ext-2.1.zip。 <br />   examples文件夹下全部是ExtJS例子演示程序。 <br />   ExtJS2主要的会用到以下几个文件：ext-all.css、ext-base.js、ex
ajax获取嵌套JSON，树形控件显示
06-22
这个“ajax获取嵌套JSON，树形控件显示”的示例主要涉及如何通过Ajax获取嵌套的JSON数据，并将其适配到ZTree的格式，以便在页面上以树形结构展示。 首先，我们需要理解JSON（JavaScript Object Notation）是一种轻...
ajax请求后台得到json数据后动态生成树形下拉框的方法
10-18
今天小编就为大家分享一篇ajax请求后台得到json数据后动态生成树形下拉框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ZTree+Struts2+ajax+json实现checkbox权限树
11-30
【标题】"ZTree+Struts2+ajax+json实现checkbox权限树"涉及的技术栈主要集中在前端的ZTree，后端的Struts2框架，以及数据交互中的Ajax和JSON。这个项目的核心目标是构建一个可复选的权限树形结构，用户通过勾选节点...
从XML生成可与Ajax共同使用的JSON.doc
01-08
本文将探讨如何利用XSLT V2（Extensible Stylesheet Language Transformations的版本2）从XML数据生成可与Ajax协同工作的JSON格式。 XML是一种标记语言，常用于存储和传输结构化的数据。然而，在客户端使用XML时，...
JSON-handle是一款对JSON格式的内容进行浏览和编辑，以树形图样式展现JSON文档，并可实时编辑
08-10
JSON-handle Chrome插件使用方法 1.用户在本站下载json handle的，安装JSON-handle浏览器插件安装方法: 在地址栏输入 chrome://extensions/, 将下载的 .crx 插件包拖放到打开的页面中 2.安装后打开下面网址可以看到JSON-handle启动的效果： JSON-handle图片 3.如下图所示，点击设置的功能按钮，我们就进入了此插件的设置界面，里面有中文的设置支持，变成中文后我们操作起来就能更加的顺风顺水啦！ jsonhandle 4.设置插件支持的语言为中文，设置成中文风格的界面之后，我们就能随心所欲的试验各种自己喜欢的风格了，下面是我个人比较喜欢一些设置。 json-handle 5.如果数据比较大，这个功能就有用了，一部分一部分的来观察，这也是化繁为简，将复杂的东西简单的化的最基本和核心的思路——分而治之。 jsonhandle JSON-handle Chrome插件注意事项 chrome for mac里好像对部分json不能自动调用解析，这个现象遇到很多次，不过也是在某一段时间才开始有这种现象，猜测是chrome升级导致的，如果测试后发现不能看到上面截图效果，那估计是有问题删除掉刚安装的，按下面的方法重新安装,先下载下面2个文件解压,.crx是chrome的 .xpi是firefox的。
jquery使用EasyUI Tree异步加载JSON数据（生成树）
10-20
本篇文章主要介绍了jquery使用EasyUI Tree异步加载JSON数据（生成树），具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
生成JSON树型表结构
02-06
树型表结构，查询一次就可以构建出一个JSON的数据结构树，适用于EXT树
json树形特效
08-19
通过json数据来动态生成多层特效树形菜单。从而达到很高的灵活性。
jQuery ajax读取本地json文件的实例
10-19
下面小编就为大家带来一篇jQuery ajax读取本地json文件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
json与树的相互转换
12-26
json与Tree的相互转换生成相关的txt
JavaScript查询Json 树
weixin_38202190的博客
02-28 356
JavaScript查询Json 树 getNode (json, key, nodeId) { // 1.第一层 root 深度遍历整个JSON var result = null for (var i = 0; i &lt; json.length; i++) { var obj = json[i] // 没有就下一个 ...
tree的json的生成方法
TinyForest的博客
01-06 450
前段时间工作中需要使用树，这一点，在前台用ext很好实现，只是这个tree的store的这个json在后台拼写的时候有些费了我的脑筋，下面总结一下，我发现很好用的一个方法： （哦，亲们，这些代码里，数据是从不同数据源获得的，所以在代码里体现了切换数据源的代码，如果你不需要切换数据源，没有必要这个做哦，只需要看sql的组成和返回list就行了。） sql: [code="java"] ...
json树数据
qq_38579468的博客
09-15 433
package com.feima.xxhglbaseservice.service; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import com.feima.entity.base.TFunction; import com.feima.entity.base.TFunct...
jquery 对 Json 的各种遍历
romanic的博客
09-16 286
JSON(javascript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。 在JSON中，有两种结构：对象和数组。 1.对象 一个对象以“{”开始，“}”结束
精通JavaScript：从基础到Ajax与JSON
第15章 "Ajax数据：XML或JSON" 讨论了在Ajax通信中选择XML还是JSON作为数据交换格式的优缺点，以及如何解析和生成这两种格式的数据。 此指南适合JavaScript初学者及有一定经验的开发者，通过系统学习，读者可以全面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值