新节点在 jsTree 中未定义，即使它在视觉上存在

Question

您好，我在 jsTree 中选择新创建的节点时遇到问题。每次用户想要添加一个节点时，我都会让他们重命名它并按回车键。最初我使用临时 ID 创建节点，在他们按下回车键后，我在 .bind("rename_node.jstree", function(...){}) 中编写代码，我在其中获取他们输入的新文本 + 他们的父级名称并将其作为节点的新 ID。

我找到了一个 jsfiddle，它正在执行常规节点添加和修改以更接近地反映我在我的实际代码中所做的事情。

http://jsfiddle.net/p0bchhmt/

我猜动态更改 ID 不会以这种方式工作。关于如何使用 jstree 完成此操作的任何想法？谢谢

function tree() {
    var self = this;

    //display actions in fiddle
    self.consoleLine = "<p class=\"console-line\"></p>";
    self.consoleLog = function (text) {
        $("#console-log").append($(self.consoleLine).html(text));
    };
    self.clearConsoleLog = function () {
        $("#console-log").html('');
    };


    self.tree = $('#jstree_demo_div'); //get jstree div
    self.isNodeSelected = ko.observable(false);
    self.selectedNode = ko.observable({});

    //deselect all nodes
    self.deselectAllNodes = function () {
        self.tree.jstree('deselect_all');
    }

    //keep track of selected node
    self.tree.on("changed.jstree", function (e, data) {
        var node = self.tree.jstree().get_selected(true)[0]; //get current selected node
            self.isNodeSelected(true);
            self.selectedNode(node);
            self.consoleLog('selected node id: ' + node.id);
    });
 
   self.tree.bind("rename_node.jstree", function(event, data){
      data.node.id = data.node.parent + "," + data.node.text;
        self.tree.treedata.push(data.node);
    });
    
    self.createFileNode = function (data) {
        var data = {
            'id': 'tempId',
                'text': 'iOS 8'
        }
        //create file node
        var id = self.tree.jstree("create_node", self.selectedNode(), data, 'last');
        self.tree.jstree('open_node', self.selectedNode());
        self.tree.jstree('edit', id);
    };

    self.treeData = ko.observableArray([{
        'id': 1,
            'parent': '#',
            'text': 'Animals'
    }, {
        'id': 2,
            'parent': '#',
            'text': 'Devices'
    }, {
        'id': 'dog',
            'parent': 1,
            'text': 'Dogs'
    }]);
};

ko.bindingHandlers.jstree = {
    buildTree: function (element, treeData) {
        $(element).jstree('destroy');
        $(element).jstree({
            'core': {
                'animation': 0,
                    'check_callback': true,
                    'data': treeData
            },
                'plugins': [
                'state'
                ]
        });
    },
    update: function (element, valueAccessor) {
        var treeData = ko.unwrap(valueAccessor());
        ko.bindingHandlers.jstree.buildTree(element, treeData.data());
    }
};

ko.applyBindings(new tree());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="wrapper">
    <div class="button-wrapper">
        <button type="button" class="btn btn-success btn-sm" data-bind="click: createFileNode">Create Node</button>
        <button type="button" class="btn btn-danger btn-sm" data-bind="click: clearConsoleLog">Clear Log</button>
        <button type="button" class="btn btn-danger btn-sm" data-bind="click: deselectAllNodes">Deselect All</button>

        <div id="jstree_demo_div" data-bind="jstree: { data: treeData }"></div>
    <div>--js tree log below--</div>
    <div id="console-log"></div>
    <!-- <div id="jstree_demo_dev_attributes">
        <ul>
          <li>Attribute Reporting Group
            <ul>
              <li>Invoice Dates</li>
            </ul>
          </li>
        </ul>
    </div> --></div>

Answer 1

要更改节点的 ID，请使用 set_id 方法。因此，在您的情况下，它可能如下所示。

检查演示 - Fiddle.

self.tree.bind("rename_node.jstree", function(event, data){
    var newId = data.node.parent + "," + data.node.text;;
    self.tree.jstree().set_id(data.node, newId);     
});

新节点在 jsTree 中未定义，即使它在视觉上存在

New Node undefined in jsTree even thou its visually there

jstree