treeview 展开选中节点,收缩同级节点(可以改变展开和收缩的图标)
2011-05-26 16:38
453 查看
项目中的要求:在treev只能打开一个节点,同级节点要收缩。
通过重写TreeView_ToggleNode,可以实现要求。代码如下:
<script type="text/javascript">
var base_TreeView_ToggleNode = TreeView_ToggleNode;
TreeView_ToggleNode = function (data, index, node, lineType, children) {
CollapseBrothers(data, node, lineType, children);
base_TreeView_ToggleNode(data, index, node, lineType, children);
}
function CollapseBrothers(data, node, lineType, childContainer) {
var parent = childContainer.parentNode;
for (i = 0; i < parent.childNodes.length; i++) {
if (parent.childNodes[i].nodeName.toLowerCase() == "div") {
if (parent.childNodes[i].id != childContainer.id) {
parent.childNodes[i].style.display = "none";
}
} //end if div
else if (parent.childNodes[i].nodeName.toLowerCase() == "table") {
var treeLinks = parent.childNodes[i].getElementsByTagName("a");
if (treeLinks.length > 2 || treeLinks.length == 2) {
var j = 0;
if (treeLinks[j].firstChild.nodeName) {
if (treeLinks[j].firstChild.nodeName.toLowerCase() == "img") {
var img = treeLinks[j].firstChild;
//id相等,则不需处理
if (img.parentNode.id == node.id) {
}
else if (img.parentNode.id != node.id) {
// var imgLineType
var divHide = document.getElementById(img.parentNode.id); //获取当前点击的IMG的<td>
// divHide.style.display = "none";
if ((typeof (img) != "undefined") && (img != null)) {
if (lineType == "l") {
img.src = data.images[14];
}
else if (lineType == "t") {
img.src = data.images[11];
}
else if (lineType == "-") {
img.src = data.images[17];
}
else {
img.src = data.images[4];
}
img.alt = data.expandToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));
}
} //end if (img.parentNode.id != node.id)
} //end if(treeLinks[j].firstChild.nodeName.toLowerCase() == "img")
} //end if (treeLinks[j].firstChild.nodeName)
} //end if (treeLinks.length >2 || treeLinks.length==2)
} // end if (parent.childNodes[i].nodeName.toLowerCase() == "table")
} // end for
} //end function
</script>
通过重写TreeView_ToggleNode,可以实现要求。代码如下:
<script type="text/javascript">
var base_TreeView_ToggleNode = TreeView_ToggleNode;
TreeView_ToggleNode = function (data, index, node, lineType, children) {
CollapseBrothers(data, node, lineType, children);
base_TreeView_ToggleNode(data, index, node, lineType, children);
}
function CollapseBrothers(data, node, lineType, childContainer) {
var parent = childContainer.parentNode;
for (i = 0; i < parent.childNodes.length; i++) {
if (parent.childNodes[i].nodeName.toLowerCase() == "div") {
if (parent.childNodes[i].id != childContainer.id) {
parent.childNodes[i].style.display = "none";
}
} //end if div
else if (parent.childNodes[i].nodeName.toLowerCase() == "table") {
var treeLinks = parent.childNodes[i].getElementsByTagName("a");
if (treeLinks.length > 2 || treeLinks.length == 2) {
var j = 0;
if (treeLinks[j].firstChild.nodeName) {
if (treeLinks[j].firstChild.nodeName.toLowerCase() == "img") {
var img = treeLinks[j].firstChild;
//id相等,则不需处理
if (img.parentNode.id == node.id) {
}
else if (img.parentNode.id != node.id) {
// var imgLineType
var divHide = document.getElementById(img.parentNode.id); //获取当前点击的IMG的<td>
// divHide.style.display = "none";
if ((typeof (img) != "undefined") && (img != null)) {
if (lineType == "l") {
img.src = data.images[14];
}
else if (lineType == "t") {
img.src = data.images[11];
}
else if (lineType == "-") {
img.src = data.images[17];
}
else {
img.src = data.images[4];
}
img.alt = data.expandToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));
}
} //end if (img.parentNode.id != node.id)
} //end if(treeLinks[j].firstChild.nodeName.toLowerCase() == "img")
} //end if (treeLinks[j].firstChild.nodeName)
} //end if (treeLinks.length >2 || treeLinks.length==2)
} // end if (parent.childNodes[i].nodeName.toLowerCase() == "table")
} // end for
} //end function
</script>
相关文章推荐
- 如何改变treeview控件选中节点的高亮颜色,就是大家都熟悉的深蓝色,同样可以改变失去焦点时,高亮显示的颜色
- c# 中treeview 树节点图标的动态加载,及选中时图标改变
- c# 中treeview 树节点图标的动态加载,及选中时图标改变
- c# 中treeview 树节点图标的动态加载,及选中时图标改变
- c# 中treeview 树节点图标的动态加载,及选中时图标改变
- C#控件TreeView在选中后图标改变的解决办法
- 用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点)
- 实现当TreeView中父节点的CheckBox的点选状态改变时,回发服务器端,并且选中父节点,所有子节点全选中
- Flex的Tree全部展开收缩,ji展开选中单个节点
- C# WinForm TreeView改变选中节点颜色,失去焦点时选中节点仍突显。
- treeview 如何改变选中节点的背景。
- jQuery插件treeview点击节点名称不展开、收缩节点
- 设置JavaFX-CSS改变TreeView节点图标
- C# WinForm TreeView改变选中节点颜色,失去焦点选中节点仍突显
- TreeView中选中+号的文字后折叠或展开子节点
- C# WinForm TreeView改变选中节点颜色,失去焦点时选中节点仍突显。
- 设置JavaFX-CSS改变TreeView节点图标
- C# WinForm TreeView改变选中节点颜色,失去焦点时选中节点仍突显。
- Flex的Tree全部展开收缩,ji展开选中单个节点
- 如何在C#的TreeView控件中双击节点而不改变节点的展开/折叠状态