TB.TreeGrid

分享于 

7分钟阅读

Web开发

  繁體

介绍

TB.TreeGrid 是一个 ASP.NET Webcontrol,用于在网格视图中显示分层数据。

通常,我们使用 GridView 控件来显示层次数据,但它只有一列。 它不适用于物料清单或者计划计划等。

控件结合了 GridViewTreeView的优点,可以在多个列中显示分层数据。 它支持 databindpostbackcallback。微软 Ajax。Event ( 编辑,选择,展开,填充,折叠,删除,取消,取消等)。

请到这里去下载最新的源代码和演示。

TreeGrid.png

使用代码

它与 TreeViewGridView 有相似的语法。

首先,添加 TB.Web.UI.TreeGrid.dll 作为参考,可以在目录中找到它。

其次,创建一个 *.aspx 文件,将控件添加到页面。

<tbwc:treegridID="TreeGrid"runat="server"ShowHeader="true"ShowFooter="false"Caption="This is TreeGird's Caption"ExpandDepth="1"PopulateNodesFromClient="false"CaptionAlign="Left"NodeWrap="false"LineImagesFolder="~/TreeViewLines"ShowLines="true"CssClass="tgDefault"ImageSet="XPFileExplorer"NodeCellPosition="1"OnSelectedNodeChanged="TreeGrid_SelectedNodeChanged"OnNodePopulate="TreeGrid_NodePopulate"OnRowCommand="TreeGrid_RowCommand"onNodeDataBound="TreeGrid_NodeDataBound"><HeaderStyleBackColor="Gainsboro"/><NodeStyleDisplay="Inline"/><Columns><asp:TemplateFieldHeaderText="FirstColumn"><itemtemplate><%# Eval("C1") %></itemtemplate><ItemStyleWidth="100px"/></asp:TemplateField><asp:TemplateFieldHeaderText="??99?"><itemtemplate><%# Eval("C2") %></itemtemplate><ItemStyleWidth="200px"/></asp:TemplateField><asp:TemplateFieldHeaderText="??99?"><itemtemplate><%# Eval("C3") %></itemtemplate><ItemStyleWidth="100px"/></asp:TemplateField><asp:TemplateFieldHeaderText="??99?"><itemtemplate><asp:LiteralID="LtrForth"Text='<%# Eval("C4") %>'runat="server"></asp:Literal></itemtemplate><ItemStyleWidth="100px"/></asp:TemplateField><asp:TemplateFieldHeaderText="??99?"><itemtemplate><%# Eval("C5") %></itemtemplate><ItemStyleWidth="60px"/></asp:TemplateField><asp:TemplateFieldHeaderText="??99?"><itemtemplate><%# Eval("C6") %></itemtemplate><edititemtemplate><asp:TextBoxID="TxtSixth"Text='<%# Eval("C6") %>'runat="server"Width="60px"Height="12px"></asp:TextBox></edititemtemplate><ItemStyleWidth="100px"/></asp:TemplateField><asp:TemplateFieldHeaderText="??99?"><itemstylecssclass="listOp"/><itemtemplate><asp:ImageButtonID="LbtnEdit"runat="server"CommandName="Edit"ToolTip="??99"ImageUrl="img/opEdit.gif"></asp:ImageButton><asp:LinkButtonID="LbtnUpdate"runat="server"CommandName="Update"Text="Update"></asp:LinkButton><asp:LinkButtonID="LbtnCancle"runat="server"CommandName="Cancel"Text="Cancel"></asp:LinkButton><asp:ImageButtonID="LbtnDel"runat="server"CommandName="Remove"ToolTip="??99"ImageUrl="img/opDel.gif"></asp:ImageButton></itemtemplate></asp:TemplateField></Columns></tbwc:treegrid>

第三,打开 *.cs 文件,编写databind代码和事件处理程序。

protectedvoid Page_Load(object sender, EventArgs e)
{
 if (!Page.IsPostBack)
 {
 Builder.InitTreeGridManual(this.TreeGrid);
 }
}protectedvoid TreeGrid_SelectedNodeChanged
 (object sender, TB.Web.UI.WebControls.TreeGridNodeEventArgs e)
{
}protectedvoid TreeGrid_RowCommand
 (object sender, TB.Web.UI.WebControls.TreeGridRowCommandEventArgs e)
{
 this.LblHint.Text = "??99??99?[Event Name:" + e.CommandName+ "]" + 
 DateTime.Now.ToString();
 if (e.CommandName == "Edit")
 {
 // previous EditingNode TreeGridNode oNode = this.TreeGrid.EditingNode; 
 // set current EditingNode e.Row.Owner.Edit(); 
 // cancel previous EditingNodeif (oNode!= null) 
 {
 oNode.DataItem = Builder.GetNodeData(oNode.Value);
 oNode.RaiseNodeDataBind(false);
 }
 // bind data e.Row.Owner.DataItem = Builder.GetNodeData(e.Row.Owner.Value); 
 e.Row.Owner.RaiseNodeDataBind(false);
 }
 if (e.CommandName == "Update")
 {
 e.Row.Owner.Editing = false;
 string newValue = ((TextBox)e.Row.FindControl("TxtSixth")).Text;
 // save.. ... e.Row.Owner.DataItem = Builder.GetNodeData(e.Row.Owner.Value);
 ((Foo)e.Row.Owner.DataItem).C6 = newValue; // for demo e.Row.Owner.RaiseNodeDataBind(false);
 }
 if (e.CommandName == "Cancel")
 {
 e.Row.Owner.Editing = false;
 e.Row.Owner.DataItem = Builder.GetNodeData(e.Row.Owner.Value);
 e.Row.Owner.RaiseNodeDataBind(false);
 }
 if (e.CommandName == "Remove")
 {
 if (e.Row.Owner.Parent!= null)
 {
 e.Row.Owner.Parent.ChildNodes.Remove(e.Row.Owner);
 }
 else {
 this.TreeGrid.Nodes.Remove(e.Row.Owner);
 }
 }
}protectedvoid TreeGrid_NodePopulate
 (object sender, TB.Web.UI.WebControls.TreeGridNodeEventArgs e)
{
 TreeGridNode node = new TreeGridNode("new1");
 node.DataItem = Builder.GetNodeData("-1");
 e.Node.ChildNodes.Add(node);
 node.PopulateOnDemand = true;
 node.RaiseNodeDataBind(false);
 node = new TreeGridNode("new2");
 node.DataItem = Builder.GetNodeData("-1");
 e.Node.ChildNodes.Add(node);
 node.PopulateOnDemand = true;
 node.RaiseNodeDataBind(false);
}protectedvoid TreeGrid_NodeDataBound(object sender, TreeGridRowEventArgs e)
{
 if (e.Row.RowType == DataControlRowType.DataRow)
 {
 if (e.Row.RowState == DataControlRowState.Edit)
 {
 ((LinkButton)e.Row.FindControl("LbtnUpdate")).Visible = true;
 ((LinkButton)e.Row.FindControl("LbtnCancle")).Visible = true;
 }
 if (e.Row.RowState == DataControlRowState.Normal)
 {
 ((LinkButton)e.Row.FindControl("LbtnUpdate")).Visible = false;
 ((LinkButton)e.Row.FindControl("LbtnCancle")).Visible = false;
 }
 }
} 

上面是一个简单的介绍,我将很快更新它。

你可以下载 demo.zip 并运行它。 项目是 Visual Studio 2008项目。

历史记录

  • 29th 2008年09月: 初始帖子

  Treegrid