存儲過程實現無限級分類（三）

無限級分類最終篇：顯示與前端呈現

讀取分類的單一 Select 預存程序

CREATE PROCEDURE sp_Column_List
AS
SELECT Column_ID, Column_Name, Parent_ID, Column_Path, Column_Depth,
       Column_Order, Column_Intro
FROM Tb_Column
ORDER BY Column_Order
GO

DataGrid 前端繫結與樣板欄位

<asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False" Width="520px" DataKeyField="Column_Id">
  <Columns>
    <asp:TemplateColumn HeaderText="分類信息">
      <ItemTemplate>
        <asp:Label id="lbname" runat="server"></asp:Label>
      </ItemTemplate>
      <EditItemTemplate>
        <asp:TextBox id="tbdgname" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Column_Name")%>'></asp:TextBox>
      </EditItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="添加子節點">
      <ItemTemplate>
        <a href="#" onclick="Open('AddSonCate.aspx?fid=<%#DataBinder.Eval(Container.DataItem,"Column_Id")%>','son',280,80)">添加子分類</a>
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="編輯">
      <ItemTemplate>
        <asp:LinkButton runat="server" Text="編輯" CommandName="Edit" CausesValidation="false"></asp:LinkButton>
      </ItemTemplate>
      <EditItemTemplate>
        <asp:LinkButton runat="server" Text="更新" CommandName="Update" CausesValidation="False"></asp:LinkButton>&nbsp;
        <asp:LinkButton runat="server" Text="取消" CommandName="Cancel" CausesValidation="false"></asp:LinkButton>
      </EditItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="刪除">
      <ItemTemplate>
        <asp:LinkButton runat="server" ID="lbdelete" Text="刪除" CommandName="Delete" CausesValidation="false" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"Column_Id")%>'></asp:LinkButton>
      </ItemTemplate>
    </asp:TemplateColumn>
  </Columns>
</asp:DataGrid>

關鍵：ItemDataBound 事件處理層級縮排與刪除確認

private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        string columnName = (string)DataBinder.Eval(e.Item.DataItem, "Column_Name");
        int columnDepth = Int32.Parse(DataBinder.Eval(e.Item.DataItem, "Column_Depth").ToString());
        string columnTemp = "";

        if (columnDepth > 1)
        {
            for (int i = 1; i < columnDepth; i++)
                columnTemp += "&nbsp;&nbsp;&nbsp;&nbsp;";
            columnTemp += "┝";
        }

        Label lbname = (Label)e.Item.FindControl("lbname");
        lbname.Text = columnTemp + columnName;

        LinkButton lbdelete = (LinkButton)e.Item.FindControl("lbdelete");
        lbdelete.Attributes.Add("OnClick", "JavaScript:return confirm('確實要刪掉此分類嗎？');");
    }
}

利用 Column_Path、Column_Depth、Column_Order 三欄位，單一 SELECT 即可完整呈現無限階層，前端僅需簡單迴圈產生縮排符號，極具效能與簡潔度。