我正在尝试使用 javascript 和 html 在 div 中渲染具有某些子级的树。我想知道为什么它没有渲染，因为所有对象都已创建并且读取树和父级一切都很好 来自 Json(请参阅我的代码中的“数据”)。
注意:我有 Layout.cshtml，它共享最顶部的菜单，即顶部的“应用程序名称”，如下所示 http://prntscr.com/7czhas
有人可以告诉我为什么树没有出现在我的 div 中，ID 为:jqxTree
我的代码是第二次编辑: 我正在尝试使用 javascript 和 html 在 div 中渲染具有某些子级的树。我想知道为什么它没有渲染，因为所有对象都已创建并且读取树和父级一切都很好 来自 Json(请参阅我的代码中的“数据”)。
有人可以告诉我为什么树没有出现在我的 div 中，ID 为:jqxTree
我的代码是第二次编辑:
@{
ViewBag.Title = "TreeCreation";
}
<h2>TreeCreation</h2>
<head>
<title></title>
<script src="~/bootstrap/js/LiveMap/Ajax/JsonStringCarryingData/jqx-all.js"></script>
<link href="~/bootstrap/css/LiveMap/jqx.base.css" rel="stylesheet" />
<link href="~/bootstrap/css/LiveMap/jqx.energyblue.css" rel="stylesheet" />
</head>
<body>
<div id='jqxTree' style="background-color:green; height:400px;width:200px;">
</div>
<script type="text/javascript">
var data = [
{
"text": "Chocolate Beverage",
"id": "1",
"parentid": "-1"
}, {
"id": "2",
"parentid": "1",
"text": "Hot Chocolate"
}, {
"id": "3",
"parentid": "1",
"text": "Peppermint Hot Chocolate"
}, {
"id": "4",
"parentid": "1",
"text": "Salted Caramel Hot Chocolate"
}, {
"id": "5",
"parentid": "1",
"text": "White Hot Chocolate"
}, {
"id": "6",
"text": "Espresso Beverage",
"parentid": "-1"
}, {
"id": "7",
"parentid": "6",
"text": "Caffe Americano"
}, {
"id": "8",
"text": "Caffe Latte",
"parentid": "6"
}, {
"id": "9",
"text": "Caffe Mocha",
"parentid": "6"
}, {
"id": "10",
"text": "Cappuccino",
"parentid": "6"
}, {
"id": "11",
"text": "Pumpkin Spice Latte",
"parentid": "6"
}, {
"id": "12",
"text": "Frappuccino",
"parentid": "-1"
}, {
"id": "13",
"text": "Caffe Vanilla Frappuccino",
"parentid": "12"
}, {
"id": "15",
"text": "450 calories",
"parentid": "13"
}, {
"id": "16",
"text": "16g fat",
"parentid": "13"
}, {
"id": "17",
"text": "13g protein",
"parentid": "13"
}, {
"id": "14",
"text": "Caffe Vanilla Frappuccino Light",
"parentid": "12"
}]
function run() {
// alert('Inside buidldata');
var source = [];
var items = [];
// build hierarchical source.
alert('data length:' + data.length);
for (i = 0; i < data.length; i++) {
var item = data[i];
var label = item["text"];
var parentid = item["parentid"];
var id = item["id"];
if (items[parentid]) {
var item = { parentid: parentid, label: label, item: item };
if (!items[parentid].items) {
items[parentid].items = [];
}
items[parentid].items[items[parentid].items.length] = item;
items[id] = item;
}
else {
items[id] = { parentid: parentid, label: label, item: item };
source[id] = items[id];
}
}
return source;
}
// create jqxTree
var source = run();
alert('source:' + source);
$('#jqxTree').jqxTree(
{
source: source, width: '350px'
});
</script>
</body>
它还给出了 2 个错误 http://prntscr.com/7czj92这让我觉得这个 jqx-all.js 文件存在一些问题，我从链接 http://jqwidgets.com/public/jqwidgets/jqx-all.js 复制并粘贴了该文件。 。请帮助我，我过去 4 天就被困在这里
最佳答案
添加对所需 js 文件的引用。 即http://jqwidgets.com/public/jqwidgets/jqx-all.js - 将包含所有 jq 小部件的源代码。
所需的文件是 jqx-all.js、jqx.base.css 和 jqx.energyblue.css。 添加对文件的引用，如下所示。
<script type='text/javascript' src="jqx-all.js"></script>
<link rel="stylesheet" type='text/css' href='jqx.base.css'>
<link rel="stylesheet" type='text/css' href='jqx.energyblue.css'>
注意:上面的代码假设所需的文件与当前 html 位于同一文件夹中。
如果您仅使用 jqxtree，请从 vendor 处获取特定文件。
请引用此处的工作 fiddle http://jsfiddle.net/sherin81/ccegq/274/ 左侧 Pane 中的外部资源部分将向您显示运行代码所需的引用。
关于javascript - 为什么 div 中没有渲染 TreeView ，是 DOM 元素定位错误吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30635711/