这个 JQuery 脚本在这个 jsTree 元素上到底做了什么？

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 页面中正确生成树。

我的疑惑与在这棵树上运行的以下 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) 首先它 select 具有 id=#treeId2 的元素所以它 select 我的整棵树。

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

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 = '';

代码后面有一个提交，大概是由 "something":

激活的

 <s:submit action="projectCreationAction"/>

注意：我不熟悉struts2，所以不知道表单是如何提交的，但看起来$.publish('reloadEvents');代码触发了它reloadEvents以相同的形式提到HTML

这个 JQuery 脚本在这个 jsTree 元素上到底做了什么？

What exactly do this JQuery script on this jsTree element?

javascript

jquery

jquery-plugins

struts2

jstree