GridView树状结构显示
Posted zhuqun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了GridView树状结构显示相关的知识，希望对你有一定的参考价值。
下面的树形结构代码需要GridVIew中的数据要求是按照上下级关系已经排列好的顺序，比如：
GridView
ID ParentID Name 1 0 父1 2 1 父1子1 3 1 父1子2 4 3 父1子2孙1 5 3 父1子2孙2 6 0 父2 7 6 父2子protected void gvList_RowDataBound(object sender, GridViewRowEventArgs e)
if(e.Row.RowType==DataControlRowType.DataRow)
#region 数据绑定
DataRowView rowView = (DataRowView) e.Row.DataItem;
Label lblParentName=e.Row.FindControl("lblParentName") as Label;
lblParentName.Text = GetParentName(Convert.ToInt32(rowView["ParentID"]));
Button btnDel = e.Row.FindControl("btnDel") as Button;
btnDel.Visible = (Convert.ToInt32(rowView["ParentID"]) != 0);
#endregion
#region 树形结构
string id = rowView["ID"].ToString();
string pid = rowView["ParentID"].ToString();
string level = "1";
e.Row.Attributes.Add("id",id);
e.Row.Attributes.Add("pid",pid);
e.Row.Attributes.Add("expand","1");
if (rowView["ParentID"].ToString() == "0")
var img = new htmlImage Src = "../../Image/Tree/minimize.gif";
img.Attributes.Add("onclick","setExpand(this)");
img.Style.Add("cursor","pointer");
e.Row.Cells[1].Controls.Add(img);
else
e.Row.Cells[1].Style["padding-left"] = "20px";
level = "2";
e.Row.Attributes.Add("level",level);
#endregion
以下是前台js控制节点电机事件中的显示和隐藏效果(判断代码“nextNode.nodeType==1”部分是因为不同浏览器可能会产生多余的空白换行而使nextNode不为空,但是nodeType为其他值)
<script type="text/javascript">
//树节点相关控制
function hideChildren(node)
var level = parseInt(node.getAttribute("level"));
var nextNode = node.nextSibling;
while (nextNode != null && nextNode.nodeType==1&& parseInt(nextNode.getAttribute("level")) > level)
nextNode.style.display = "none"; nextNode = nextNode.nextSibling;
function showChildren(node)
var level = parseInt(node.getAttribute("level"));
var id = node.getAttribute("id");
var nextNode = node.nextSibling;
while (nextNode != null && nextNode.nodeType==1&& parseInt(nextNode.getAttribute("level")) > level)
if (nextNode.getAttribute("pid") == id)
if (node.getAttribute("expand") == "1")
nextNode.style.display = "";
showChildren(nextNode);
else
nextNode.style.display = "none";
nextNode = nextNode.nextSibling;
function setExpand(sender)
var curNode = sender.parentNode.parentNode;
if (curNode.getAttribute("expand") == "1")
curNode.setAttribute("expand", "0");
sender.src = "../../Image/Tree/maximize.gif";
hideChildren(curNode);
else
curNode.setAttribute("expand", "1");
sender.src = "../../Image/Tree/minimize.gif";
showChildren(curNode);
</script>
<asp:gridview id="gvList" onrowcommand="gvList_RowCommand" onrowdatabound="gvList_RowDataBound" emptydatatext="暂无记录！" datakeynames="ID" cssclass="grid" autogeneratecolumns="false" runat="server">
<columns>
<asp:boundfield itemstyle-horizontalalign="Center" visible="false" datafield="ID" itemstyle-width="20" headertext="ID">
<asp:boundfield itemstyle-horizontalalign="left" datafield="DeptNo" itemstyle-width="200px" headertext="编号">
<asp:boundfield itemstyle-horizontalalign="Center" datafield="DeptName" itemstyle-width="200px" headertext="名称">
<asp:templatefield headertext="上级" headerstyle-width="200px">
<itemstyle wrap="false" horizontalalign="Center" width="100px">
<itemtemplate>
<asp:label id="lblParentName" runat="server"></asp:label>
</itemtemplate>
</itemstyle></asp:templatefield>
<asp:templatefield headertext="操作" headerstyle-width="200px">
<itemstyle horizontalalign="center" width="200px">
<itemtemplate>
<table><tbody><tr><td style="width: 50px;"> <input class="btnGrid" title="修改信息" value="编 辑" type="button" />
</td><td style="width: 50px;"><asp:button id="btnDel" cssclass="btnGrid" runat="server" commandargument="<%#Eval(‘ID‘) %>" tooltip="删除信息" commandname="Delet" onclientclick="return confirm(‘确定删除选中记录吗？‘)" text="删 除">
</asp:button></td></tr></tbody></table>
</itemtemplate>
</itemstyle></asp:templatefield>
</asp:boundfield></asp:boundfield></asp:boundfield></columns>
</asp:gridview>
以上是关于GridView树状结构显示的主要内容，如果未能解决你的问题，请参考以下文章