GridView中實現樹形結構分組的功能

本文轉載自查看原文 2012-05-11 10:51 6511 C#/ GridView 樹形結構/ ASP.NET

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 實現CheckBox的三種選中狀態（全選、半選、不選）在GridView中模擬樹形的功能 java 實現樹形結構 java、js中實現無限層級的樹形結構（類似遞歸） java list實現樹形結構 Bootstrap treegrid 實現樹形表格結構 Qt QTreeWidget 樹形結構實現(轉) 部門樹形結構算法 — Java遞歸實現修改eclipse中包的顯示結構為樹形 Element-ui中tree樹形控件全選與取消全選的功能實現樹形結構