我想知道当单击父节点时如何展开和折叠Treeview,使用JavaScript展开父内部的所有节点,反之亦然。
根据下面的屏幕截图,当用户单击HeadNode1时,其所有Child和GrandChild节点都将展开,反之亦然。
我的树状视图
<asp:TreeView ID="TreeView1" onclick="OnTreeClick(this)" ShowCheckBoxes="All" ShowLines="true" runat="server"></asp:TreeView>
<asp:Button ID="Button1" runat="server" OnClick="Save_Click" Text="Save" />
CS代码
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TreeNode tNode1 = new TreeNode();
tNode1.Text = "HeadNode1";
tNode1.Value = "HeadNode1";
TreeNode h1ChildNode1 = new TreeNode();
h1ChildNode1.Text = "Head1Child1";
tNode1.ChildNodes.Add(h1ChildNode1);
TreeNode h1GrandChild1 = new TreeNode();
h1GrandChild1.Text = "Head1Child1Grand1";
h1ChildNode1.ChildNodes.Add(h1GrandChild1);
TreeNode h1ChildNode2 = new TreeNode();
h1ChildNode2.Text = "Head1Child2";
tNode1.ChildNodes.Add(h1ChildNode2);
TreeNode h1ChildNode3 = new TreeNode();
h1ChildNode3.Text = "Head1Child3";
tNode1.ChildNodes.Add(h1ChildNode3);
TreeView1.Nodes.Add(tNode1);
ServerSideChangeSelection(TreeView1, true);
List<TreeNode> nodes = new List<TreeNode>();
foreach (TreeNode node in TreeView1.Nodes)
{
nodes.Add(node);
if (node.ChildNodes.Count > 0)
{
foreach (TreeNode childNode in node.ChildNodes)
{
nodes.Add(childNode);
}
}
}
Nodes = nodes;
}
}
我希望单击我的父节点,并查看该节点中是否有子节点而得到扩展。
当单击parent时,JavaScript单击所有子节点。它确实单击了所有复选框,当您取消选中时,我也需要同时扩展它,反之亦然。
<script type="text/javascript">
function OnTreeClick(evt) {
var src = window.event != window.undefined ? window.event.srcElement : evt.target;
var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
if (isChkBoxClick) {
var parentTable = GetParentByTagName("table", src);
var nxtSibling = parentTable.nextSibling;
//check if nxt sibling is not null & is an element node
if (nxtSibling && nxtSibling.nodeType == 1) {
//if node has children
if (nxtSibling.tagName.toLowerCase() == "div") {
//check or uncheck children at all levels
CheckUncheckChildren(parentTable.nextSibling, src.checked);
}
}
//check or uncheck parents at all levels
CheckUncheckParents(src, src.checked);
}
}
function CheckUncheckChildren(childContainer, check) {
var childChkBoxes = childContainer.getElementsByTagName("input");
var childChkBoxCount = childChkBoxes.length;
for (var i = 0; i < childChkBoxCount; i++) {
childChkBoxes[i].checked = check;
}
}
function CheckUncheckParents(srcChild, check) {
var parentDiv = GetParentByTagName("div", srcChild);
var parentNodeTable = parentDiv.previousSibling;
if (parentNodeTable) {
var checkUncheckSwitch;
//checkbox checked
if (check) {
var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
if (isAllSiblingsChecked)
checkUncheckSwitch = true;
else
return; //do not need to check parent if any(one or more) child not checked
}
else //checkbox unchecked
{
checkUncheckSwitch = false;
}
var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
if (inpElemsInParentTable.length > 0) {
var parentNodeChkBox = inpElemsInParentTable[0];
parentNodeChkBox.checked = checkUncheckSwitch;
//do the same recursively
CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}
function AreAllSiblingsChecked(chkBox) {
var parentDiv = GetParentByTagName("div", chkBox);
var childCount = parentDiv.childNodes.length;
for (var i = 0; i < childCount; i++) {
if (parentDiv.childNodes[i].nodeType == 1) {
//check if the child node is an element node
if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
//if any of sibling nodes are not checked, return false
if (!prevChkBox.checked) {
return false;
}
}
}
}
return true;
}
//utility function to get the container of an element by tagname
function GetParentByTagName(parentTagName, childElementObj) {
var parent = childElementObj.parentNode;
while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
parent = parent.parentNode;
}
return parent;
}
</script>
谢谢您的时间。