GridView中实现树形结构分组的功能

GridView中实现树形结构的实现方法简单，使用javascript实现。先看一下截图：

节点展开情况

节点合并情况：

下面说下实现方法：

aspx页面：

<body>
    <form id="form1" runat="server">
    <div id="main">
        <fieldset>
            <legend>GridView中树形结构实现</legend>
            <asp:GridView ID="gvList" runat="server" AutoGenerateColumns="false" CssClass="grid"
                DataKeyNames="ID,PID,Level,HasChild" TreeColumnIndex="0" OnRowDataBound="gvList_RowDataBound">
                <Columns>
                    <asp:BoundField HeaderText="名称" DataField="Name" HeaderStyle-BackColor="#23f90d" HeaderStyle-Width="150"></asp:BoundField>
                    <asp:BoundField HeaderText="编号" DataField="ID"  HeaderStyle-BackColor="#23f90d">
                        <ItemStyle HorizontalAlign="Center" Width="80"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField HeaderText="编码" DataField="Code"  HeaderStyle-BackColor="#23f90d">
                        <ItemStyle HorizontalAlign="Center" Width="80"></ItemStyle>
                    </asp:BoundField>
                </Columns>
                <EmptyDataTemplate>
                    <div class="tip">
                        暂无记录！<input type="button" onclick="add()" class="btnGrid" value="新增功能点" /></div>
                </EmptyDataTemplate>
            </asp:GridView>
        </fieldset><asp:HiddenField runat="server" ID="hfAimID"></asp:HiddenField>
    </div>
    </form>

    <script type="text/javascript">
        //树节点相关控制
        
    </script>

主要是脚本中的实现。

后台代码中主要是行呈现处理的实现，代码如下：

View Code

if (e.Row.RowType == DataControlRowType.DataRow)
            {
                # region 生成树形结构
                string id = gvList.DataKeys[e.Row.RowIndex]["ID"].ToString();
                string pid = gvList.DataKeys[e.Row.RowIndex]["PID"].ToString();
                string level = gvList.DataKeys[e.Row.RowIndex]["Level"].ToString();
                //增加节点的属性
                e.Row.Attributes.Add("id", id);
                e.Row.Attributes.Add("pid", pid);
                e.Row.Attributes.Add("level", level);
                e.Row.Attributes.Add("expand", "1");
                int indent = (int.Parse(level) - 1) * 20;
                //判断是否有子节点
                if (gvList.DataKeys[e.Row.RowIndex]["HasChild"].ToString() == "1")
                {
                    //设置父节点前面的图片和点击事件
                    HtmlImage img = new HtmlImage();
                    img.Src= TreeImagePath + "minimize.gif";
                    img.Attributes.Add("onclick", "setExpand(this)");
                    img.Style.Add("cursor", "pointer");
                    e.Row.Cells[0].Controls.Add(img);
                    e.Row.Cells[0].Style["font-weight"] = "bold";
                }
                else
                {
                    indent += 16;
                }
                e.Row.Cells[0].Style["padding-left"] = indent + "px";
                e.Row.Cells[0].Controls.Add(new LiteralControl(e.Row.Cells[0].Text));
                # endregion
                e.Row.Attributes["onmouseover"] = "style.backgroundColor='#F2FDDB'";
                e.Row.Attributes["onmouseout"] = "style.backgroundColor=''";
            }

源代码下载： GridViewTreeView.rar

posted @ 2012-05-11 10:51 ☆会飞的鱼☆ 阅读(7514) 评论(4) 编辑收藏举报

刷新页面返回顶部

GridView中实现树形结构分组的功能

公告