这个 jsTree 元素上的这个 JQuery 脚本到底是做什么的？

Question

我在 JavaScript 方面完全是新手，在 JQuery 方面更是如此。

我在理解 JQuery 脚本到底是做什么的时候遇到了一些问题，我试着解释一下情况。

在一个使用 Struts2 标签库的 JSP 页面中（它只是一个包装标准 JQuery 组件的标签库）我有这样的东西：

<s:form id="treeForm" >
    <s:hidden name="idFolder" id="folderId"/>
    <s:hidden name="event"/>
    <s:hidden name="groupId"/>
    <s:hidden name="fileUrlCon"/>
    <s:hidden name="titleEvent"/>
    <s:hidden name="folderPath" id="folderPath"/>

    <table width="100%" border="0">
        <tr>
            <td width="33.3%">
                <sjt:tree id="treeId2" jstreetheme="default"
                          rootNode="root" openAllOnLoad="false"
                          childCollectionProperty="children"
                          nodeTitleProperty="title"
                          nodeIdProperty="id"
                        >
                </sjt:tree>
            </td>

            <td width="66.6%">
                <s:form >
                            <sj:div id="resultEvents" href="%{loadFolderTechId}"
                                    formIds="treeForm"
                                    class="result ui-widget-content ui-corner-all"
                                    loadingText=" "
                                    onBeforeTopics="before"
                                    onCompleteTopics="complete"
                                    deferredLoading="true"
                                    reloadTopics="reloadEvents"
                                    >
                            </sj:div>
                    <s:submit action="projectCreationAction"/>
                </s:form>
            </td>
        </tr>
    </table>
</s:form>

<script type="text/javascript">
    $(document).ready(function() {

        $("#treeId2").bind("select_node.jstree", function (event, data) {
            if (!isNaN(data.rslt.obj.attr("id"))) {
                //foglia quindi block

                document.getElementById("folderId").value = data.rslt.obj.attr("id");
                document.getElementById("folderPath").value = '';

                $.publish('reloadEvents');


            } else {

                document.getElementById("folderPath").value = data.rslt.obj.attr("id");

                $.publish('reloadEvents');
            }

        })
        window.setTimeout(
                function() {
                    $("#treeId2").jstree("open_node", $('#root'));
                },
                1000);
    });

</script>

sjt:tree 标记包装并基于 JQuery jsTree 插件，即：http://www.jstree.com/docs/config/，应该以相同的方式生成树。

它可以正常工作并在我的 JSP 页面中正确生成树。

我的 dubs 与在这棵树上运行的以下 JQuery 脚本有关：

$(document).ready(function() {

    $("#treeId2").bind("select_node.jstree", function (event, data) {
        if (!isNaN(data.rslt.obj.attr("id"))) {
            //foglia quindi block

            document.getElementById("folderId").value = data.rslt.obj.attr("id");
            document.getElementById("folderPath").value = '';

            $.publish('reloadEvents');


        } else {

            document.getElementById("folderPath").value = data.rslt.obj.attr("id");

            $.publish('reloadEvents');
        }

    })
    window.setTimeout(
            function() {
                $("#treeId2").jstree("open_node", $('#root'));
            },
            1000);
});

具体是做什么的？我正在尝试自己分析它，我认为它可以：

1) 首先它选择具有 id=#treeId2 的元素，因此它选择了我的整个树。

2) 然后 bind() 函数将处理程序附加到元素的事件。所以在这种情况下，处理的事件是选择我的树的一个节点。

3) 在这种情况下，我认为事件处理程序由以下定义的函数表示，该函数采用 2 个输入参数。现在我的疑问是：event 和 data 这两个参数到底是什么？

我认为 event 参数代表 select_node.jstree 事件，是真的吗？ data 参数代表什么？

具体做什么：

document.getElementById("folderId").value = data.rslt.obj.attr("id");
document.getElementById("folderPath").value = '';

document.getElementById("folderId") 和 document.getElementById("folderPath") 代表什么？

你能解释一下这个脚本到底是做什么的吗？

Answer 1

这两行设置隐藏字段数据值，以便在提交表单时回发这些选定的值。

引用的两个字段是：

<s:hidden name="idFolder" id="folderId"/>
<s:hidden name="folderPath" id="folderPath"/>

这会从您的树中获取选定的数据值并将其存储在 folderId 字段中。

document.getElementById("folderId").value = data.rslt.obj.attr("id");

这个将文件夹路径清空：

document.getElementById("folderPath").value = '';

代码后面有一个提交，估计是被“某事”激活了：

 <s:submit action="projectCreationAction"/>

注意：我不熟悉struts2，所以不知道表单是如何提交的，但看起来$.publish('reloadEvents');代码会触发它，因为reloadEvents在同一个表单HTML中被提及