Knockout.js Jstree-添加到节点的额外类在崩溃时丢失

我正在创建一个基于权限的淘汰JS jsTree，从observableArray中提取树数据。我想在单击时添加/撤销对文件夹和子文件夹的权限，以及在页面加载时基于JSON的权限。但由于树每次崩溃时都会重新渲染，因此添加的类将丢失。我已经添加了一个额外的精灵图像与关闭图标，以现有的精灵和改变精灵的位置后，点击。 （无法发布截图，因为我没有发布图片的最低声誉）。文件夹也可以有深嵌套

当前jsTree（其中X表示新文件夹图标）

/*再次塌陷和膨胀时：*/

 -X Reports library
   - Archives
 - My Reports

最初的敲除js树是使用此树的一个变体完成的

加载页面时，我需要根据JSON中的权限（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节点所做的任何更改都会丢失

基本上，如果您想添加一个类，您可以这样做（这是针对LI节点的，当然您也可以修改a节点）：

---

图标也是一样-有一种处理图标更改的方法-

set_icon

非常感谢您的快速响应vakata！我以前看过您提供的很多解决方案！：）让我试试上面提到的解决方案，看看它是否奏效。在发布之前，事实上我在stackoverflow中搜索了很多类似的jsTree展开-重新呈现问题。感谢您的快速响应！

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'
}]

.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';
});