Question

jsTree似乎是一个漂亮的轻量级jquery树构建包，但在使用它几天之后，由于缺乏清晰有用的在线文档，它在我的嘴里确实留下了酸味。

我将在下面包含以下方法，以防任何未来的开发人员试图弄清楚如何实现这一目标，并且不想花费数小时或数天来绊倒它。我确信有更优雅或最佳实践的方法来编写代码，但我找不到任何不涉及将jjree方法构建到jstree函数本身的示例（在我的情况下非常不是一个选项）。在下面的示例中，我可以在makeTree（）中调用Ajax方法来获取我的数据，按照我认为合适的方式构建JSON并手动将其插入树中。

无论如何，下面是我为在页面加载时构建树而创建的一些示例代码，清空emptyTree（）上所有节点的树，并在makeTree（）上从JSON重建树。这显然是一个不完整的参考，但如果你只是需要一个快速而肮脏的方式来做我正在做的这个包，你可能会欣赏这一点。

    $(document).ready(function(){
        $("#myJSTree").jstree({
            'core' : {
                'check_callback' : true 
            }
        });
    });

    function emptyTree()
    {
        var myTree = $("#myJSTree").jstree(true);

        $("#myJSTree .jstree-leaf, .jstree-anchor").each(function(){

            myTree.delete_node($(this).attr('id'));

        });
    }

    function makeTree()
    {
        var myTree = $("#myJSTree").jstree(true);

        // This JSON is just an example, you can create it how you need it, I'll include the sample Valid JSON at the bottom for reference.
        var nodesJSON = { "text": "Passed Testing", "icon": "images/success.png", "state": { "opened": true }, "children": [{ "text": "Passed Testing", "icon": "images/success.png", "state": { "opened": true }},{ "text": "Passed Testing", "icon": "images/success.png", "state": { "opened": true }}]};

        myTree.create_node("#", nodesJSON, "last", function() {}, true);

    }


// Adding the HTML that gets built into the tree at page load in my example
<div id="myJSTree">
    <ul>
        <li>Node 1</li>
        <li class="jstree-open">
            <ul>
                <li>SubNode 1</li>
                <li>SubNode 2</li>
            </ul>
        </li>
        <li>Node 2</li>
    </ul>
</div>

// Valid JSON format that took me a while to find on the jstree website
// I didn't write these. it's copied and pasted.
// sample JSON 1
{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

// Sample JSON 2
{
  id          : "string" // required
  parent      : "string" // required
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

如果您有更好的方法可以实现这一点，请随时分享您的见解，但这个软件包的文档对我来说并不是非常直观。我梳理了他们的网页，很痛苦。

Answer 1

要清除树中的所有节点，可以调用 myTree.delete_node（myTree.get_node（“＃”）。children）;

jsTree Clear Tree，Rebuild Tree

1 个答案: