js 스크립트를 사용하여 asp.net_javascript 기술에서 treeview의 NodeCheck 구현 코드를 제어합니다.

CheckBox 연결 추가를 위한 선택 옵션:
1. TreeView에서 임의의 노드를 단일 선택합니다.
2. 노드의 CheckBox 속성 값이 변경되면: 하위 노드의 CheckBox 속성 값이 해당 변경 사항을 따르고 상위 노드도 해당 변경 사항을 따릅니다. 노드는 변경되지 않고 유지됩니다.
상위 노드의 모든 하위 노드의 CheckBox 속성 값이 false이면 false이고, 한 하위 노드의 CheckBox 속성 값이 있으면 true입니다.
3. 노드 값 변경: 하위 노드, 상위 노드의 CheckBox 속성 값은 해당 변경 사항을 따릅니다.
상위 노드의 모든 하위 노드의 CheckBox 속성 값이 false이면 false입니다.
자바스크립트 코드

코드 복사 코드는 다음과 같습니다.

function OnTreeNodeChecked(id, type) {
//获取触发事件的对象
var element = window.event.srcElement;
//如果对象不是checkbox则不处理
if (!IsCheckBox(element))
return;
//获取checked状态
var isChecked = element.checked;
//获取tree对象
var tree = TV2_GetTreeById(id);
//获取element的相对结点(如果是叶结点，则就为element,否则为其结点)
var node = TV2_GetNode(tree, element);
switch (type) {
case "1":
SetNodesUnChecked(tree);
element.checked = true;
break;
case "2":
TV2_SetChildNodesCheckStatus(node, isChecked);
break;
case "3":
TV2_SetChildNodesCheckStatus(node, isChecked);
var parent = TV2_GetParentNode(tree, node);
TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);
}
}
//set all nodes checkbox nochecked
function SetNodesUnChecked(TreeNode) {
var inputs = WebForm_GetElementsByTagName(TreeNode, "INPUT");
if (inputs == null || inputs.length == 0)
return;
for (var i = 0; i < inputs.length; i++) {
if (IsCheckBox(inputs[i]))
inputs[i].checked = false;
}
}
//set child nodes checkbox status
function TV2_SetChildNodesCheckStatus(node, isChecked) {
//返回当前node所在的div层
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);
TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);
}
else {
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: information of node

child nodes

var 테이블 = div.previousSibling;
if (테이블 == null)
return null;
return TV2i_GetNodeInElement(트리, 테이블);
}
//하위 노드 배열 가져오기
function TV2_GetChildNodes(tree, node) {
if (TV2_NodeIsLeaf(node))
return null;
var children = new Array();
var div = TV2i_GetChildNodesDiv(노드);
var 인덱스 = 0;
for (var i = 0; i < div.childNodes.length; i ) {
var element = div.childNodes[i];
if (element.tagName != "TABLE")
계속;
var child = TV2i_GetNodeInElement(트리, 요소);
if (child != null)
children[index ] = child;
}
귀환 어린이;
}
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");
}
//트리 가져오기
function TV2_GetTreeById(id) {
return document.getElementById(id);
}
///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////// /
//TV2i_ 접두어가 있는 개인 모드
////////////////////////////////// ///////////////////////////////////////////////// ////////
//get div에 하위 노드가 포함됨
function TV2i_GetChildNodesDiv(node) {
//如果node.tagName == "A"则不处理
if ( TV2_NodeIsLeaf(노드))
null을 반환합니다.
var childNodsDivId = node.id "노드";
return document.getElementById(childNodsDivId);
}
//요소에서 노드 찾기
function TV2i_GetNodeInElement(tree, element) {
var node = TV2i_GetNodeInElementA(tree, element);
if (노드 == null) {
node = TV2i_GetNodeInElementInput(tree, element);
}
반환 노드;
}
//"A" 노드 찾기
function TV2i_GetNodeInElementA(tree, element) {
var as = WebForm_GetElementsByTagName(element, "A");
if (as == null || as.length == 0)
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];
}
}
null을 반환합니다.
}
//"INPUT" 노드 찾기
function TV2i_GetNodeInElementInput(tree, element) {
var as = WebForm_GetElementsByTagName(element, "INPUT");
if (as == null || as.length == 0)
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];
}
}
null을 반환합니다.
}
//노드 체크박스 가져오기
function TV2i_NodeGetCheckBox(node) {
if (IsCheckBox(node))
return node;
var id = node.id "CheckBox";
return document.getElementById(id);
}

html代码

复代码 代码如下:

ShowLines="True" BorderWidth="0px" Height="430px" Width="250px " Font-Size="소형"
OnClick="OnTreeNodeChecked()">