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();
            }
        }


     

  • 相关阅读:
    CSS揭秘三(形状)
    CSS揭秘(二背景与边框)
    js数组去重
    Iterator
    ES6数据结构set
    JS浏览器对象(BOM)
    JS 数据类型转换
    js的cookie,localStorage,sessionStorage
    (html+css)云道首页
    蓝桥杯-基础练习 01字串-C语言-5层循环法
  • 原文地址:https://www.cnblogs.com/surfsky/p/1798910.html
Copyright © 2011-2022 走看看