将动态参数传递给 jsTree 中的方法

Question

我正在使用 jsTree，我计划将所有命令 executed/passed 集中到 jsTree，以便我可以在执行这些命令之前执行一些检查。

我能够针对树调用命令，但我发现很难向命令传递一个以上的参数。

如果您参考下面的屏幕截图，那么它表明我正在尝试将三个参数传递给命令。

但是当它到达 jsTree 时，它当然被视为一个数组，我想将它们作为参数而不是数组传递。

有助于更好地理解问题的代码片段。

var Demo = function() {
  var $tree = $("#jstree");
  var isTreeReady = false;

  function execute_command(command) {
    if (typeof command === 'undefined') {
      alert("command not passed to execute_command();");
      return;
    }
    if (isTreeReady) {
      if (arguments.length === 1) {
        return $tree.jstree(command);
      } else {
        /*This is where I need help*/
        /*It works fine if there is only one argument*/
        /*But when I try to pass multiple arguments jstree sees them as an array instead of separate arguments*/
        var args = [];
        for (var i = 1; i < arguments.length; i++) {
          args.push(arguments[i]);
        }
        //I have also tried 
        //var args = Array.prototype.slice.call(arguments, 1)
        return $tree.jstree(command, args);
      }
    } else {
      alert('Tree is not ready for command [' + command + ']');
    }
  }

  function select_node(event, selected) { //triggered when an node is selected

  }

  function ready() {
    isTreeReady = true;
  }

  return {
    Initialize: function() {
      $tree.on("ready.jstree", ready)
        .on("select_node.jstree", select_node)
        .jstree({
          'core': {
            'data': [{
              "id": "0",
              "parent": "#",
              "text": "Home",
              "state": {
                "opened": true,
                "selected": true,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78612",
              "parent": "0",
              "text": "Getting started",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "active disable",
                "disabled": "disabled"
              }
            }, {
              "id": "78617",
              "parent": "0",
              "text": "What's new",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78614",
              "parent": "0",
              "text": "2 minute video tutorials",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78615",
              "parent": "0",
              "text": "How-to papers",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78613",
              "parent": "0",
              "text": "Reference",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78616",
              "parent": "0",
              "text": "Hands on exercises",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }],
            "themes": {
              "variant": "large",
              "dots": false,
              "icons": false,
            },
            "multiple": false,
          }
        });
    },
    SelectNode: function(contentID) {
      if (typeof contentID !== 'undefined' && execute_command('is_selected', "#" + contentID) === false) {
        execute_command('deselect_all', false);
        execute_command('select_node', "#" + contentID);
      }
    },
    GetSelectedNodePath: function() {
      return execute_command('get_path', '#' + execute_command('get_selected')[0], ' -> ', false); //get_path takes three arguments 
    }
  }
}();

Demo.Initialize();

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div>
  <label>Works:</label>
  <input type="button" class="btn btn-default" value="Select 'Getting Started'" onclick="Demo.SelectNode(78612)" />
  <br />
  <label>Does NOT work:</label>
  <input type="button" class="btn btn-default" value="Get Selected Node Path" onclick="alert(Demo.GetSelectedNodePath())" />
</div>

<div id="jstree">
</div>

Answer 1

您可以使用 apply() 将参数数组传递给函数。您还需要在数组中包含 command。

args.splice(0, 0, command);

return $tree.jstree.apply( $tree, args );

var Demo = function() {
  var $tree = $("#jstree");
  var isTreeReady = false;

  function execute_command(command) {
    if (typeof command === 'undefined') {
      console.log("command not passed to execute_command();");
      return;
    }
    if (isTreeReady) {
      return $tree.jstree.apply($tree, arguments);
    } else {
      console.log('Tree is not ready for command [' + command + ']');
    }
  }

  function select_node(event, selected) { //triggered when an node is selected

  }

  function ready() {
    isTreeReady = true;
  }

  return {
    Initialize: function() {
      $tree.on("ready.jstree", ready)
        .on("select_node.jstree", select_node)
        .jstree({
          'core': {
            'data': [{
              "id": "0",
              "parent": "#",
              "text": "Home",
              "state": {
                "opened": true,
                "selected": true,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78612",
              "parent": "0",
              "text": "Getting started",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "active disable",
                "disabled": "disabled"
              }
            }, {
              "id": "78617",
              "parent": "0",
              "text": "What's new",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78614",
              "parent": "0",
              "text": "2 minute video tutorials",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78615",
              "parent": "0",
              "text": "How-to papers",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78613",
              "parent": "0",
              "text": "Reference",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }, {
              "id": "78616",
              "parent": "0",
              "text": "Hands on exercises",
              "state": {
                "opened": false,
                "selected": false,
                "disabled": false
              },
              "li_attr": {
                "class": "",
                "disabled": ""
              }
            }],
            "themes": {
              "variant": "large",
              "dots": false,
              "icons": false,
            },
            "multiple": false,
          }
        });
    },
    SelectNode: function(contentID) {
      if (typeof contentID !== 'undefined' && execute_command('is_selected', "#" + contentID) === false) {
        execute_command('deselect_all', false);
        execute_command('select_node', "#" + contentID);
      }
    },
    GetSelectedNodePath: function() {
      return execute_command('get_path', '#' + execute_command('get_selected')[0], ' -> ', false); //get_path takes three arguments 
    }
  }
}();

Demo.Initialize();

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div>
  <label>Works:</label>
  <input type="button" class="btn btn-default" value="Select 'Getting Started'" onclick="Demo.SelectNode(78612)" />
  <br />
  <label>Does NOT work:</label>
  <input type="button" class="btn btn-default" value="Get Selected Node Path" onclick="console.log(Demo.GetSelectedNodePath())" />
</div>

<div id="jstree">
</div>

将动态参数传递给 jsTree 中的方法

Pass dynamic arguments to method inside jsTree

javascript

jstree