ASPxTreeList及ASPxGridView使用
ASPxTreeList及ASPxGridView使用
|
一． 数据绑定 ASPxTreeList和他数据绑定一样，可用各种类型的数据源。但因为要显示树形结构， 所以除了DataSourceID必须进行设置以外，还得必须设置KeyFieldName与ParentFieldName(ASPxGridView只需指定KeyFieldName)，KeyFieldName与ParentFieldName就是主、子的关系，用于创建树形结构。
例如： AspxTreeList配置: <dx:ASPxTreeListID="treeList"DataSourceID="objectDataSource" runat="server" KeyFieldName="Id"ParentFieldName="ParentId" > </dx:ASPxTreeList> DataSource配置: <asp:ObjectDataSourceID="objectDataSource"runat="server"DataObjectTypeName="Entity" TypeName="Provider"InsertMethod="Insert"DeleteMethod="Delete" UpdateMethod="Update"SelectMethod="Select"> <UpdateParameters> <asp:ParameterName="Id"/> <asp:ParameterName=" ParentId"/> <asp:ParameterName="Field1"/> <asp:ParameterName="Field2"/> </UpdateParameters> </asp:ObjectDataSource> 后台代码: publicstaticclassProvider { privateconststring key = "EntitiesProvider"; privatestaticHttpSessionState session = HttpContext.Current.Session; #region private methods privatestaticList<Entity> Data { get { if (null == session[key]) Restore();
return session[key] asList<Entity>; } } privatestaticList<Entity> CreateData() { } privatestaticEntity FindItem(Guid id) { return Data.Find(Item => Item.Id.ToString().Equals(id.ToString())); } #endregion #region public methods publicstaticvoid Restore() { session[key] = CreateData(); } publicstaticIEnumerable Select() { return Data; } publicstaticvoid Insert(Entity item) { item.Id = Guid.NewGuid(); Data.Add(item); } publicstaticvoid Update(Entity item) { Entity storedItem = FindItem(item.Id); Data.Remove(storedItem); Data.Add(item); } publicstaticvoid Delete(Entity item) { Entity storedItem = FindItem(item.Id); Data.Remove(storedItem); } #endregion } [Serializable] publicclassEntity { ///<summary> /// ID ///</summary> publicGuid Id { get; set; }
///<summary> ///父节点ID ///</summary> publicGuid ParentId { get; set; }
///<summary> /// Field1 ///</summary> publicstring Field1 { get; set; }
///<summary> /// Field2 ///</summary> publicstring Field2 { get; set; } }
同时可以指定在ASPxTreeList默认展开的级数，代码如下： 二． 数据导出关于ASPxTreeList数据导出，DevExpress同样为我们提供了解决方案，即ASPxTreeListExporter数据导出组件。 ASPxTreeListExproter的用法非常简单，同时提供了多种文件格式的导出方案，xls| xlsx|pdf|rft ASPxGridViewExporter还支持Csv格式导出方案. 使用方法： ASPxTreeListExporter <dx:ASPxTreeListExporter ID="treeListExporter" runat="server" TreeListID="treeList" /> ASPxGridViewExporter <dx:ASPxGridViewExporter ID="gridViewExporter" runat="server" GridViewID="gridView"/>
void WriteRtf(Stream stream); void WriteXlsx(Stream stream); 每个方法都有多个重载，可权限需要进行调用。另外需要说明的是，如果ASPxTreeList设置的分页功能，调用以下方法时可能出现只导出当前面的现象，所以调用以上方法进，可以设置导出的详细设置，如下： 三． 分页设置默认情况下，ASPxTreeList不进行分页处理，如果需要分面功能，可以设置其属性SettingsPager 如下代码： 默认页大小为10，可以通过SettingPager的 PageSize属性设置，PageSize="20" 四． 用户弹出面板设置即让用户自定义ASPxTreeList显示的字段名称，如下设置 如果当某一字段在初始时设置Visible=false，那么此字段将会放在CustomizationWindow中，当然，用户也可以把它拖放出来，也可以拖放进去。以下代码就是控制如果显示与隐藏CustomizationWindow. 例如： <script type="text/javascript"> function CwShow() { treeList.ShowCustomizationWindow(); btnCustWin.SetText("Hide Customization Window"); }
function CwHide() { treeList.HideCustomizationWindow(); btnCustWin.SetText("Show Customization Window"); }
function CwToggle() { if (treeList.IsCustomizationWindowVisible()) CwHide(); else CwShow(); } </script>
<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Show Customization Window" AutoPostBack="False" ClientInstanceName="btnCustWin" EnableClientSideAPI="True" UseSubmitBehavior="False"> <ClientSideEvents Click="function(s, e) { CwToggle(); }" /> </dx:ASPxButton>
<dx:ASPxTreeList ID="treeList" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" Width="100%" KeyFieldName="ID" ParentFieldName="ParentID" ClientInstanceName="treeList"> <Columns> <dx:TreeListDataColumn FieldName="Text" Visible="False" /> </Columns> <SettingsCustomizationWindow Enabled="True" PopupHorizontalOffset="2" /> <ClientSideEvents Init="function() { CwShow(); }" CustomizationWindowCloseUp="function() { CwHide(); }" /> </dx:ASPxTreeList> 五． 样式设置常用设置如下： <Styles AlternatingNode-Enabled="True"></Styles>
<SettingsBehavior ExpandCollapseAction="NodeDblClick" AllowFocusedNode="true" />
<SettingsEditing Mode="EditFormAndDisplayNode" AllowNodeDragDrop="true" AllowRecursiveDelete="true" />
ShowPreview可显示数据内容较多的View，不影响TreeList的展示。 或者<Templates><PreviewRow></PreviewRow></Templates>
ASPxGridView还可以设置 <SettingsDetail ShowDetailRow="true"/> <Templates><DetailRow></DetailRow></Templates>
六． 多表头设置辅助类： //*********************************************************************** // File: DynamicHeaderHepler.cs // Description: 动态生成多表头帮助类 //*********************************************************************** public class DynamicHeaderHepler { public static void SetAspxGridViewBand(ASPxGridView gridView) { gridView.HtmlRowCreated += new ASPxGridViewTableRowEventHandler(GridView_HtmlRowCreated); }
static void GridView_HtmlRowCreated(object sender, ASPxGridViewTableRowEventArgs e) { ASPxGridView gridView = sender as ASPxGridView; if (e.RowType == GridViewRowType.Data && e.VisibleIndex == gridView.PageIndex * gridView.SettingsPager.PageSize) { Table table = e.Row.Parent as Table; if (table != null) { TableRow row = new TableRow(); TableCell firstBand = GetNewTableCell(row, string.Empty); foreach (GridViewDataColumn col in gridView.Columns) { if (col.Name.IndexOf("|") > 0) { string bandname = col.Name.Substring(0, col.Name.IndexOf("|")); TableCell band = null; foreach (TableCell t in row.Cells) { if (t.Text == bandname) { band = t; break; } }
if (band == null) band = GetNewTableCell(row, bandname);
col.Caption = col.Name.Substring(col.Name.IndexOf("|") + 1); band.ColumnSpan++; } else firstBand.ColumnSpan++; }
table.Rows.AddAt(0, row); } } }
//可以在此修改单元格样式 private static TableCell GetNewTableCell(TableRow row, string bandname) { TableCell band = new TableCell(); band.Text = bandname; row.Cells.Add(band); band.CssClass = "dxgvHeader_Aqua"; band.HorizontalAlign = HorizontalAlign.Center; band.BorderStyle = BorderStyle.NotSet; band.BorderColor = row.BorderColor;
return band; } }
服务端： DynamicHeaderHepler.SetAspxGridViewBand(gridView); gridView.DataBind();
客户端： <Columns> <dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列1|列11" Name="列1|列11"></dx:GridViewDataHyperLinkColumn> <dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列1|列12" Name="列1|列12"> </dx:GridViewDataHyperLinkColumn> <dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列2|列21" Name="列2|列21"> </dx:GridViewDataHyperLinkColumn> <dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列2|列22" Name="列2|列22"> </dx:GridViewDataHyperLinkColumn> </Columns> 七． 其它设置每行增加增删改按钮: <dx:TreeListCommandColumn UpdateButton-Text="提交" CancelButton-Text="取消"> <NewButton Text="新增" Visible="true"></NewButton> <EditButton Text="修改" Visible="true"></EditButton> <DeleteButton Text="删除" Visible="true"></DeleteButton> </dx:TreeListCommandColumn>
自定义EditForm: 在配置Columns时通过EditFormSettings设置当前列在EditForm中的显示样式，如下 <dx:TreeListMemoColumn FieldName="Text" Visible="False"> <EditFormSettings VisibleIndex="3" ColumnSpan="2" Visible="true" /> <PropertiesMemo Rows="6" /> <EditFormCaptionStyle VerticalAlign="top" /> </dx:TreeListMemoColumn> 或者通过模板设置，如下 <Templates> <EditForm> <dx:ASPxPageControl ID="tabs" runat="server" ActiveTabIndex="0" Width="100%"> <TabPages> <dx:TabPage Text="Headers"> <ContentCollection> <dxw:ContentControl runat="server"> <dx:ASPxTreeListTemplateReplacement runat="server" ReplacementType="Editors" /> </dxw:ContentControl> </ContentCollection> </dx:TabPage> <dx:TabPage Text="Message"> <ContentCollection> <dxw:ContentControl runat="server"> <dxe:ASPxMemo ID="message" runat="server" AutoResizeWithContainer="True" Height="200px" Width="100%" Text='<%# Eval("Field2") %>' /> </dxw:ContentControl> </ContentCollection> </dx:TabPage> </TabPages> </dx:ASPxPageControl> <div > <dx:ASPxTreeListTemplateReplacement runat="server" ReplacementType="UpdateButton" /> <dx:ASPxTreeListTemplateReplacement runat="server" ReplacementType="CancelButton" /> </div> </EditForm> </Templates> 八． 选择事件可添加ASPxTreeList的FocuseNodeChnaged事件来处理选择Node时的逻辑，但ASPxTreeList必须设置AllowFocusedNode=true，如下： 通过FocuseNodeChnaged事件来回调ASPxTreeList的服务端事件来完成通信，如下： 客户端： FocusedNodeChanged="function(s, e) {
服务端： protected void treeList_CustomDataCallback(object sender, TreeListCustomDataCallbackEventArgs e) { string key = e.Argument.ToString(); TreeListNode node = (sender as ASPxTreeList).FindNodeByKeyValue(key); e.Result = node.GetValue("Field1"); }
ASPxGridView这些工作都可以在客户端完成 如下： <script language="javascript" type="text/javascript"> function RowClickHandler() { gridView.GetRowValues(gridView.GetFocusedRowIndex(), 'Field1; Field2', OnGetRowValues); }
function OnGetRowValues(values) { alert(values[0]); alert(values[1]); } </script>
<dx:ASPxGridView ID="gridView" runat="server" AutoGenerateColumns="False" ClientInstanceName=" gridView " DataSourceID="supplyBusinessScopeDataSource" KeyFieldName="Id"> <SettingsBehavior EnableRowHotTrack="True" AllowFocusedRow="True" /> <Columns> <dx:GridViewDataTextColumn FieldName="Field1" Visible="True" </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="Field2" Visible="True"> </dx:GridViewDataTextColumn> </Columns> <ClientSideEvents RowClick="RowClickHandler" /> </dx:ASPxGridView>
以下代码设置为可多选，并且可以递归选择。
九． 客户端方法总结ASPxTreeList: var key = treeList.GetFocusedNodeKey(); //获取选中行的键值 ASPxGridView: gridView.PerformCallback (); //Callback gridView.SelectRows(); //选择全部行 gridView.UnselectRows(); //取消全部行选中状态 gridView.SelectAllRowsOnPage(); //选择当前页全部行 gridView.UnselectAllRowsOnPage(); //取消当前页全部行选中状态
十． 服务端方法总结ASPxTreeList: string value = node.GetValue("Field1"); //根据字段名获取数据
ASPxGridView: gridView.GetMasterRowKeyValue(); //获取Master行键值 |
