Question

我已经在html中实现了jstree并提供了来自json的输入数据。
当我点击root node时，它只显示j1_5或该节点的任何id 。我想获取给该节点的文本，那么我该怎么做呢？这是我的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jstree basic demos</title>
    <style>
    html { margin:0; padding:0; font-size:62.5%; }
    body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
    h1 { font-size:1.8em; }
    .demo { overflow:auto; border:1px solid silver; min-height:100px; }
    </style>
    <link rel="stylesheet" href="style.min.css" />
</head>
<body>
    <h1>HTML demo</h1>

    <h1>Data format demo</h1>
    <div id="frmt" class="demo"></div>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="jstree.min.js"></script>
        <button>>></button>
    <script>
    // html demo
    $('#html').jstree();
    $('#frmt').jstree({
        'core' : {
            'data' : [
                {

                    "text" : "Root node",
                                        "icon" : "http://jstree.com/tree-icon.png",
                    "state" : { "opened" : true },
                    "children" : [
                        {
                            "text" : "Child node 1",
                            "icon" : "jstree-file",
                                                        "children" : [
                        {
                            "text" : "Child node 1",
                            "icon" : "jstree-file",
                        },
                        { "text" : "Child node 2" }
                    ]
                        },
                        { "text" : "Child node 2" }
                    ]
                }
            ]
        }
    });
$('#frmt').on("changed.jstree", function (e, data) {
                    console.log(data.selected);
                });
$('button').on('click', function () {
                    alert($('#frmt').jstree("get_selected"));
                });
    </script>
</body>
</html>

Answer 1

您只需指定ID属性即可从节点获取值。这对你有帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jstree basic demos</title>
    <style>
    html { margin:0; padding:0; font-size:62.5%; }
    body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
    h1 { font-size:1.8em; }
    .demo { overflow:auto; border:1px solid silver; min-height:100px; }
    </style>
    <link rel="stylesheet" href="style.min.css" />
</head>
<body>
    <h1>HTML demo</h1>

    <h1>Data format demo</h1>
    <div id="frmt" class="demo"></div>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="jstree.min.js"></script>
        <button>>></button>
    <script>
    // html demo
    $('#html').jstree();
    $('#frmt').jstree({
        'core' : {
            'data' : [
                {

                    "text" : "Root node",
                                        "icon" : "http://jstree.com/tree-icon.png",
                    "state" : { "opened" : true },
                    "children" : [
                        {
                            "text" : "Child node 1",
                            "icon" : "jstree-file",
                      "children" : [
                        {
                            "id":"MyID",
                            "text" : "Child node 1",
                            "icon" : "jstree-file",
                        },
                        {"id" : "Sub Name 2", "text" : "Child node 2" }
                    ]
                        },
                        { "id" : "NAME 2","text" : "Child node 2" }
                    ]
                }
            ]
        }
    });
$('#frmt').on("changed.jstree", function (e, data) {
                    console.log(data.selected);
                });
$('button').on('click', function () {
                    alert($('#frmt').jstree("get_selected"));
                });
    </script>
</body>
</html>

Answer 2

您可以从data事件回调中收到的changed.jstree对象参数中获取所选节点的文本值。

Here一个工作小提琴。在此示例中，我在changed.jstree事件中添加此行：

console.log('Node Text = ', data.node.text);

data对象包含许多信息。在selected属性中，您找到了元素id。
但在node属性中有许多属性，text是您需要的属性。其中包含jstree中所选元素的文本。

注意：在您的代码中，您呼叫的是$('#html').jstree()，但您的html标记根本没有设置ID。你可以安全地删除这一行。

单击jschart实体时获取文本

2 个答案: