单击 jschart 实体时获取文本

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

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

Here 工作 fiddle。在这个例子中，我在 changed.jstree 事件中添加了这一行：

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

data对象包含很多信息。在 selected 属性中，您找到了元素 id。
但是node属性里面有很多属性，text就是你需要的。其中有 jstree.

中所选元素的文本

注意：在您的代码中，您正在调用 $('#html').jstree()，但您的 html 标签根本没有设置 ID。您可以安全地删除此行。

单击 jschart 实体时获取文本

Fetch text while clicking on jschart entity

html

javascript

onclick

jstree