选择节点时JsTree提交表单

Question

我正在使用 JsTree 创建树结构并且显示效果很好。我用无序的 HTML 列表填充树，每个列表元素都有一个值保存在 "title" 属性下。

我想做的是，当用户 select 是一个节点时，提交一个运行 objectQuery.php.

的表单

<form id="sampleForm" name="sampleForm" method="post" action="objectQuery.php">
<input type="hidden" name="userInputObject" id="total" value="">

因为我通常不使用 Javascript 或 JsTree，所以我没有任何经验，所以我查找了类似的问题并尝试了我自己的脚本版本，如下所示。

树的创建方式与此脚本类似：

<script>
    $(function () { $('#treeViewer').jstree(); });
</script>

我尝试用其他问题提交表单并将值传递给 objectQuery.php:

<script>
    $("#treeViewer").on("select_node.jstree", function(e){

            var selected_titles = [];
            $("#treeViewer").jstree('get_selected').each(function () {
                document.sampleForm.userInputObject.value =  selected_titles.push(this.title);
                document.forms["sampleForm"].submit();

            });

            //  $.post("objectQuery.php");
        }
    );
</script>

现在当我select一个节点时，没有任何反应。有人可以把我推向正确的方向吗？

我再次知道这与关于该主题的其他问题类似，但我查看了其他问题并自己尝试了一段时间（否则我无法首先创建该脚本，因为我无法在 javascript).

中编码

Answer 1

看看这个解决方案 - 这允许 selection 多个节点并将它们附加到 json 到您的 #total 字段（在代码段中显示以供演示）。在这种情况下，您将需要在最后一项 select 编辑后单独处理表单提交（您可以在按住 CTRL 或 SHIFT 的同时 select 更多项）。如果您只想自动提交第一个 selected，请在设置 #total 字段后立即输入您的提交代码。

 $(function () { 
  $('#treeViewer').jstree(); 
  $("#treeViewer").on("select_node.jstree", function(e){
            var selected_titles = [];
            var selectedIndexes = $("#treeViewer").jstree("get_selected", true);
            $.each(selectedIndexes,function () {
                selected_titles.push(this['li_attr'].title);
            });
            $("#total").val(JSON.stringify(selected_titles))
            // for plaintext
            $("#total_plain").val(selected_titles.join(","))
        }
    );
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
<link rel="stylesheet" href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css"/>

<div id="treeViewer">
  <ul>
    <li title="val1">Root node 1</li>
    <li title="val2">Root node 2</li>
    <li title="val3">Root node 3</li>
    <li title="val4">Root node 4</li>
    <li title="val5">Root node 5</li>
  </ul>
</div>

<input type="text" name="userInputObject" id="total" value="">
<br>
<input type="text" id="total_plain" value="">

选择节点时JsTree提交表单

JsTree submit form when node is selected

javascript

php

jquery

jstree