2016-01-15 13 views
1

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

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> 

回答

0

在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); 
    } 
}); 
}); 
1

这不是li元素,用户应该添加jstree-clicked类(我看到它在这一行:li.Attributes.Add("class", "jstree-clicked")),但lia元素。

请确保您为该lia儿童设置了该类。

+0

我需要通过jQuery设置'a'元素类,因为'a'元素是从jsTree插件添加的?如果是这样,什么jsTree函数将适合调用? – usr4896260

+1

只需将类添加到'a'元素,jsTree就会照顾css。但是我看到一个问题 - 这将只显示已检查的节点,但如果用户试图取消选中这些节点,将无法正常工作。为了让用户做到这一点,我看到两个选项:1)设置树的配置(例如以JSON),然后在初始化时将其馈送给jsTree;那里只需设置''状态':{“selected”:true}''您想要预选的节点;或2)在jsTree初始化后访问节点,并用'$(“#yourtreeid”).jstree()。​​select_node'方法选择它们。检查:[小提琴](https://jsfiddle.net/ermakovnikolay/7fp4hc8o/) –