如何填充 jquery treeselect 小部件？答案

【问题标题】：How to populate jquery treeselect widget?如何填充 jquery treeselect 小部件？
【发布时间】：2015-05-13 10:58:24
【问题描述】：

我在用 json 文件（或任何东西）填充这个 jquery treeselect 小部件时遇到问题我是 jquery/javascript 的新手，所以我可能缺少一些基础知识。

我有来自https://github.com/travist/jquery.treeselect.js 的插件，但没有找到如何加载它的示例。

<html>
<head>
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
    <script type='text/javascript' src='js/jquery.moreorless.js'></script>
    <script type='text/javascript' src='js/jquery.treeselect.js'></script>
    <script type='text/javascript' src='js/jquery.chosentree.js'></script>

    <link rel='stylesheet' type='text/css' href='css/moreorless.css'/>
    <link rel='stylesheet' type='text/css' href='css/treeselect.css'/>
    <link rel='stylesheet' type='text/css' href='css/chosen.css'/>
    <script type='text/javascript'>
        jQuery(function () {

            var data1 = ["EVENT1", "EVENT2"];
            var data2 = [{
                "id": 1,
                "name": "A green door"
            },
                {
                    "id": 2,
                    "name": "A blue door"
                }
            ]

            $('div.chosentree').chosentree({
                width: 200,
                deepLoad: true,
                default_value: data2, // does not work 
                load: function (node, callback) {

                    // What do I put here?
                    /**
                     * This would typically call jQuery.ajax to load a new node
                     * on your server where you would return the tree structure
                     * for the provided node.
                     */
                }
            });
        });
    </script>
</head>
<body>
<div class="chosentree"></div>
</body>
</html>

【问题讨论】：

标签： javascript jquery html css json

【解决方案1】：

了解其工作原理的最佳方法是查看在@https://github.com/travist/jquery.treeselect.js/blob/master/treeselect.html 找到的 repo 中提供的示例文件。在这里您将看到以下代码。

$('div.chosentree').chosentree({
  width: 500,
  deepLoad: true,
  showtree: true,
  load: function(node, callback) {
    setTimeout(function() {
      callback(loadChildren(node, 0));
    }, 1000);
  }
});

此处load 方法中的代码实际上是对数据的外观执行虚假请求。它通过调用一个名为loadChildren 的方法来实现这一点，该方法在@https://github.com/travist/jquery.treeselect.js/blob/master/index.html 找到的文件中定义。以下是哪个...

var maxDepth = 3;
var loadChildren = function(node, level) {
  var hasChildren = node.level < maxDepth;
  for (var i=0; i<8; i++) {
    var id = node.id + (i+1).toString();
    node.children.push({
      id:id,
      title:'Node ' + id,
      has_children:hasChildren,
      level: node.level + 1,
      children:[]
    });
    if (hasChildren && level < 2) {
      loadChildren(node.children[i], (level+1));
    }
  }
  return node;
};

重要的是要意识到这是“伪造”对服务器的请求。这基本上伪造了一个对服务器的请求，该请求将返回如下所示的内容。

{
  "id": "1",
  "title": "Node 1",
  "has_children": "1",
  "children": [
    {
      "id": "11",
      "title": "Node 11",
      "has_children": "1",
      "children": [

      ]
    },
    ...
    ...
  ]
}

然后通过传入单个节点对象调用load 方法，如果您愿意，可以使用该对象加载该节点下的所有子节点。

我希望这会有所帮助。

【讨论】：

谢谢，帮了大忙！我花了一段时间才明白需要做什么，但现在我只是模拟来自服务器的响应并在我自己的 loadChildren 函数中加载树。

【解决方案2】：

想发布此代码，因为我在过去 2 个小时里一直认为它不会采用原始 JSON。确实如此，但不要忘记通过 JSON.parse(jsonString); 运行您的字符串文字；

例子：

    jQuery(function() {
        JSONObject = JSON.parse('{"id":"01","title":"Node 01","has_children":true,"level":1,"children":[{"id":"011","title":"Node 011","has_children":true,"level":2,"children":[{"id":"0111","title":"Node 0111","has_children":false,"level":3,"children":[]}]}]}');

        $('div.chosentree').chosentree({
            width: 500,
            deepLoad: true,
            load: function(node, callback) {
                    callback(JSONObject);
            }
        });
    });

【讨论】：