如何根据jstree中的选定节点传递值答案

【问题标题】：How to pass values according to selectred node in jstree如何根据jstree中的选定节点传递值
【发布时间】：2017-08-12 08:22:24
【问题描述】：

我的网页中有jstree，我想根据树中选择的节点来更改网页中的项目。

我从一个示例开始，查看每个选定节点的图像。这是 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Tree Monitoring</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="/assets/navbar.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  </head>

  <body>
    <% include partials/nav.ejs %>
    <div class="container" style="padding-top: 100px;">
        <div class="row">
            <div class="col-lg-12">
            <div id="mytree1">
          <ul>
                    <li>element1
                    <ul>
                        <li>element2
                            <ul>
                    <li>element3</li>
                            </ul>
                        </li>
                    </ul>
                    </li>
                </ul>
            </div>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
            <script>
                $(function () {
                // 6 create an instance when the DOM is ready
                $('#mytree1').jstree({
              //"plugins": ["checkbox"]
            });
            $('#mytree1')
              // listen for event
              .on('changed.jstree', function (e, data) {
                var i, j, r = [];
                for(i = 0, j = data.selected.length; i < j; i++) {
                  r.push(data.instance.get_node(data.selected[i]).text);
                }
                console.log(r[0])
              })
              // create the instance
              .jstree();
            });
        </script>
            </div>
        </div>
    <div class="row">
      <div class="col-lg-12">
        <!-- Conditionally display Sign In or Sign Out -->
        <% if(r[0]=="element1"){ %>
          <img src="/assets/image1.png" class="img-responsive center-block">
        <% }%>
        <% if(r[0]=="element2"){ %>
          <img src="/assets/image2.png" class="img-responsive center-block">
        <% }%>
        <% if(r[0]=="element3"){ %>
          <img src="/assets/image3.png" class="img-responsive center-block">
        <% }%>
      </div>
     </div>
    </div>
  </body>
</html>

我一直有错误：r 未定义。

如何将变量 r 从 AJAX 发送到 JS？有没有一种简单的方法可以让网页根据所选节点动态改变其内容？

谢谢，

【问题讨论】：

我认为当您在客户端 (javascript) 上发生`var i, j, r = [];` 并且它仅存在于 client browser 时会产生混淆。但是当您使用<% if(r[0]=="element1"){ %> 时，您正在寻找一个名为r 服务器端的变量（根据错误，您没有在任何地方定义它）。选项是将显示逻辑移动到客户端。如果这是您的要求允许的，我可以为您提供帮助。
@DavidEspino，我更喜欢在服务器端执行大部分逻辑，因为大多数变量都在那里，但如果你能帮助我将这个特殊情况转移到客户端，我将不胜感激跨度>
有没有办法可以将此属性data.selected[i]).text 匹配为图像的src？
其实我不知道，我以图片为例，真实案例有图表和地图。

标签： javascript html ajax node.js jstree

【解决方案1】：

我在您的代码中没有看到任何 ajax。

要在节点单击时动态更改图像，我会为图像分配一个 id 并在您获得所选节点的部分更新其 src 属性，如下所示。

查看演示 - Fiddle Demo

...

for(i = 0, j = data.selected.length; i < j; i++) {
     r.push(data.instance.get_node(data.selected[i]).text.trim());  
     // notice the trim above - you need it since the label will have a line break symbol, which you don't need
     // I would rather get an id of the node, than the label
}


var src = '';
switch (r[0]) {
    case 'element1':
        src = '...';
        break;
    case 'element2':
        src = '...';
        break;
    case 'element3':
        src = '...';
        break;
}
$('#img-status').attr('src', src);

【讨论】：

正是我需要的，非常感谢