disable a treeview node
I have listed data for ASP.net control TreeView. I wanted to disable a particular node/parentnode in the listed TreeView. I wanted to do this using jQuer开发者_如何学JAVAy.
if you take a simple treenode markup:
<asp:TreeView runat="server" ID="myTreeView">
<Nodes>
<asp:TreeNode Text="Node 1 "/>
<asp:TreeNode Text="Node 2"/>
<asp:TreeNode Text="Node 3"/>
</Nodes>
<NodeStyle CssClass="treeNode" />
</asp:TreeView>
Then the default output for a single node is:
<table cellspacing="0" cellpadding="0" style="border-width: 0pt;">
<tbody><tr>
<td><img alt="" src="/WebResource.axd?d=g57q362hyd_ZDMok5KQd0PqwW46aD7OdNOJZcZxqq5Q1&t=634092817937234954"></td><td style="white-space: nowrap;" class="treeNode myTreeView_2"><a style="border-style: none; font-size: 1em;" id="myTreeViewt0" onclick="TreeView_SelectNode(myTreeView_Data, this,'myTreeViewt0');" href="javascript:__doPostBack('myTreeView','sNode 1 ')" class="myTreeView_0 treeNode myTreeView_1">Node 1 </a></td>
</tr>
</tbody></table>
At this point you can see that the surrounding the a tag that gets generated receives the css class 'treeNode' so to select a specific node you could use the following selector:
$('.treeNode:eq(0)') to get the first node in the tree. there are other selectors you may prefer to use, see the selectors page on jQuery docs.
Then you can do different things.
You can hide the node:
$('.treeNode:eq(0)').hide();
you can replace the a tag with text:
var node = $('.treeNode:eq(0)'); //get the node element
var nodeLink = $('a', node).hide() //get the link and hide it;
node.append(nodeLink.text()); //get the text from the link and add it to the node
or you can use a 3rd party jquery plugin to block the element (usually good while performing an ajax operation):
- download the [blockui][2] plugin
- reference the javascript file from your page (or masterpage)
- then use this javascript call:
to block:
$('.treeNode:eq(0)').block();
unblock:
$('.treeNode:eq(0)').unblock();
精彩评论