ASP.NET TreeView级联选择问题

最新推荐文章于 2016-12-29 10:38:00 发布

yaojianyou

最新推荐文章于 2016-12-29 10:38:00 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发文章标签： asp.net asp table javascript input function

本文链接：https://blog.youkuaiyun.com/yaojianyou/article/details/1804873

Web开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种实现ASP.NET TreeView控件级联选择的方法，并提供了两种JavaScript实现方案，一种较为冗长但功能全面，另一种简洁高效且无错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ASP.NET TreeView级联选择问题

关于ASP.NET TreeView控件级联选择问题，网上有不少的解决办法。个人觉得给TreeView注册onclick事件是最好的办法。下面是用于级联选择的一个JavaScript方法，将此方法注册到TreeView的onclick即可实现级联选择：

function CheckSubNodes()

{

var obj = window.event.srcElement;

var TreeNodeFound = false;

var CheckedState;

if(obj.tagName=="INPUT"&&obj.type=="checkbox")

{

var TreeNode = obj;

CheckedState = obj.checked;

{

obj = obj.parentNode;

}

while(obj.tagName!="TABLE")

var parentTreeLevel = obj.rows[0].cells.length;

var parentTreeNode = obj.rows[0].cells[0];

var tables = obj.parentElement.getElementsByTagName("TABLE");

var numTables = tables.length;

if(numTables>=1)

{

for(var i=0;i<=numTables;i++)

{

if(tables[i]==obj)

{

TreeNodeFound = true;

i++;

if(i==numTables)

{

return;

}

if(TreeNodeFound==true)

{

var childTreeLevel = tables[i].rows[0].cells.length;

if (childTreeLevel > parentTreeLevel)

{

var cell = tables[i].rows[0].cells[childTreeLevel - 1];

var inputs = cell.getElementsByTagName("INPUT");

inputs[0].checked = CheckedState;

}

else

{

return;

}

说实话，这段JavaScript代码是比较冗长的，我建了一个页面，里面包含一个TreeView,用于测试此方法：

<title>TreeView级联选择</title>

function CheckSubNodes()

{

var obj = window.event.srcElement;

var TreeNodeFound = false;

var CheckedState;

if(obj.tagName=="INPUT"&&obj.type=="checkbox")

{

var TreeNode = obj;

CheckedState = obj.checked;

{

obj = obj.parentNode;

}

while(obj.tagName!="TABLE")

var parentTreeLevel = obj.rows[0].cells.length;

var parentTreeNode = obj.rows[0].cells[0];

var tables = obj.parentElement.getElementsByTagName("TABLE");

var numTables = tables.length;

if(numTables>=1)

{

for(var i=0;i<=numTables;i++)

{

if(tables[i]==obj)

{

TreeNodeFound = true;

i++;

if(i==numTables)

{

return;

}

if(TreeNodeFound==true)

{

var childTreeLevel = tables[i].rows[0].cells.length;

if (childTreeLevel > parentTreeLevel)

{

var cell = tables[i].rows[0].cells[childTreeLevel - 1];

var inputs = cell.getElementsByTagName("INPUT");

inputs[0].checked = CheckedState;

}

else

{

return;

}

</script>

</head>

<body>

<div>

<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ShowLines="True" onclick="CheckSubNodes()">

<Nodes>

<asp:TreeNode Text="新建节点1" Value="新建节点1">

<asp:TreeNode Text="新建节点1.1" Value="新建节点1.1">

<asp:TreeNode Text="新建节点1.1.1" Value="新建节点1.1.1"></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Text="新建节点2" Value="新建节点2">

<asp:TreeNode Text="新建节点2.1" Value="新建节点2.1"></asp:TreeNode>

<asp:TreeNode Text="新建节点2.2" Value="新建节点2.2"></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Text="新建节点3" Value="新建节点3">

<asp:TreeNode Text="新建节点3.1" Value="新建节点3.1"></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Text="新建节点4" Value="新建节点4"></asp:TreeNode>

</Nodes>

</asp:TreeView>

</div>

</form>

</body>

</html>

测试时，点击“新建节点1.1”会出错（但此方法还是实现了功能，尽管出错了），在开启IE调试功能时会弹出错误提示，若没有开启IE调试状态栏也会出现错误提示。下面是我的一个方法：

function CheckSubNodes()

{

var obj = window.event.srcElement; //获取事件对象的来源

var CheckState; //定义一个变量，用于存储选中状态(true or false)，以便于在子节点级联

if(obj.tagName=="INPUT"&&obj.type=="checkbox") //如果事件的来源是checkbox

{

CheckState = obj.checked; //获得该checkbox的选中状态

{

obj = obj.parentNode;

}

while(obj.tagName!="TABLE")

//获得包含该checkbox的table，由于每个节点都在一个table中，因此相当于获取到节点

obj = obj.nextSibling; //获得该节点的兄弟节点

if(obj!=null&&obj.tagName=="DIV")

//判断该节点是否为空以及是否为一棵子树，子树包含在DIV中（且在该节点的后一个节点中），

//而节点包含在table中

{

var inputs = obj.getElementsByTagName("INPUT");

//获得该节点子树中的checkbox

for(var i=0;i<inputs.length;i++)

{

inputs[i].checked = CheckState;

//遍历inputs，使子树的所有checkbox状态与该节点一致

}

与上一个方法比起来，这个方法比上一个简练（效率自然也高一些），且没有任何错误（在IE 7下测试）。要测试此方法，请将上述测试页面CheckSubNodes()方法替换为我的方法。