用JQuery实现对ASP.NET TreeView控件的级连选中
TreeView控件很强大，但是在JS方面却有点弱，特别是有时候想在TreeView的节点前加上一个CheckBox的时候，对于CheckBox的选中状态的控制有点头疼。
比如说用TreeView实现权限分配，权限往往是一个树型的结构，客户常常会要求选中父节点的时候子节点随之全部选中或不选中。
而选中一个子节点的时候那么这个子节点的父节点，爷爷节点，曾爷爷节点，一直到老祖宗那儿都得选中，有些程序员在服务器端代码实现（我以前也这样干过），但是这样用户体验很不好，但是用JS实现的话怎样才能选中父节点挺头疼。这中间还涉及到TreeView控件生成的HTML代码冗余很多。
下面我用JQuery实现了这个功能，基本思路是根据TreeView生成的代码的ID的规律来实现的。
有朋友觉得不错的话可以拿去用，使用也很方便，只要在ready的方法中加上下面这句代码即可：
//第一个参数代表TreeView控件的ID，第二个参数：选中节点的时候是否也选中子节点，第三个参数：选中节点的时候，所有的父节点是否选中。
BindTreeView("TreeView2",true,true);
下面是全部代码：
比如说用TreeView实现权限分配，权限往往是一个树型的结构，客户常常会要求选中父节点的时候子节点随之全部选中或不选中。
而选中一个子节点的时候那么这个子节点的父节点，爷爷节点，曾爷爷节点，一直到老祖宗那儿都得选中，有些程序员在服务器端代码实现（我以前也这样干过），但是这样用户体验很不好，但是用JS实现的话怎样才能选中父节点挺头疼。这中间还涉及到TreeView控件生成的HTML代码冗余很多。
下面我用JQuery实现了这个功能，基本思路是根据TreeView生成的代码的ID的规律来实现的。
有朋友觉得不错的话可以拿去用，使用也很方便，只要在ready的方法中加上下面这句代码即可：
//第一个参数代表TreeView控件的ID，第二个参数：选中节点的时候是否也选中子节点，第三个参数：选中节点的时候，所有的父节点是否选中。
BindTreeView("TreeView2",true,true);
下面是全部代码：
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TreeViewTest</title>
<script src="http://www.cnblogs.com/Scripts/jquery-1.3.2.js"></script>
<script>
$(document).ready(Bind);
function Bind() {
BindTreeView("TreeView2",true,true);
}
function BindTreeView(treeViewId,selectChild,selectParent) {
$("#" + treeViewId + " input").click(function() {
if (selectChild) {
// var cbid = $(this).get(0).id;
// var sbcbid = "#" + cbid.substring(0, cbid.indexOf("CheckBox")) + "Nodes input";
var divItem = $(this).parent().parent().parent().parent().next();
divItem.find("input").attr("checked", $(this).get(0).checked);
// $(sbcbid).attr("checked", $(this).get(0).checked);
}
if (selectParent) {
SelectParentNode(treeViewId, $(this));
}
});
}
function SelectParentNode(treeViewId,node) {
if (node.get(0).checked == true) {
var pdiv = node.parent().parent().parent().parent().parent();
if (pdiv.get(0).id != treeViewId) {
// var pid = "#" + pdivid.substring(0, pdivid.indexOf("Nodes")) + "CheckBox";
// $(pid).attr("checked", node.get(0).checked);
pdiv.prev().find("input").attr("checked", node.get(0).checked);
SelectParentNode(treeViewId, pdiv.prev().find("input"));
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView2" runat="server" ShowCheckBoxes="All" ShowLines="True"
Width="325px">
<Nodes>
<asp:TreeNode Text="C:" Value="C:">
<asp:TreeNode Text="WINDOWS" Value="WINDOWS">
<asp:TreeNode Text="System" Value="System"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="D:" Value="D:">
<asp:TreeNode Text="程序" Value="程序">
<asp:TreeNode Text="开始" Value="开始">
<asp:TreeNode Text="控制面板" Value="控制面板"></asp:TreeNode>
<asp:TreeNode Text="打印机" Value="打印机"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="娱乐" Value="娱乐">
<asp:TreeNode Text="电影" Value="电影">
<asp:TreeNode Text="动作" Value="动作"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="E:" Value="E:">
<asp:TreeNode Text="游戏" Value="游戏"></asp:TreeNode>
<asp:TreeNode Text="好玩的" Value="好玩的"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="F:" Value="F:">
<asp:TreeNode Text="备份" Value="备份">
<asp:TreeNode Text="软件" Value="软件"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="G:" Value="G:"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TreeViewTest</title>
<script src="http://www.cnblogs.com/Scripts/jquery-1.3.2.js"></script>
<script>
$(document).ready(Bind);
function Bind() {
BindTreeView("TreeView2",true,true);
}
function BindTreeView(treeViewId,selectChild,selectParent) {
$("#" + treeViewId + " input").click(function() {
if (selectChild) {
// var cbid = $(this).get(0).id;
// var sbcbid = "#" + cbid.substring(0, cbid.indexOf("CheckBox")) + "Nodes input";
var divItem = $(this).parent().parent().parent().parent().next();
divItem.find("input").attr("checked", $(this).get(0).checked);
// $(sbcbid).attr("checked", $(this).get(0).checked);
}
if (selectParent) {
SelectParentNode(treeViewId, $(this));
}
});
}
function SelectParentNode(treeViewId,node) {
if (node.get(0).checked == true) {
var pdiv = node.parent().parent().parent().parent().parent();
if (pdiv.get(0).id != treeViewId) {
// var pid = "#" + pdivid.substring(0, pdivid.indexOf("Nodes")) + "CheckBox";
// $(pid).attr("checked", node.get(0).checked);
pdiv.prev().find("input").attr("checked", node.get(0).checked);
SelectParentNode(treeViewId, pdiv.prev().find("input"));
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView2" runat="server" ShowCheckBoxes="All" ShowLines="True"
Width="325px">
<Nodes>
<asp:TreeNode Text="C:" Value="C:">
<asp:TreeNode Text="WINDOWS" Value="WINDOWS">
<asp:TreeNode Text="System" Value="System"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="D:" Value="D:">
<asp:TreeNode Text="程序" Value="程序">
<asp:TreeNode Text="开始" Value="开始">
<asp:TreeNode Text="控制面板" Value="控制面板"></asp:TreeNode>
<asp:TreeNode Text="打印机" Value="打印机"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="娱乐" Value="娱乐">
<asp:TreeNode Text="电影" Value="电影">
<asp:TreeNode Text="动作" Value="动作"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="E:" Value="E:">
<asp:TreeNode Text="游戏" Value="游戏"></asp:TreeNode>
<asp:TreeNode Text="好玩的" Value="好玩的"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="F:" Value="F:">
<asp:TreeNode Text="备份" Value="备份">
<asp:TreeNode Text="软件" Value="软件"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="G:" Value="G:"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
