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

最新推荐文章于 2016-07-15 09:14:00 发布

weixin_30414635

最新推荐文章于 2016-07-15 09:14:00 发布

阅读量164

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chhuic/archive/2012/05/11/2495577.html

版权

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 " οnclick= " 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

转载于:https://www.cnblogs.com/chhuic/archive/2012/05/11/2495577.html

weixin_30414635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GridView中实现树形结构分组的功能

GridView中实现树形结构的实现方法简单，使用javascript实现。先看一下截图：节点展开情况节点合并情况：下面说下实现方法：aspx页面：<body><formid="form1"runat="server"><divid="main"><fields...
复制链接

扫一扫