关于ztree的问题

Question

有json数据如下：

{
  "ver": "1.0",
  "login": {
    "user": "zhangsan",
    "pwd": "123456"
  },
  "data": [
    {
      "menuName": "文件夹1-1-1-1-1",
      "FileName": "emp.cdr",
      "ProjNumber": 11,
      "JpgFile": "emp.jpg",
      "Comments": "cdr for employee",
      "ProjType": "graphic design",
      "ProjState": 1,
      "version": 1,
      "CreateTime": "20230728",
      "UpdateTime": "20230608",
      "pid": 0,
          "childrens":[
    {
      "menuName": "k文件夹1-1-1-1-2",
      "FileName": "emp.cdr",
      "ProjNumber": 12,
      "JpgFile": "emp.jpg",
      "Comments": "cdr for employee",
      "ProjType": "graphic design",
      "ProjState": 1,
      "version": 1,
      "CreateTime": "20230728",
      "UpdateTime": "20230608",
      "pid": 11
    },
。。。 。。。

前端json如下：

<div id="treeDemo" class="ztree"></div>
<div id="result"></div>



<script>
var zTreeObj;
var setting = {};        // zTree 的参数配置，后面详解
$.ajax({
                //url: 'http://121.41.165.74:8888/getjson',
url: 'http://121.41.165.74:8888/getjsonsample',
method: 'GET',
dataType: 'json',
success: function(responseData) {

/*var zNodes = [
               //注意，数据中的 menuName 必须与 settingss 中key 中定义的name一致，否则找不到
               {menuName:"父节点1", open:true, children:[
                   {menuName:"子节点1"}, {menuName:"子节点2"}]},
               {menuName:"父节点2", open:true, children:[
                   {menuName:"子节点3"}, {menuName:"子节点4"}]}
               ];
                     
            zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, zNodes); //初始化树
*/
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, responseData.data); //初始化zTree，三个参数一次分别是容>器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源

            zTreeObj.expandAll(true);    //true 节点

前端输出的时候是很多个 unidefined , 我意图是生成树结构，每个节点显示menuName, 如何才能做到

Answer 1

您的settings没有设置。

var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "ProjNumber",
                    pIdKey: "pId",
                    rootPId: ""
                },
                key: {
                    name: 'menuName',
                    children: 'childrens'
                }
            },
            callback: {
                beforeClick: function(treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("tree");
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        demoIframe.attr("src", treeNode.file + ".html");
                        return true;
                    }
                }
            }
        };

感谢“CSDN-Ada助手”，他的回答让我找到了ztree的官方文档：3个w treejs.cn/v3/