jstree 设置节点 href link 并添加 onclick 事件

Question

我是 jQuery 和 jsTree 的新手，我想完成两件事。 1) 我希望节点在单击时转到指定的 url。默认情况下，li 在 href=# 的位置有 a 标签。 2) 我想在某些节点上添加一个 onClick 事件。我已经搜索过，但似乎无法就如何执行此操作获得明确的答案。我尝试了以下操作：

$(function () {
    $('#leftNav').jstree({
        "core": {
            "themes": {
                'name': 'default',
                "variant": "small",
                "icons": false
            }
        },
        "checkbox": {
            "keep_selected_style": false
        },
    });
});

$('#leftNav').on("changed.jstree", function (e, data) {
    console.log(data.selected);

    var i, j;
    for (i = 0, j = data.selected.length; i < j; i++) {
        var nodeId = data.selected[i]
        nodeId = "#" + nodeId
        // 1) Code to change node url
        $(nodeId).attr("href", "http://www.google.com/")

        // 2) Code to add onClick to node
        $(nodeId).click("myFunction")
    }
});

我的数据填充，我使用 asp 转发器如下：

Treeview.aspx

<div id="leftNav">
   <asp:Repeater ID="rptr" runat="server" EnableViewState="False" OnItemDataBound="loadTreeView">
      <HeaderTemplate>
         <ul>
            <li class="jstree-open">
               My Workplace
               <ul>
      </HeaderTemplate>
      <ItemTemplate>
      <li id="listItem" runat="server"></li>
      </ItemTemplate>
      <FooterTemplate>
      </ul>
      </li>
      </ul>
      </FooterTemplate>
   </asp:Repeater>
</div>

Treeview.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim tNode As TreeNode
    Dim treeView As New TreeView
    Dim tNodeCollection As New TreeNodeCollection
    tNodeCollection = treeView.Nodes

    ' Code to generate and store within
    ' a System.Web.UI.WebControls.TreeView object
    ' ...
    ' ...
    ' ...

    repeater.DataSource = tNodeCollection          
    repeater.DataBind()
End Sub

Protected Sub loadTreeView(sender As Object, e As RepeaterItemEventArgs)
    Dim tNode As TreeNode
    Dim li As New HtmlGenericControl
    Dim ul As New HtmlGenericControl("ul")
    tNode = e.Item.DataItem

    If (tNode Is Nothing) Then
        Return
    End If

    li = e.Item.FindControl("listItem")
    li.ID = tNode.Value
    li.InnerHtml = tNode.Text

    If tNode.ChildNodes.Count > 0 Then
        li.Controls.Add(ul)
        searchChildNodes(tNode.ChildNodes, ul)
    End If
End Sub

Private Sub searchChildNodes(childNodes As TreeNodeCollection, ul As HtmlGenericControl)
    Dim tNode As TreeNode
    For Each tNode In childNodes
        Dim li As New HtmlGenericControl("li")
        li.ID = tNode.Value
        li.InnerHtml = tNode.Text
        ul.Controls.Add(li)
        If tNode.ChildNodes.Count > 0 Then
            Dim unorderedList As New HtmlGenericControl("ul")
            li.Controls.Add(unorderedList)
            searchChildNodes(tNode.ChildNodes, unorderedList)
        End If
    Next
End Sub

Answer 1

对于#1。以上代码有没有错误？

对于#2。为 select_node.jstree 添加事件，然后获取节点 ID 并重定向 - 尚未测试代码可能有错误。

$("#leftNav").bind('select_node.jstree', function(event, data) {
    var selectedObj = data.rslt.obj;
    //redirect if node matches - console.log(selectedObj); to find the id or title
    if(selectedObj.attr("id") == "myNode"){
      //redirect or do whatever
      windows.location("http://www.google.com");
    }
}

Answer 2

如果您只需要 1) 在您的 url 打开一个新的 window 和 2) 在选择更改时调用一些函数，您可以这样做：

$('#leftNav').on("changed.jstree", function (e, data) {

    // open a new window with your url
    window.open("http://www.google.com/");

    // call a function
    myFunction();

})

然而，在这个 fiddle 中，我保留了您在每次新选择更改时对所有选定节点的迭代：JS Fiddle

jstree 设置节点 href link 并添加 onclick 事件

jstree set node href link and add onclick event

javascript

jquery

html

asp.net

jstree