我正在开发一个带有上下文菜单插件的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>
请告诉我这些变化。
答案 0 :(得分:2)
而不是:
<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">
请注意网址开头缺少“r” - 这是一个错字。
但请记住,像这样的hotlinking不赞成 - 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,但有很多错误修复。
答案 1 :(得分:-2)
替换此行:
<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/dist/themes/default/style.min.css">