如何在加载 VB ASP 时加载 jstree 复选框答案

【问题标题】：How to load jstree checkbox on load VB ASP如何在加载 VB ASP 时加载 jstree 复选框
【发布时间】：2016-01-15 16:57:40
【问题描述】：

我正在尝试使用 ASP 在加载时加载 jstree 复选框。后面的代码采用一个树节点并填充一个列表项供 jstree 使用。在这个过程中，有一些节点被标识为“Checked”，我在其中将类属性 jstree-clicked 添加到列表项中。但是，当页面加载时，它没有任何效果。请让我知道使用预先选中的复选框填充这些复选框的适当方式。我的后端有以下内容

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 repeater_ItemDataBound(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.Checked Then
        li.Attributes.Add("rel", "true")
    End If

    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

下面是代码的aspx部分。

<div id="myTreeNode" > 
    <asp:Repeater ID="rptr" runat="server" EnableViewState="False" OnItemDataBound="repeater_ItemDataBound" >
    <headerTemplate>
        <ul>
    </headerTemplate>
    <ItemTemplate>
        <li id="listItem" runat="server"></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
    </asp:Repeater>
</div>

【问题讨论】：

标签： javascript jquery asp.net vb.net jstree

【解决方案1】：

您应该在其中添加 jstree-clicked 类的不是 li 元素（我在这一行中看到：li.Attributes.Add("class", "jstree-clicked")），而是 a 元素中的 li。

确保为li 的直接子a 设置该类。

【讨论】：

我是否需要通过 jQuery 设置 a 元素类，因为 a 元素是从 jsTree 插件添加的？如果是这样，应该调用什么 jsTree 函数？
只需将类添加到a 元素，jsTree 将处理 css。但我看到了一个问题 - 这只会可视化选中的节点，但如果用户试图取消选中这些节点，它将无法正常工作。为了使用户能够做到这一点，我看到了两个选项：1）设置树的配置（例如在 JSON 中），然后在初始化时将其提供给 jsTree；只需为要预选的节点设置"state":{"selected":true}；或 2) jsTree 初始化后访问节点并使用$("#yourtreeid").jstree().select_node 方法选择它们。检查：Fiddle

【解决方案2】：

在 javascript 文件中，jsTree 然后检查属性并在加载所有内容后预先选中复选框。这会适当地选中复选框。正如上面评论中提到的，这避免了只处理 CSS，而是处理整个节点。

$("#myTreeNode").bind('ready.jstree', function (event, data) {
    var $tree = $(this);
    $($tree.jstree().get_json($tree, {
        flat: true
    })).each(function () {
    var checked = $(this).attr('rel');
    var node;
    if( checked == "true"){
        node = $("#myTreeNode").jstree().select_node(this.id);
    }
});
});

【讨论】：