jstree 没有根据提供的 json 创建树

Question

我正在使用 jstree 在我正在编写的 PHP 应用程序中为一家公司创建位置、房间和资产的树状视图。

此树的目的是允许用户在预订向导期间 select 资产，该向导会为特定资产创建标注作业。

我在页面上有以下设置：-

HTML:

<div class="panel panel-primary" style="overflow:auto;" id="assetSelectContainer">
  <div class="panel-body">
    <div id="assetInfo" style="float:right;height:400px;width:45%;">
      <div class="panel panel-default" style="margin:10px;overflow:visible;">
        <div class="panel-heading" style="padding-top:20px;">
          <h4 id="assetname"></h4>
        </div>
        <div class="panel-body">
          <ul class="list-group list-group-flush">
            <li class="list-group-item">Asset Location: <span id="locationname"></span></li>
            <li class="list-group-item">Asset Room: <span id="locationroom"></span></li>
            <li class="list-group-item">Asset Make: <span id="assetmake"></span></li>
            <li class="list-group-item">Asset Model: <span id="assetmodel"></span></li>
            <li class="list-group-item">Asset Type: <span id="assettype"></span></li>
            <li class="list-group-item">Asset Serial No.: <span id="assetserial"></span></li>
            <li class="list-group-item">Asset Tag: <span id="assettag"></span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="companyAssetTree" style="float:left;height:400px;width:45%;border:1px solid #ccc;">

    </div>
  </div>
</div>

Jquery 来自 bookingwizard.js:

switch (curStep) {
  case 1:

    $("#roomContainer").hide();
    $('#step3Container').hide();
    var jsondata = $.get("../php/treeviewJSON.php");
    var xdata = ''
    //Load First Dropdown Data
    $('#companyAssetTree').jstree({
      "plugins": ["themes", "html_data", "ui", "cookie"],
      'core': {
        'check_callback': true,
        'data': {
          url: "../php/treeviewJSON.php"
        }
      }
    });

    break;

JSON 从服务器返回：

[{
    "id": "string",
    "parent": "#",
    "text": "Head Office",
    "icon": "fas fa-compass",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Head Office"
    }
  },
  {
    "id": "string",
    "parent": "#",
    "text": "Manchester",
    "icon": "fas fa-compass",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Manchester"
    }
  },
  {
    "id": "string",
    "parent": "#",
    "text": "Birmingham",
    "icon": "fas fa-compass",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Birmingham"
    }
  }, {
    "id": "string",
    "parent": "Head Office",
    "text": "Server Room",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Head Office",
      "room": "Server Room"
    }
  }, {
    "id": "string",
    "parent": "Head Office",
    "text": "Office Block 1",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Head Office",
      "room": "Office Block 1"
    }
  }, {
    "id": "string",
    "parent": "Head Office",
    "text": "Office Block 2",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Head Office",
      "room": "Office Block 2"
    }
  }, {
    "id": "string",
    "parent": "Head Office",
    "text": "Marketing",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Head Office",
      "room": "Marketing"
    }
  }, {
    "id": "string",
    "parent": "Head Office",
    "text": "Sales",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Head Office",
      "room": "Sales"
    }
  },
  {
    "id": "string",
    "parent": "Head Office",
    "text": "Customer Service",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Head Office",
      "room": "Customer Service"
    }
  }, {
    "id": "string",
    "parent": "Head Office",
    "text": "Accounts",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Head Office",
      "room": "Accounts"
    }
  }, {
    "id": "string",
    "parent": "Head Office",
    "text": "Human Resources",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Head Office",
      "room": "Human Resources"
    }
  }, {
    "id": "string",
    "parent": "Manchester",
    "text": "Sales",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Manchester",
      "room": "Sales"
    }
  }, {
    "id": "string",
    "parent": "Manchester",
    "text": "Server Room",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Manchester",
      "room": "Server Room"
    }
  }, {
    "id": "string",
    "parent": "Manchester",
    "text": "Reception",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Manchester",
      "room": "Reception"
    }
  }, {
    "id": "string",
    "parent": "Manchester",
    "text": "Office Block 1",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Manchester",
      "room": "Office Block 1"
    }
  }, {
    "id": "string",
    "parent": "Birmingham",
    "text": "Sales",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Birmingham",
      "room": "Sales"
    }
  }, {
    "id": "string",
    "parent": "Birmingham",
    "text": "Office Block 1",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Birmingham",
      "room": "Office Block 1"
    }
  }, {
    "id": "string",
    "parent": "Birmingham",
    "text": "Reception",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Birmingham",
      "room": "Reception"
    }
  }, {
    "id": "string",
    "parent": "Birmingham",
    "text": "Server Room",
    "icon": "fas fa-city",
    "li_attr": {
      "locationname": "",
      "room": "",
      "assetid": 0,
      "assetSerialNo": "",
      "assetTag": ""
    },
    "li_atrr": {
      "locationname": "Birmingham",
      "room": "Server Room"
    }
  }

我已经遵循了 jstree 网站上的文档，但我不确定我在这里做错了什么，我遵循了它们的替代结构 JSON 格式：

// Alternative format of the node (id & parent are required)
{
  id: "string" // required
  parent: "string" // required
  text: "string" // node text
  icon: "string" // string for custom
  state: {
    opened: boolean // is the node open
    disabled: boolean // is the node disabled
    selected: boolean // is the node selected
  },
  li_attr: {} // attributes for the generated LI node
  a_attr: {} // attributes for the generated A node
}

并且树甚至没有从服务器返回的 JSON 构建。

我真的希望有人能指出我可能哪里出错了，提前谢谢你:)

Answer 1

我重新解决这个问题的方法是从服务器端为 treeView 创建 HTML，然后将其加载到元素的 HTML 中，之后我调用了 treeView

$('#companyAssetTree').jstree();

由于 html 结构已经全部存在，因此树已经创建，让我免于尝试纠正大量 JSON 数据的头痛。

jstree 没有根据提供的 json 创建树

jstree isnt creating the tree from json provided

javascript

jquery

json

jstree