我在网上看到了一个示例,展示了如何自定义jstree右键单击上下文菜单的外观(使用contextmenu插件).
例如,允许我的用户删除"文档"而不删除"文件夹"(通过隐藏文件夹的上下文菜单中的"删除"选项).
现在我找不到那个例子.谁能指出我正确的方向？官方文档没有真正帮助.
编辑:
由于我希望默认的上下文菜单只有一个或两个小的更改,我宁愿不重新创建整个菜单(当然,如果这是唯一的方法我会的).我想做的是这样的事情:
"contextmenu" : {
items: {
"ccp" : false,
"create" : {
// The item label
"label" : "Create",
// The function to execute upon a click
"action": function (obj) { this.create(obj); },
"_disabled": function (obj) {
alert("obj=" + obj);
return "default" != obj.attr('rel');
}
}
}
}
但它不起作用 - 创建项目始终被禁用(警报永远不会出现).
我正在使用以下代码:
$("#treeview").jstree();
$("#treeview").jstree('open_all');
使用以下html:
<div id="treeview">
<ul>
<li>
<a href="#">rubentebogt</a>
<ul>
<li>
<a href="#" onclick="goTo('index.php?module=alarm&pagina=dashboard&id=6',false);">Beneden</a>
</li>
<li>
<a href="#" onclick="goTo('index.php?module=alarm&pagina=dashboard&id=7',false);">Boven</a>
</li>
</ul>
</li>
</ul>
</div>
我的问题是所有节点都保持关闭状态,我无法用jstree打开它们('open_all');
我使用jsTree插件在我的产品中渲染大量的树节点.
现在我正在迁移到Ember,需要在Ember中实现jsTree插件.
我写了一个Ember组件来使用jsTree渲染我的文件夹结构.
我的组件:
<script type="text/x-handlebars" data-template-name="components/temp-tree">
<div id="treediv">Tree Data</div>
</script>
App.TempTreeComponent = Ember.Component.extend({
didInsertElement: function(){
var self = this;
self.$().jstree({
'plugins':["contextmenu", "dnd"],
'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{'text' : 'Child 1'},
'Child 2'
]
}
],
'check_callback': true
}
})
.on('rename_node.jstree', function(e, data) {
alert('rename');
})
.on('delete_node.jstree', function(e, data) {
alert('delete');
});
},
actions: …我有一个jstree.我想选择绑定到id为158的位置的对象的节点.这可行,但似乎很愚蠢.这样做的惯用方法是什么？
var $tree = $('.jstree', myContext),
node = $tree.find('li').filter(function() {
return ( $(this).data().location || {}).id === 158;
});
$tree.jstree('select_node', n)
我正在尝试让jsTree处理子节点的按需加载.我的代码是这样的:
jQuery('#introspection_tree').jstree({
"json_data" : {
"ajax" : {
url : "http://localhost/introspection/introspection/product"
}
},
"plugins" : [ "themes", "json_data", "ui" ]
});
从通话中返回的json是
[
{
"data": "Kit 1",
"attr": {
"id": "1"
},
"children": [
[
{
"data": "Hardware",
"attr": {
"id": "2"
},
"children": [
]
}
],
[
{
"data": "Software",
"attr": {
"id": "3"
},
"children": [
]
}
]
]
}
.....
]
每个元素都可能有很多孩子,树会很大.目前这是一次加载整个树,这可能需要一些时间.当用户打开子节点时,如何实现按需加载子节点,我该怎么办？
提前致谢.
我有以下代码:
$('.wpFolders.co_files').bind('select_node.jstree', function (event, data) {
getFileById(data.args[0].hash.replace('#', ''));
}).jstree({
'plugins' : ['html_data','themes','ui','types'],
'ui' : {
'select_limit' : 1
},
'core' : {
'animation' : 0
},
'types': {
'default' : {
'icon' : {
'image' : '/admin/views/images/file.png'
}
}
}
});
我有一个基本的无序列表,我希望显示为文件列表.我正在尝试使用"类型"来更改图标,但我不能为我的生活找出如何做到这一点.我检查了他们的文档链接,即使使用几乎相同的代码似乎也没有发生.
根据我对上面代码的理解,我的树的默认类型应该有我指定的图标但没有任何反应,我得到的是默认文件夹图标.
有任何想法吗？很抱歉,如果问题看起来很基本,但我发现在尝试做基本的事情时很难遵循文档.:)
我在这里遇到了jsTree.到目前为止,它可以工作,我可以使用[+]图标浏览和扩展节点,并在单击节点时打开页面,但我还是希望它在有人点击某个节点时展开所有直接节点.
我看了看周围至少2个小时但是找不到任何东西.官方网站不是很有帮助,因为他们没有足够的例子,而且没有很好的记录.看看这个,但对我来说也不起作用:http: //luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/2_operations.html
我甚至没有在firebug中收到错误消息
所以这是我的代码现在的样子,树初始化:
$(function () {
$("#jstree").jstree({
....
单击节点触发的功能
.delegate("a","click", function (e) {
//click on node
var page_id = $(this).parent().attr("page_id");
var idn = $(this).parent().attr("id").split("_")[1];
/*
dosnt seem to work either...
$(this).jstree("openNode", $("#node_"+idn));
$(this).jstree("openNode", "#node_"+idn);
*/
page = "index.php?page_id="+page_id;
//location.href = page;
})
.bind也没有工作:
$(this).bind("open_node.jstree", function (event, data) {
if((data.inst._get_parent(data.rslt.obj)).length) {
data.inst._get_parent(data.rslt.obj).open_node(this, false);
}
})
有谁看到我在这里失踪了......？
如何在jsTree中获取所选节点的id ？
function createNewNode() {
alert('test');
var tree = $.tree.reference("#basic_html");
selectedNodeId = xxxxxxxxx; //insert instruction to get id here
tree.create({ data : "New Node Name" }, selectedNodeId);
}
如何使用复选框插件删除jstree中的文件夹图标？
$('#div').jstree({
"ui": {
"theme_name": "checkbox"
},
"theme" : { "icons": false },
"json_data": {
"ajax": {
"type": "POST",
"url": "@Url.Action("Tree")"
}
},
"plugins": ["json_data", "checkbox", "ui", "themes"]
});
这一切都很好,但它显示复选框图标以及文件夹图标.