3
\$\begingroup\$

I'm trying to retrieve all the nodes of a jstree and display the data on a textarea, this strange code is working fine, but the execution is very slow, it takes an average of ~3 seconds for the textarea receive the incoming data from the jstree, i would like to know if is there any way to improve the peformance

Dependencies: jQuery 3.3.1 and jsTree 3.3.5

UPDATE: I made some improvements on the code by replacing the excessive event listeners with a single syncNodes() function

HTML <body>:

<!-- Here is where the user select a command -->
<select id="sel_cmd" onchange="exec(this.value)">
    <option value=""># Select a command #</option>
    <option value="inclib">Include library</option>
</select>

<!-- jstree container -->
<div id="jstree">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</div>

<!-- The textarea that will receive jstree nodes data -->
<textarea id="jstree-code" cols="60" rows="10"></textarea>

JS file

// Initialize jstree
$("#jstree").jstree({
    core: {
        'check_callback': true
    }
});

// (FUNCTION) Create jstree nodes
function createNode(tree_id, parent_node, new_node_id, new_node_text, position) {
    $(tree_id).jstree("create_node", $(parent_node), {
        text: new_node_text,
        id: new_node_id
    }, position, false, false);
}

// Get all nodes on the jstree and send their data to textarea
function syncNodes() {
    $("#jstree-code").val("");
    var nodesArray = []
    $(
        $("#jstree").jstree("get_json", $("#jstree"), { flat: true })
    ).each(function(index, value) {
        var node = $("#jstree").jstree().get_node(this.id);
        var txt = node.text.trim();
        var lvl = node.parents.length;
        var idx = index;
        nodesArray += "text = " + txt + " // index = " + idx + " // level = " + lvl + "\n";
    });
    $("#jstree-code").val(nodesArray);
}

// ******************************

syncNodes();

function exec(op) {
    switch (op) {
        case "inclib":
            var lib = prompt("Library name:");
            createNode("#jstree", "#jstree", `${lib}`, `${lib}`, "last");
            syncNodes();
            break;
    }
}
\$\endgroup\$
4
  • 1
    \$\begingroup\$ Hmm.. does this plunker still exhibit the slowness you observe? If not, can you alter it so that it does? \$\endgroup\$ Mar 30, 2018 at 23:34
  • \$\begingroup\$ It's running a lot smoother, thanks! @SamOnela \$\endgroup\$ Apr 4, 2018 at 22:45
  • \$\begingroup\$ Hmm... all I did was try to recreate the scenario you laid out... did you alter anything on that plunker? \$\endgroup\$ Apr 4, 2018 at 22:46
  • \$\begingroup\$ I just took the plunker code and kept working on it (adding new features) if you wanna take a look, i can send you a link \$\endgroup\$ Apr 4, 2018 at 23:00

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.