我正在开发带有上下文菜单插件的 Jstree，但几乎没有问题。
这就是我的树在浏览器中呈现的方式(在 chrome 和 mozilla 中测试)。
但我希望我的 jstree 是这样的 http://jsfiddle.net/govi20/cnbsfkx8/1/
在 chromeDev 控制台和 firebug 控制台上没有一个错误。
HTML 标记
<link href="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.css">
<link href="rhttp://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css">
<link href="http://static.jstree.com/3.0.8/assets/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="jstree1">
</div>
</body>
<script type="text/javascript">
function demo_create() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
sel = ref.create_node(sel, {"type":"file"});
if(sel) {
ref.edit(sel);
}
};
function demo_rename() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
ref.edit(sel);
};
function demo_delete() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
};
function getJSON() {
// var v = $('#data').jstree(true).get_json('#', {flat:true});
var v = $('#jstree1').jstree(true).get_json('#', { 'flat': true });
var mytext = JSON.stringify(v);
console.log("tree=> "+mytext);
}
$(document).ready(function(){
$('#jstree1').jstree({
"core" : {
"check_callback" : true,
"themes": {
"name": "default-dark",
"dots": true,
"icons": true
},
"themes" : {
"theme" : "apple"
},
'data' : [
'Simple root node',
{
'id' : 'node_2',
'text' : 'Root node with options',
'state' : { 'opened' : true, 'selected' : true },
'children' : [ { 'text' : 'Child 1' }, 'Child 2']
}
]
},
"plugins" : [ "themes","contextmenu","dnd" ]
});
});
</script>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://static.jstree.com/3.0.8/assets/dist/jstree.min.js"></script>
<script src="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
<script type="text/javascript">
function demo_create() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
sel = ref.create_node(sel, {"type":"file"});
if(sel) {
ref.edit(sel);
}
};
function demo_rename() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
ref.edit(sel);
};
function demo_delete() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
};
function getJSON() {
// var v = $('#data').jstree(true).get_json('#', {flat:true});
var v = $('#jstree1').jstree(true).get_json('#', { 'flat': true });
var mytext = JSON.stringify(v);
console.log("tree=> "+mytext);
}
$(document).ready(function(){
$('#jstree1').jstree({
"core" : {
"check_callback" : true,
"themes": {
"name": "default-dark",
"dots": true,
"icons": true
},
"themes" : {
"theme" : "apple"
},
'data' : [
'Simple root node',
{
'id' : 'node_2',
'text' : 'Root node with options',
'state' : { 'opened' : true, 'selected' : true },
'children' : [ { 'text' : 'Child 1' }, 'Child 2']
}
]
},
"plugins" : [ "themes","contextmenu","dnd" ]
});
});
</script>
请给我建议更改。
最佳答案
取而代之的是:
<link href="rhttp://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css">
使用这个:
<link rel="stylesheet" href="http://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css">
请注意 URL 开头缺少的“r”——这是一个拼写错误。
但请记住，这样的热链接是不受欢迎的 - jstree.com 不是 CDN，您可以使用真正的 CDN:
http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/themes/default/style.min.css
http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/jstree.min.js
我什至会建议您使用 3.1.1，它完全向后兼容 3.0.8，但有很多错误修复。
关于javascript - JQuery JsTree : jstree is not rendering properly in browser，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30752504/