Jstree - 添加到节点的额外 类 在折叠时丢失
Jstree - extra classes added to the node getting lost upon collapsing
我正在创建一个基于权限的剔除 JS jsTree,我从 observableArray 中提取树数据。我想在单击时以及在页面加载时基于 JSON 对文件夹和子文件夹的 add/revoke 权限。但是由于树在折叠时每次都会重新渲染,所以添加的 类 会丢失。我在现有精灵上添加了一个带有关闭图标的额外精灵图像,并在单击时更改了精灵位置。
(无法 post 屏幕截图,因为我没有 post 图片的最低声誉)。文件夹也可以有深层嵌套。
当前 jsTree(其中 X 表示新文件夹图标)
-X Reports library
- X Archives
- My Reports
/* 再次折叠和展开时:*/
-X Reports library
- Archives
- My Reports
最初的 knockout js 树已经使用这个 fiddle
的变体完成
页面加载后,我需要根据 JSON.I 中的权限 (true/false) 设置图标,也可以向 json 添加 permission:true 属性.另外,我需要切换一个文件夹,该文件夹及其子文件夹应该切换文件夹图标,表明权限已被撤销。
self.tree.on("changed.jstree", function (e, data) {
var node = self.tree.jstree().get_selected(true)[0]; //get current selected node
var selId = "#"+ node.a_attr.id;
$(selId).toggleClass("permission-icon");
var nextItem = $(selId).next();
var nextListItemFlag = $(selId).next().hasClass("jstree-children");
if(nextListItemFlag){
$(nextItem).children().each(function(){
$(this).find(".jstree-icon.jstree-themeicon").toggleClass("custom-permission-icon");
});
}
if (typeof node !== 'undefined') {
self.isNodeSelected(true);
self.selectedNode(node);
self.myinfo(node.original.folderdata);
} else {
self.isNodeSelected(false);
}
});
self.treeData = ko.observableArray(
[{
'id': 1,
'parent': '#',
'text': 'Reports Library',
'state': {
selected: false
},
'type': '#',
'folderdata': [{name: "Reports", type: "folder", modified: "07-02-2015", size: "10 KB"},
{name: "New text doc", type: "text", modified: "07-02-2015", size: "20 KB"},
{name: "test.pptx", type: "pptx", modified: "07-02-2015", size: "39 KB"},
{name: "test.xlsx", type: "excel", modified: "07-02-2015", size: "50 KB"}
],
}, {
'id': 2,
'parent': '#',
'text': 'Reports Archive',
'type' : '#',
'folderdata': [{name: "Meetings", type: "folder", modified: "07-02-2015", size: "10 KB"},
{name: "logs", type: "text", modified: "07-02-2015", size: "20 KB"},
{name: "sessions", type: "pptx", modified: "07-02-2015", size: "39 KB"},
{name: "worklog", type: "excel", modified: "07-02-2015", size: "50 KB"}
],
}, {
'id': 'dog',
'parent': 1,
'text': 'Reports',
'type' : 'folder'
}]
任何帮助将不胜感激!已经在这件事上卡了一天了:(
jsTree 只在 DOM 中保留可见节点,所以一旦节点折叠然后重新打开 - 它的所有子节点都从内部 JSON 表示重新加载 - 如果你没有修改它,您对 DOM 节点所做的任何更改都将丢失。
基本上如果你想添加一个class,你会做这样的事情(这是针对LI节点,当然你也可以修改A节点):
.on('changed.jstree', function (e, data) {
// DOM
data.instance.get_node(data.selected[0],true).addClass('newClass');
// internal model
data.instance._model.data[data.selected[0]].li_attr.class += ' newClass';
});
图标也一样-有一种方法可以处理图标变化-set_icon
.
我正在创建一个基于权限的剔除 JS jsTree,我从 observableArray 中提取树数据。我想在单击时以及在页面加载时基于 JSON 对文件夹和子文件夹的 add/revoke 权限。但是由于树在折叠时每次都会重新渲染,所以添加的 类 会丢失。我在现有精灵上添加了一个带有关闭图标的额外精灵图像,并在单击时更改了精灵位置。 (无法 post 屏幕截图,因为我没有 post 图片的最低声誉)。文件夹也可以有深层嵌套。
当前 jsTree(其中 X 表示新文件夹图标)
-X Reports library
- X Archives
- My Reports
/* 再次折叠和展开时:*/
-X Reports library
- Archives
- My Reports
最初的 knockout js 树已经使用这个 fiddle
的变体完成页面加载后,我需要根据 JSON.I 中的权限 (true/false) 设置图标,也可以向 json 添加 permission:true 属性.另外,我需要切换一个文件夹,该文件夹及其子文件夹应该切换文件夹图标,表明权限已被撤销。
self.tree.on("changed.jstree", function (e, data) {
var node = self.tree.jstree().get_selected(true)[0]; //get current selected node
var selId = "#"+ node.a_attr.id;
$(selId).toggleClass("permission-icon");
var nextItem = $(selId).next();
var nextListItemFlag = $(selId).next().hasClass("jstree-children");
if(nextListItemFlag){
$(nextItem).children().each(function(){
$(this).find(".jstree-icon.jstree-themeicon").toggleClass("custom-permission-icon");
});
}
if (typeof node !== 'undefined') {
self.isNodeSelected(true);
self.selectedNode(node);
self.myinfo(node.original.folderdata);
} else {
self.isNodeSelected(false);
}
});
self.treeData = ko.observableArray(
[{
'id': 1,
'parent': '#',
'text': 'Reports Library',
'state': {
selected: false
},
'type': '#',
'folderdata': [{name: "Reports", type: "folder", modified: "07-02-2015", size: "10 KB"},
{name: "New text doc", type: "text", modified: "07-02-2015", size: "20 KB"},
{name: "test.pptx", type: "pptx", modified: "07-02-2015", size: "39 KB"},
{name: "test.xlsx", type: "excel", modified: "07-02-2015", size: "50 KB"}
],
}, {
'id': 2,
'parent': '#',
'text': 'Reports Archive',
'type' : '#',
'folderdata': [{name: "Meetings", type: "folder", modified: "07-02-2015", size: "10 KB"},
{name: "logs", type: "text", modified: "07-02-2015", size: "20 KB"},
{name: "sessions", type: "pptx", modified: "07-02-2015", size: "39 KB"},
{name: "worklog", type: "excel", modified: "07-02-2015", size: "50 KB"}
],
}, {
'id': 'dog',
'parent': 1,
'text': 'Reports',
'type' : 'folder'
}]
任何帮助将不胜感激!已经在这件事上卡了一天了:(
jsTree 只在 DOM 中保留可见节点,所以一旦节点折叠然后重新打开 - 它的所有子节点都从内部 JSON 表示重新加载 - 如果你没有修改它,您对 DOM 节点所做的任何更改都将丢失。
基本上如果你想添加一个class,你会做这样的事情(这是针对LI节点,当然你也可以修改A节点):
.on('changed.jstree', function (e, data) {
// DOM
data.instance.get_node(data.selected[0],true).addClass('newClass');
// internal model
data.instance._model.data[data.selected[0]].li_attr.class += ' newClass';
});
图标也一样-有一种方法可以处理图标变化-set_icon
.