Question

我使用JsTree创建树结构，显示效果很好。我用无序的HTML列表填充树，每个列表元素都有一个保存在＆＃34;标题＆＃34;属性。

我想要做的是，当用户选择一个节点时，会提交一个运行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>

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

我再次知道这与关于这个主题的其他问题类似，但我查看了其他问题并尝试了一段时间（否则我将无法在第一时间创建该脚本）无法在javascript中编码。

Answer 1

看一下这个解决方案 - 这允许选择多个节点并将它们附加到你的#total字段的json中（在片段中显示为可见）。在这种情况下，您需要在选择最后一个项目后单独处理表单（您可以在按住CTRL或SHIFT时选择更多项目）。如果您只想自动提交所选的第一个，请在设置#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提交表单

1 个答案: