使用spearate菜单和jstree-grid时获取jstree的节点ID
我的 jstree 使用 jstree-grid,其中一列包含一个操作菜单(由单独的代码生成,我需要做的就是应用类“actionHandler”在运行时生成菜单)。该操作菜单由一些额外的 div、ul 和 li 组成,它们几乎淹没了 HTML 代码中的点击事件。
我想要完成的任务如下:
当单击 admin_new (代表“新节点”)选项时,我希望能够检索单击生成的菜单的节点的 ID,以便将此节点附加为当前节点的子节点。
这是我当前的代码:
jQuery("#structureBuilderTable").jstree({
json_data: {data: testData},
themes: {
theme : "apple",
dots : false,
icons : false
},
plugins: ["json_data", "crrm", "ui", "themes", "grid"],
core: {initially_open: [1]},
grid : {
columns: [
{width: 200, header: "Title"},
{value:"id", width: 50, header: "id"},
{value:"logicalTitle", width: 50, header:"logical title"},
{width: 100, header:"handlinger", cellClass:'actionHandler'},
{value:"resource", width: 200, header:"resource"}
]
}
}).bind("loaded_grid.jstree", function()
{
generateActionMenu("span.actionHandler",{
admin_new: function(e){
var nodeID = $(e.target).parents(/* Need an unique property*/).data('id');
},
admin_delete: function(e){
/* delete node*/
}, 'admin_open');
});
这是我的虚拟 JSON:
var testData = [
{
data: "Seksjon1",
attr: {id:"1", logicalTitle:"r2d2", resource:"videofile"},
children: [
{
data: "Flersvar",
attr: {id:"2", logicalTitle:"c3p0", resource:"checkbox"}
},
{
data: "Flashtest",
attr: {id:"3", logicalTitle:"d2r2", resource:"flash"}
}
]
}];
主要问题是,由于没有选择节点,所以我无权访问任何 jstree 特定事件(提供对数据对象的访问权限,这可能会解决问题)。
所以,问题基本上是:如何在不直接操作树的情况下检索相关节点信息?
任何帮助将非常感激! (抱歉文字墙:p)
My jstree uses jstree-grid, and one of the columns includes an action menu (which is generated by separate code, and all I need to do is apply the class "actionHandler" to generate the menu at runtime). This action menu consists of some extra div's, ul's and li's, which pretty much drowns the click event in HTML code.
What I want to accomplish is the following:
When the admin_new (representing 'new node') choice is clicked, I want to be able to retrieve the ID of the node for which the generated menu was clicked, in order to append this node as a child for the current node.
This is my current code:
jQuery("#structureBuilderTable").jstree({
json_data: {data: testData},
themes: {
theme : "apple",
dots : false,
icons : false
},
plugins: ["json_data", "crrm", "ui", "themes", "grid"],
core: {initially_open: [1]},
grid : {
columns: [
{width: 200, header: "Title"},
{value:"id", width: 50, header: "id"},
{value:"logicalTitle", width: 50, header:"logical title"},
{width: 100, header:"handlinger", cellClass:'actionHandler'},
{value:"resource", width: 200, header:"resource"}
]
}
}).bind("loaded_grid.jstree", function()
{
generateActionMenu("span.actionHandler",{
admin_new: function(e){
var nodeID = $(e.target).parents(/* Need an unique property*/).data('id');
},
admin_delete: function(e){
/* delete node*/
}, 'admin_open');
});
And this is my dummy JSON:
var testData = [
{
data: "Seksjon1",
attr: {id:"1", logicalTitle:"r2d2", resource:"videofile"},
children: [
{
data: "Flersvar",
attr: {id:"2", logicalTitle:"c3p0", resource:"checkbox"}
},
{
data: "Flashtest",
attr: {id:"3", logicalTitle:"d2r2", resource:"flash"}
}
]
}];
The main problem is that since no node is selected, I don't have access to any jstree specific events (giving access to the data object, which could've potentially solved the problem).
So, the question is basically: How can I retrieve relevant node information without directly manipulating the tree?
Any help would be greatly appreciated! (Sorry for the wall of text :p)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
解决方案已发布:请参阅我的评论。
The solution has been posted: see my comment.