zoukankan      html  css  js  c++  java
  • (转载)DevExpress ASPxGridView 使用文档六:模板

    转载请注明出处:http://surfsky.cnblogs.com/

    ---------------------------------------------------------
    -- ASPxGridView 模板
    ---------------------------------------------------------
    ASPxGridView 提供以下几种自定义的模板视图
        EditForm    编辑窗口。弹出式或附加在原记录下面
        DetailRow   详细行。点击后以form方式查看记录的详细信息
        PreviewRow  预览行。原记录下进行简短描述
        DataRow     数据行视图。每一行的内容位置都是定制的。
        注:列模板请参考文档《ASPxGridView.Column》

    数据行模板(DataRow, 类似ListView 卡片视图)
        <dxwgv:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID" Width="100%">
            <Columns>
                <dxwgv:GridViewDataColumn FieldName="FirstName" VisibleIndex="1" />
                <dxwgv:GridViewDataColumn FieldName="Title" VisibleIndex="4" />
                <dxwgv:GridViewDataColumn FieldName="Notes" Visible="False" />
                <dxwgv:GridViewDataColumn FieldName="LastName" VisibleIndex="2" />
                <dxwgv:GridViewDataColumn FieldName="BirthDate" VisibleIndex="3"/>
                <dxwgv:GridViewDataColumn FieldName="HireDate" VisibleIndex="5"/>
            </Columns>
            <SettingsPager PageSize="5" />
            <Templates>
                <DataRow>
                    <div style="padding:5px">
                        <table class="templateTable" cellpadding="2" cellspacing="1" >
                            <tr>
                                <td rowspan="4"><img alt="" src="CardView.aspx?Photo=<%# Eval("EmployeeID")%>"/></td>
                                <td class="templateCaption">First Name</td>
                                <td><%# Eval("FirstName") %></td>
                                <td class="templateCaption">Last Name</td>
                                <td><%# Eval("LastName")%></td>
                                
                            </tr>
                            <tr>
                                <td class="templateCaption">Title</td>
                                <td colspan="3"><%# Eval("Title")%></td>
                            </tr>
                            <tr>
                                <td class="templateCaption">Birth Date</td>
                                <td ><%# Eval("BirthDate")%></td>
                                <td class="templateCaption">Hire Date</td>
                                <td><%# Eval("HireDate")%></td>
                            </tr>
                            <tr>
                                <td colspan="4" style="white-space:normal"><%# Eval("Notes") %> </td>
                            </tr>
                        </table>
                    </div>
                </DataRow>
            </Templates>
        </dxwgv:ASPxGridView>
        
    编辑表单模板(EditForm)
        示例一:两个标签页,一个用标准的编辑面板,一个展示memo字段
            <Templates>
                <EditForm>
                    <div style="padding:4px 4px 3px 4px">
                    <dxtc:ASPxPageControl runat="server" ID="pageControl" Width="100%">
                    <TabPages>
                        <dxtc:TabPage Text="Info" Visible="true">
                            <Controls>
                                <dxwgv:ASPxGridViewTemplateReplacement ID="Editors" ReplacementType="EditFormEditors" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>
                            </Controls>
                        </dxtc:TabPage>
                        <dxtc:TabPage Text="Notes"  Visible="true">
                           <Controls>
                                <dxe:ASPxMemo runat="server" ID="notesEditor" Text='<%# Eval("Notes")%>' Width="100%" Height="93px"></dxe:ASPxMemo>
                           </Controls>
                        </dxtc:TabPage>
                    </TabPages>
                    </dxtc:ASPxPageControl>
                    </div>
                    <div style="text-align:right; padding:2px 2px 2px 2px">
                        <dxwgv:ASPxGridViewTemplateReplacement ID="UpdateButton" ReplacementType="EditFormUpdateButton" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>
                        <dxwgv:ASPxGridViewTemplateReplacement ID="CancelButton" ReplacementType="EditFormCancelButton" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>
                    </div>
                </EditForm>
            </Templates>
            protected string GetMemoText() {
                ASPxPageControl pageControl = grid.FindEditFormTemplateControl("pageControl") as ASPxPageControl;
                ASPxMemo memo = pageControl.FindControl("notesEditor") as ASPxMemo;
                return memo.Text;
            }
            protected void grid_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
                e.NewValues["Notes"] = GetMemoText();
            }
            protected void grid_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
                e.NewValues["Notes"] = GetMemoText();
            }
        示例二
            <Templates>
                <EditForm>
                    <div style="padding:4px 4px 3px 4px">
                        <table>
                            <tr>
                                <% if(!grid.IsNewRowEditing) { %>
                                <td rowspan="4">
                                    <div style="border: solid 1px #C2D4DA; padding: 2px;"><img alt="" src="TwoWayBinding.aspx?Photo=<%# Eval("EmployeeID")%>" /></div>
                                </td>
                                <% } %>
                                <td style="white-space:nowrap">First Name</td>
                                <td style="50%"><dxe:ASPxTextBox runat="server" ID="edFirst" Text='<%# Bind("FirstName") %>' Width="100%" /> </td>
                                <td style="white-space:nowrap">Last Name</td>
                                <td  style="50%"><dxe:ASPxTextBox runat="server" ID="edLast" Text='<%# Bind("LastName") %>' Width="100%" /> </td>
                            </tr>
                            <tr>
                                <td>Title</td>
                                <td style="100%" colspan="3"><dxe:ASPxTextBox runat="server" ID="edTitle" Text='<%# Bind("Title") %>' Width="100%" /> </td>
                            </tr>
                            <tr>
                                <td style="white-space:nowrap">Birth Date</td>
                                <td style="50%"><dxe:ASPxDateEdit runat="server" ID="edBirth" Value='<%# Bind("BirthDate") %>' Width="100%" /> </td>
                                <td style="white-space:nowrap">Hire Date</td>
                                <td style="50%"><dxe:ASPxDateEdit runat="server" ID="edHire" Value='<%# Bind("HireDate") %>' Width="100%" /> </td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <dxe:ASPxMemo runat="server" ID="edNotes" Text='<%# Bind("Notes")%>' Width="100%" Height="100px" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div style="text-align:right; padding:2px 2px 2px 2px">
                        <dxwgv:ASPxGridViewTemplateReplacement ID="UpdateButton" ReplacementType="EditFormUpdateButton" runat="server" />
                        <dxwgv:ASPxGridViewTemplateReplacement ID="CancelButton" ReplacementType="EditFormCancelButton" runat="server" />
                    </div>
                </EditForm>
            </Templates>

    预览行模板(PreviewRow)
        <Templates>
            <PreviewRow>
                <table style="border:none">
                    <tbody>
                    <tr>
                        <td style="25%;border:none;color:Black"><img alt="" src="Preview.aspx?Photo=<%# Eval("EmployeeID")%>"/></td>
                        <td style="border:none;"><%# Container.Text %></td>
                    </tr>
                    </tbody>
                </table>
            </PreviewRow>            
        </Templates>


    细节行模板(DetailRow: 主从视图Master-Detail)
        <dxe:ASPxCheckBox ID="chkSingleExpanded" runat="server" Text="Keep a single expanded row at a time" AutoPostBack="true" OnCheckedChanged="chkSingleExpanded_CheckedChanged" />
        <dxwgv:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="masterDataSource" KeyFieldName="CustomerID">
            <Columns>
               <dxwgv:GridViewDataColumn FieldName="ContactName"  />
               <dxwgv:GridViewDataColumn FieldName="CompanyName"  />
               <dxwgv:GridViewDataColumn FieldName="City"  />
               <dxwgv:GridViewDataColumn FieldName="Country" />
            </Columns>         
            <Templates>
                <DetailRow>
                    联系电话: <b><%# Eval("Phone")%></b>, 传真: <b><%# Eval("Fax")%></b><br/>
                    <dxwgv:ASPxGridView ID="detailGrid" runat="server" DataSourceID="detailDataSource" KeyFieldName="OrderID" Width="100%" 
                        OnBeforePerformDataSelect="detailGrid_DataSelect" OnCustomUnboundColumnData="detailGrid_CustomUnboundColumnData">
                        <Settings ShowFooter="True" />
                        <SettingsDetail IsDetailGrid="true"/>
                        <Columns>
                            <dxwgv:GridViewDataColumn FieldName="OrderID" />
                            <dxwgv:GridViewDataColumn FieldName="OrderDate" />
                            <dxwgv:GridViewDataColumn FieldName="ShipName"  />
                            <dxwgv:GridViewDataColumn FieldName="Quantity" Name="Quantity" />
                            <dxwgv:GridViewDataTextColumn FieldName="UnitPrice" >
                                <PropertiesTextEdit DisplayFormatString="c" />
                            </dxwgv:GridViewDataTextColumn>
                            <dxwgv:GridViewDataTextColumn FieldName="Total" UnboundType="Decimal">
                                <PropertiesTextEdit DisplayFormatString="c" />
                            </dxwgv:GridViewDataTextColumn>
                        </Columns>
                        <TotalSummary>
                            <dxwgv:ASPxSummaryItem FieldName="CompanyName" SummaryType="Count"/>
                            <dxwgv:ASPxSummaryItem FieldName="Total" SummaryType="Sum" DisplayFormat="c"/>
                            <dxwgv:ASPxSummaryItem FieldName="Quantity" SummaryType="Sum" />
                        </TotalSummary>
                    </dxwgv:ASPxGridView>
                </DetailRow>
            </Templates>
            <SettingsDetail ShowDetailRow="true"/>                
        </dxwgv:ASPxGridView>
        <asp:AccessDataSource ID="masterDataSource" runat="server" DataFile="~/App_Data/nwind.mdb"
            SelectCommand="SELECT * FROM [Customers]">
        </asp:AccessDataSource>
        <asp:AccessDataSource ID="detailDataSource" runat="server" DataFile="~/App_Data/nwind.mdb" 
            SelectCommand="SELECT * FROM [Invoices] Where CustomerID = ?">
            <SelectParameters>
                <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="String" />
            </SelectParameters>
        </asp:AccessDataSource>
        注意: detailGrid.SettingsDetail.IsDetailGrid = true 表明该grid是作为从表的数据表格用的
        // 主表数据绑定
        protected void Page_Load(object sender, EventArgs e) 
        {
            if(!IsPostBack) 
            {
                grid.DataBind();
                grid.DetailRows.ExpandRow(0);
            }
        }
        // 从表数据绑定
        protected void gridDetail_DataBinding(object sender, EventArgs e)
        {
            ASPxGridView grid = sender as ASPxGridView;
            if (grid != null)
            {
                int i = (int) grid.GetMasterRowKeyValue();
                grid.DataSource = GetProducts(i);
            }
        }
        // 从表数据选择?
        protected void detailGrid_DataSelect(object sender, EventArgs e) 
        {
            Session["CustomerID"] = (sender as ASPxGridView).GetMasterRowKeyValue();
        }
        // 从表定制列的展示
        protected void detailGrid_CustomUnboundColumnData(object sender, ASPxGridViewColumnDataEventArgs e) 
        {
            if(e.Column.FieldName == "Total") 
            {
                decimal price = (decimal)e.GetListSourceFieldValue("UnitPrice");
                int quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"));
                e.Value = price * quantity;
            }
        }
        // 控制从表的显隐
        protected void chkSingleExpanded_CheckedChanged(object sender, EventArgs e) 
        {
            grid.SettingsDetail.AllowOnlyOneMasterRowExpanded = chkSingleExpanded.Checked;
            if(grid.SettingsDetail.AllowOnlyOneMasterRowExpanded) 
            {
                grid.DetailRows.CollapseAllRows();
            }
        }

  • 相关阅读:
    HTML DOM 12 表格排序
    HTML DOM 10 常用场景
    HTML DOM 10 插入节点
    HTML DOM 09 替换节点
    HTML DOM 08 删除节点
    HTML DOM 07 创建节点
    022 注释
    024 数字类型
    005 基于面向对象设计一个简单的游戏
    021 花式赋值
  • 原文地址:https://www.cnblogs.com/goole/p/2021169.html
Copyright © 2011-2022 走看看