Question

您好我在jsTree中选择了新创建的节点。每次用户想要添加节点时，我都会让它们重命名并按Enter键。最初我使用一个临时ID创建节点，然后在输入后我在.bind中编写代码（＆＃34; rename_node.jstree＆＃34;，function（...）{}）我抓住了他们输入的新文本+他们的父名称，并使其成为节点的新ID。

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

http://jsfiddle.net/p0bchhmt/

我猜测即时更改ID不会这样。有关如何使用jstree实现此目的的任何想法？感谢

＆＃13;

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());

＆＃13;

<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>

＆＃13;

Answer 1

要使用set_id方法更改节点的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中未定义，即使它在视觉上也是如此

1 个答案: