Asp.Net JS 控制TreeView控件

本文介绍了一种在TreeView控件中实现选中状态同步的方法,包括如何在子节点选择后同步更新父节点的状态,以及如何递归地更新所有相关节点的选中状态。

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

TreeView.js
//有时候在子节点选择后,其父级节点也需要被选中,代码如下:  

//set child nodes checkbox status
function TV2_SetChildNodesCheckStatus(node, isChecked) {
var childNodes = TV2i_GetChildNodesDiv(node);
if (childNodes == null)
return;

var inputs = WebForm_GetElementsByTagName(childNodes, "INPUT");
if (inputs == null || inputs.length == 0)
return;

for (var i = 0; i < inputs.length; i++) {
if (IsCheckBox(inputs[i]))
inputs[i].checked = isChecked;
}
}

//change parent node checkbox status after child node changed
function TV2_NodeOnChildNodeCheckedChanged(tree, node, isChecked) {
if (node == null)
return;

var childNodes = TV2_GetChildNodes(tree, node);

if (childNodes == null || childNodes.length == 0)
return;

var isAllSame = true;

for (var i = 0; i < childNodes.length; i++) {
var item = childNodes[i];
var value = TV2_NodeGetChecked(item);

if (isChecked != value) {
isAllSame = false;
break;
}
}

var parent = TV2_GetParentNode(tree, node);
if (isAllSame) {
TV2_NodeSetChecked(node, isChecked);
//设置样式为白色
var checkbox = TV2i_NodeGetCheckBox(node);
/* if (checkbox != null){
checkbox.style.backgroundColor = "none";
} */

TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);
}
else {
//设置本节点样式
var checkbox = TV2i_NodeGetCheckBox(node);
/* if (checkbox != null) {
checkbox.style.backgroundColor = "black";
}*/

if(isChecked)
{
TV2_NodeSetChecked(node, true); //设置本节点
TV2_NodeOnChildNodeCheckedChanged(tree, parent, true);//递归
}
}
}

//get node relative element(etc. checkbox)
function TV2_GetNode(tree, element) {
var id = element.id.replace(tree.id, "");
id = id.toLowerCase().replace(element.type, "");
id = tree.id + id;

var node = document.getElementById(id);
if (node == null) //leaf node, no "A" node
return element;
return node;
}

//get parent node
function TV2_GetParentNode(tree, node) {
var div = WebForm_GetParentByTagName(node, "DIV");

//The structure of node: <table>information of node</table><div>child nodes</div>
var table = div.previousSibling;
if (table == null)
return null;

return TV2i_GetNodeInElement(tree, table);
}

//get child nodes array
function TV2_GetChildNodes(tree, node) {
if (TV2_NodeIsLeaf(node))
return null;

var children = new Array();
var div = TV2i_GetChildNodesDiv(node);
var index = 0;

for (var i = 0; i < div.childNodes.length; i++) {
var element = div.childNodes[i];
if (element.tagName != "TABLE")
continue;

var child = TV2i_GetNodeInElement(tree, element);
if (child != null)
children[index++] = child;
}
return children;
}

function TV2_NodeIsLeaf(node) {
return !(node.tagName == "A"); //Todo
}

function TV2_NodeGetChecked(node) {
var checkbox = TV2i_NodeGetCheckBox(node);
return checkbox.checked;
}

function TV2_NodeSetChecked(node, isChecked) {
var checkbox = TV2i_NodeGetCheckBox(node);
if (checkbox != null)
checkbox.checked = isChecked;
}

function IsCheckBox(element) {
if (element == null)
return false;
return (element.tagName == "INPUT" && element.type.toLowerCase() == "checkbox");
}

//get tree
function TV2_GetTreeById(id) {
return document.getElementById(id);
}

//////////////////////////////////////////////////////////////////////////////////////////////
//private mothods, with TV2i_ prefix
//////////////////////////////////////////////////////////////////////////////////////////////

//get div contains child nodes
function TV2i_GetChildNodesDiv(node) {
if (TV2_NodeIsLeaf(node))
return null;

var childNodsDivId = node.id + "Nodes";
return document.getElementById(childNodsDivId);
}

//find node in element
function TV2i_GetNodeInElement(tree, element) {
var node = TV2i_GetNodeInElementA(tree, element);
if (node == null) {
node = TV2i_GetNodeInElementInput(tree, element);
}
return node;
}

//find "A" node
function TV2i_GetNodeInElementA(tree, element) {
var as = WebForm_GetElementsByTagName(element, "A");
if (as == null || as.length == 0)
return null;

var regexp = new RegExp("^" + tree.id + "n\\d+$");

for (var i = 0; i < as.length; i++) {
if (as[i].id.match(regexp)) {
return as[i];
}
}
return null;
}

//find "INPUT" node
function TV2i_GetNodeInElementInput(tree, element) {
var as = WebForm_GetElementsByTagName(element, "INPUT");
if (as == null || as.length == 0)
return null;

var regexp = new RegExp("^" + tree.id + "n\\d+");

for (var i = 0; i < as.length; i++) {
if (as[i].id.match(regexp)) {
return as[i];
}
}
return null;
}

//get checkbox of node
function TV2i_NodeGetCheckBox(node) {
if (IsCheckBox(node))
return node;

var id = node.id + "CheckBox";
return document.getElementById(id);
}


页面代码:
//选择树事件
function OnTreeNodeChecked() {
var element = element = window.event.srcElement;//获取事件源的DOM对象
if (!IsCheckBox(element))
return;
var isChecked = element.checked;
var tree = TV2_GetTreeById("mid_left_tree");//获取树对象
var node = TV2_GetNode(tree, element);//获取事件源对象所在的节点
TV2_SetChildNodesCheckStatus(node, isChecked); //设置所有的子节点的选中状态,函数内部递归
var parent = TV2_GetParentNode(tree, node);//获取事件源节点的父节点
TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);//设置所有父节点的选中状态,函数内部递归
}


给TreeView控件加上事件:
this.tree.Attributes.Add("onclick", "OnTreeNodeChecked(this)");
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值