ztree使用和数据生成 Map类型转数组 struct类型在js中的json形式 object页面显示 object的类型检测

最新推荐文章于 2022-12-29 16:28:19 发布
最新推荐文章于 2022-12-29 16:28:19 发布
阅读量157 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qlin_11/article/details/110630463
版权

下面代码是ztree的git仓库中3.5版本的noicon.html改造而来。编写了树状数据的生成代码。

数据支持各种类型的，其中在json中如果有json内有map结构，则字符串化时会产生空的{}，目前采用的方案是正则替换为缩写，也可以再做递归检测，将map结构转为数组。

代码中含有的重要代码点：
Map类型转数组
struct类型在js中的json形式
object页面显示
object的类型检测

<!DOCTYPE html>
<html>
  <head>
    <title>ZTREE DEMO - noIcon</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="../../../css/demo.css" type="text/css" />
    <link
      rel="stylesheet"
      href="../../../css/zTreeStyle/zTreeStyle.css"
      type="text/css"
    />
    <script
      type="text/javascript"
      src="../../../js/jquery-1.4.4.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../js/jquery.ztree.core.js"
    ></script>
    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
	  <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
    <script type="text/javascript">
      var setting = {
        view: {
          showIcon: false,
        },
        data: {
          simpleData: {
            enable: true,
          },
        },
      };

      var liMapData = new Map();
      liMapData.set("key", "value");
      liMapData.set("key1", "value1");
			liMapData.set("key2", "value2");
			var kvArray = [
        ["key1", "value1"],
        [
          "key2",
          [
            ["key1", "value1"],
            ["key2", "value2"],
          ],
        ],
      ];
      var liArrayData = ["2", "3", 4, [2, 3, [3, 5, [5]]]];
      var liArrayData2 = ["2", "3", 4, [2, 3, [3, 5, [5]]], liMapData];
      var liJsonData = {
        // a: 9,
        // d: 9,
        // c: 9,
        b: { a: 9, d: 9, c: 9 ,f:liArrayData2},
        e: [1, 2, 3,liArrayData2],
        f: liMapData,
				e: liArrayData,
				k:kvArray
      };
      
      function treeDataCreate(preData, parentId) {
        var liData = preData;
        var pId = parentId;
        var treeData = [];
        var checkType = Object.prototype.toString.call(liData);
        switch (checkType) {
          case "[object Object]":
            for (var i = 0; i < Object.keys(liData).length; i++) {
              if (
                Object.prototype.toString.call(
                  liData[Object.keys(liData)[i]]
                ) == "[object Map]"
              ) {
								
                var single = {
                  id: parentId * 10 + i + 1,
                  pId: parentId,
                  name: Object.keys(liData)[i]+":"+JSON.stringify(
                    Array.from(liData[Object.keys(liData)[i]])
                  ),
								};
								
              } else if (
                Object.prototype.toString.call(
                  liData[Object.keys(liData)[i]]
                ) == "[object Array]"
              ) {
                var single = {
                  id: parentId * 10 + i + 1,
                  pId: parentId,
                  name: Object.keys(liData)[i]+":"+JSON.stringify(liData[Object.keys(liData)[i]]).replace(/{}/,"{...}"),
                };
              } else {
                var single = {
                  id: parentId * 10 + i + 1,
                  pId: parentId,
                  name: Object.keys(liData)[i]+":"+JSON.stringify(liData[Object.keys(liData)[i]]).replace(/{}/,"{...}"),
                };
              }

              // debugger;
              treeData.push(single);
              if (typeof liData[Object.keys(liData)[i]] == "object") {
                console.log(liData[Object.keys(liData)[i]], "***");
                treeData = treeData.concat(
                  treeDataCreate(
                    liData[Object.keys(liData)[i]],
                    parentId * 10 + i + 1
                  )
                );
              }
            }

            break;
          case "[object Map]":
            var i = 0;
            liData.forEach(function (value, key) {
              if (Object.prototype.toString.call(liData[i]) == "[object Map]") {
                // var single = {
                //   id: parentId * 10 + i + 1,
                //   pId: parentId,
                //   name: JSON.stringify(Array.from(liData[i])),
                // };
                var single = {
                  id: parentId * 10 + i + 1,
                  pId: parentId,
                  name: key + ":" + JSON.stringify(Array.from(value)),
                };
              } else {
                var single = {
                  id: parentId * 10 + i + 1,
                  pId: parentId,
                  name: key + ":" + JSON.stringify(value),
                };
              }
              treeData.push(single);
              if (typeof value == "object") {
                console.log(value, "***");
                treeData = treeData.concat(
                  treeDataCreate(value, parentId * 10 + i + 1)
                );
              }
            }, liData);

            break;
          case "[object Array]":
            for (var i = 0; i < liData.length; i++) {
              if (Object.prototype.toString.call(liData[i]) == "[object Map]") {
                var single = {
                  id: parentId * 10 + i + 1,
                  pId: parentId,
                  name: JSON.stringify(Array.from(liData[i])),
                };
              } else {
                var single = {
                  id: parentId * 10 + i + 1,
                  pId: parentId,
                  name: JSON.stringify(liData[i]),
                };
              }

              // debugger;
              treeData.push(single);
              if (typeof liData[i] == "object") {
                console.log(liData[i], "***");
                treeData = treeData.concat(
                  treeDataCreate(liData[i], parentId * 10 + i + 1)
                );
              }
            }

            console.log(treeData, "treeData");
            break;
          default:
            treeData.push([{id: 1, pId: 0, name: liData}]);
            console.log(treeData, "treeData");
        }
        console.log(treeData, "treeData");
        return treeData;
      }
      // var treeData = treeDataCreate(liArrayData, 0);
      // var treeData = treeDataCreate(liMapData, 0);
      // var treeData = treeDataCreate(kvArray, 0);
      var treeData = treeDataCreate(liJsonData, 0);

      // var treeData ;
      console.log(treeData, "treeData");
      var zNodes = [
        { id: 1, pId: 0, name: 22 },
        { id: 11, pId: 1, name: 33 },
        { id: 111, pId: 11, name: [1, 2, 3] },
        { id: 112, pId: 11, name: "叶子节点112" },
        { id: 113, pId: 11, name: { 1: 2, 2: 2 } },
        { id: 114, pId: 11, name: "叶子节点114" },
        { id: 12, pId: 1, name: "父节点12 - 折叠" },
        { id: 121, pId: 12, name: "叶子节点121" },
        { id: 122, pId: 12, name: "叶子节点122" },
        { id: 123, pId: 12, name: "叶子节点123" },
        { id: 124, pId: 12, name: "叶子节点124" },
        { id: 13, pId: 1, name: "父节点13 - 没有子节点" },
        { id: 2, pId: 0, name: "父节点2 - 折叠" },
        { id: 21, pId: 2, name: "父节点21 - 展开" },
        { id: 211, pId: 21, name: "叶子节点211" },
        { id: 212, pId: 21, name: "叶子节点212" },
        { id: 213, pId: 21, name: "叶子节点213" },
        { id: 214, pId: 21, name: "叶子节点214" },
        { id: 22, pId: 2, name: "父节点22 - 折叠" },
        { id: 221, pId: 22, name: "叶子节点221" },
        { id: 222, pId: 22, name: "叶子节点222" },
        { id: 223, pId: 22, name: "叶子节点223" },
        { id: 224, pId: 22, name: "叶子节点224" },
        { id: 23, pId: 2, name: "父节点23 - 折叠" },
        { id: 231, pId: 23, name: "叶子节点231" },
        { id: 232, pId: 23, name: "叶子节点232" },
        { id: 233, pId: 23, name: "叶子节点233" },
        { id: 234, pId: 23, name: "叶子节点234" },
        { id: 3, pId: 0, name: "父节点3 - 没有子节点" },
      ];

      $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, treeData);
      });
      //-->
    </script>
  </head>

  <body>
    <div class="content_wrap">
      <div id="treeDemoClose"><button>关闭</button></div>
      <div>
        <ul id="treeDemo" class="ztree" style="width:500px"></ul>
      </div>
    </div>
  </body>
</html>
林强181
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
zTree树形结构的解析原理
wittdong的博客
03-08 3424
 一、后台封装数组数据 json = new JSONObject(); JSONArray array = new JSONArray();  try{            tbSysPersonMenuList = tbSysPersonMenuBo.getAll();            List&lt;TbSysPersonRole&gt; tbSysPersonRoleList = ...
Object与Map的区别
moxunjinmu的博客
04-30 4314
Object与Map的区别简介：共同点：不同点：1.构造方式Object:Map2.键的类型Object：键类型必须是string或者Symbol，如果非String类型，会进行数据类型转换Map：键可以是任意类型，包括对象，数组，函数等。**不会**进行数据类型转换。3.键的顺序Object：key是无序的，不会按照添加到顺序返回Map：key是有序的，按照插入的顺序返回4.键值对sizeObject：只能手动计算，通过Object.keys()方法或者通过for...in循环统计Map：直接通过size
Object 和 map 数据类型区别
qq_56392992的博客
05-20 151
注： 序列化的作用：在传递和保存对象时。保证对象的完整性和可传递性。将对象转换为有序字节流，以便在网络上传输或保存在本地。 iterator:是一个接口，拥有这个接口的数据结构可以直接用for…of进行遍历。 Array Set Map String arguments Map的方法 map.set(key,val) map.get(key) map.delete(key) map.has(key) map.clear() map.keys() 返回键的集合 map.values() 返回值的集合 m.
Object和Map有什么区别？
Sink
12-29 173
Object和Map有什么区别？
【JS】Object和Map的区别(图文详解)
m0_63779088的博客
08-19 2055
Object:只能手动计算,通过Object.keys()方法或者通过for...in循环统计 Map:直接通过size属性访问 5.键值对的访问 Object:添加或者修改属性,通过点或者中括号的形式 Map: 添加和修改Key-value中
jquery ztree实现下拉树形框使用到了json数据
01-19
公司最近的项目需要用到树形下拉框，在网上找了挺多源码，最后还是采用了zTree来实现，因为代码的移植性比较高，而且数据的获取比较容易。废话不多说，直接上代码。 index.jsp 代码如下: <%@ page language=...
ztree最简单的树--标准JSON 数据
02-14
在IT领域，尤其是在前端开发中，ZTree是一个广泛使用的JavaScript组件，主要用于构建可交互的树形结构。这个组件尤其适用于展示层次化的数据，如目录结构、组织架构等。标题"ztree最简单的树--标准JSON 数据"暗示...
基于Ztree实现动态生成Json
最新发布
08-02
在IT行业中，动态生成JSON是一种常见的需求，特别是在前端开发中，因为JSON（JavaScript Object Notation）已经成为数据交换的标准格式。ZTree，一个基于JavaScript的树形控件，提供了丰富的功能，包括动态生成JSON...
C#使用Jquery zTree实现树状结构显示 异步数据加载
08-31
主要为大家详细介绍了C#使用Jquery zTree实现树状结构显示和异步数据加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
springboot整合mybatis plus
阿杰的专栏
02-04 8480
springboot整合mybatis plus 项目结构 maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/
js中List、Tree互相转换
03-08
在js中通过递归的方法将List与Tree(树形数据)互相转换
ZTree struct 例子
03-06
ZTree struct 例子
【struct与json之间的装换】
落雪映青衣的博客
10-14 571
golang struct与json之间的装换
工具类库系列(十一)-ObjectMap
zilaishuichina的专栏
02-17 3211
第十一个工具类：ObjectMap ObjectMap 是一个上篇提到的 objectid64 的一个idid映射关系表，由map实现 该类用于需求中时常会出现的 1对1  或者 1对多 映射关系， 比如： 1对1：一个网络链接对象 对应 一个玩家对象， 一个玩家对象 也对应一个 网络链接对象 1对多：一个玩家对象 对应 一个游戏公会对象 同时实现了： 1
Object和Map的区别?
UCCUONEDAYDAY的博客
07-01 2724
相同点 二者都是以key-value的形式对数据进行存储; 不同点 1.key的数据类型范围不同 Object：可以作为key的有:number,string,以及es6里面的symbol; Map：js目前存在的数据类型均可以作为key; 2.key的顺序 Object: 如果对象的key中同时存在number string symbol 三种类型的时候,通过Object.keys得到的顺序是数字(升序) -> string(symbol)以创建的顺序; Map: key以声明的顺序进行排序;
Ztree树形展示
无发可脱
10-20 4999
Ztree 是一种树形展示，当你用新型前端框架的时候，你就意味着要学习他的树形展示，但是Ztree它单独自成一体，这样就不用总是学习别的树形展示了，学会Ztree，可以通用； 优点： 1.优异的性能 2.灵活的配置 3.多种功能的组合 适合项目开发 1.树状菜单 2.树状数据的Web显示 3.权限管理等等。 特点： ● zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 ...
Java提高篇（二七）-----TreeMap
weixin_30580943的博客
05-23 2017
原文出自：http://cmsblogs.com/?p=1013。尊重作者的成果，转载请注明出处！ 个人站点：http://cmsblogs.com------------------------------------------------------------------------------------------------------------...
ztree 使用教程
热门推荐
悟世君子的博客
10-12 3万+
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。被广泛应用在系统的权限管理中，本文讲解zTree的一般应用 zTree 官网 http://www.treejs.cn/v3/main.php#_zTreeInfo 1、zTree 官网下载 ztree 下载好后放到项目相关目录下 2、编写相关代码 引入相关js 、 css 文件，代码如下: &lt;!DOC...
zTree的简单用法
Kei's Blog
03-30 3253
【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件  兼容 IE、FireFox、Chrome 等浏览器  在一个页面内可同时生成多个 Tree 实例  支持 JSON 数据  支持一次性静态生成 和 Ajax 异步加载 两种方式  支持多种事件响应及反馈  支持 Tree 的节点移动、编辑、删除  支持任意更换皮肤 / 个性化图标（依靠cs
java查询ztree类型的数据
06-01
最后，您可以在您的 Spring MVC 控制器中使用以下代码来获取 ZTree 所需的数据： ``` @RequestMapping("/ztreeData") @ResponseBody public List<Map, Object>> getZTreeData() { return zTreeDataDao....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值