DevExpress ASP.NET 使用經驗談(8)-ASPxGridView自定義列和基本事件


為演示本節示例,我們在原來Users表增加【性別Gender】、【興趣愛好Hobbies】,【CreateTime創建時間】,【ModifyTime】修改時間這4個字段,

ALTER TABLE [dbo].[Users] add [Gender] varchar(10) NULL
GO
ALTER TABLE [dbo].[Users] add [Hobbies] varchar(50) NULL
GO
ALTER TABLE [dbo].[Users] add [CreateTime] datetime NULL
GO
ALTER TABLE [dbo].[Users] add [ModifyTime] datetime NULL

完成建表語句如下:

CREATE TABLE [dbo].[Users] ( 
    [UserID] int IDENTITY(1, 1) NOT NULL, 
    [UserName] nvarchar(50) NULL, 
    [FirstName] nvarchar(50) NULL, 
    [LastName] nvarchar(50) NULL, 
    [MiddleName] nvarchar(50) NULL, 
    [EmailID] nvarchar(50) NULL, 
    [Gender] varchar(10) NULL, 
    [Hobbies] varchar(50) NULL, 
    [ModifyTime] datetime NULL, 
    [CreateTime] datetime NULL, 
    CONSTRAINT [PK_Users] PRIMARY KEY ([UserID])
)

【性別】:我們選擇ASPxGridView的GridViewDataComboBoxColumn列類型,通過如下代碼實現下拉選擇性別“男”和“女”。

 <dx:GridViewDataComboBoxColumn FieldName="Gender" VisibleIndex="6" Caption="性別" Width="80px">
                        <EditFormSettings VisibleIndex="4" Visible="True" Caption="性別" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                        <PropertiesComboBox>
                            <Items>
                                <dx:ListEditItem Text="男" Value="男" />
                                <dx:ListEditItem Text="女" Value="女" />
                            </Items>
                        </PropertiesComboBox>
</dx:GridViewDataComboBoxColumn>

 【興趣愛好】:通過編輯模板EditItemTemplate,建立自定義的興趣愛好CheckBox選項的模板列。

 <dx:GridViewDataTextColumn FieldName="Hobbies" VisibleIndex="7" Caption="興趣愛好" Width="100px">
                        <EditFormSettings VisibleIndex="5" Visible="True" Caption="興趣愛好" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                        <EditItemTemplate>
                            <table border="0">
                                <tr>
                                    <td>
                                        <dx:ASPxCheckBox ID="ASPxCheckBox_H1" runat="server" ClientInstanceName="cb_hob1" Text="閱讀" Layout="Flow" OnInit="ASPxCheckBox_Hobbies_Init">
                                        </dx:ASPxCheckBox>
                                    </td>
                                    <td> </td>
                                    <td>
                                        <dx:ASPxCheckBox ID="ASPxCheckBox_H2" ClientInstanceName="cb_hob2" runat="server" Text="思考" Layout="Flow" OnInit="ASPxCheckBox_Hobbies_Init">
                                        </dx:ASPxCheckBox>
                                    </td>
                                    <td> </td>
                                    <td>
                                        <dx:ASPxCheckBox ID="ASPxCheckBox_H3" runat="server" ClientInstanceName="cb_hob3" Text="運動" Layout="Flow" OnInit="ASPxCheckBox_Hobbies_Init">
                                        </dx:ASPxCheckBox>
                                    </td>
                                    <td> </td>
                                    <td>
                                        <dx:ASPxCheckBox ID="ASPxCheckBox_H4" runat="server" ClientInstanceName="cb_hob4" Text="社交" Layout="Flow" OnInit="ASPxCheckBox_Hobbies_Init">
                                        </dx:ASPxCheckBox>
                                    </td>
                                </tr>
                            </table>
                        </EditItemTemplate>
</dx:GridViewDataTextColumn>

【 創建時間】與【修改時間】在界面上均不顯示,分別記錄每條數據的創建時間和最后一次修改時間。

 <dx:GridViewDataDateColumn FieldName="CreateTime" VisibleIndex="7" Caption="創建時間" Width="100px" Visible="false">
                        <EditFormSettings VisibleIndex="5" Visible="False" Caption="創建時間" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </dx:GridViewDataDateColumn>
<dx:GridViewDataDateColumn FieldName="ModifyTime" VisibleIndex="7" Caption="修改時間" Width="100px" Visible="false">
                        <EditFormSettings VisibleIndex="5" Visible="True" Caption="修改時間" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
</dx:GridViewDataDateColumn>

關於這4個字段的后台賦值,我們暫先放一邊,來看一下,目前編輯界面的效果。

                                                                         圖一 添加字段后的編輯頁

【性別】字段,可以直接下拉選擇並保存,但是【興趣愛好】選項選取后保存無效,【創建時間】,【修改時間】因為並未開放編輯,且后台並未賦值,

所以仍為空值。那么如何才能保存這三個字段呢?

這里我們就要利用ASPxGridView的OnRowInserting事件、OnRowUpdating事件來執行賦值和保存。

后台OnRowInserting事件代碼如下:

 protected void ASPxGridView1_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e)
    {
        //在RowInserting時,將當前時間賦值給“創建時間列”CreateTime賦值
        e.NewValues["CreateTime"] = DateTime.Now;

        GridViewDataColumn columnHobbies = ASPxGridView1.Columns["Hobbies"] as GridViewDataColumn; //取出GridView的Column
        //通過ASPxGridView1.FindEditRowCellTemplateControl找出自定義的CheckBox
        ASPxCheckBox cbH1 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H1") as ASPxCheckBox);
        ASPxCheckBox cbH2 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H2") as ASPxCheckBox);
        ASPxCheckBox cbH3 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H3") as ASPxCheckBox);
        ASPxCheckBox cbH4 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H4") as ASPxCheckBox);

        ArrayList listHobbies = new ArrayList();
        if (cbH1.Checked == true)
        {
            listHobbies.Add(cbH1.Text);
        }
        if (cbH2.Checked == true)
        {
            listHobbies.Add(cbH2.Text);
        }
        if (cbH3.Checked == true)
        {
            listHobbies.Add(cbH3.Text);
        }
        if (cbH4.Checked == true)
        {
            listHobbies.Add(cbH4.Text);
        }
        //通過 e.NewValues["Hobbies"]賦值
        e.NewValues["Hobbies"] = string.Join(",", listHobbies.ToArray());
    }

我們可以通過e.NewValues["列名"]賦值來存取數據,通過ASPxGridView1.FindEditRowCellTemplateControl方法,可以找到模板列中的

自定義控件。

同理,后台RowUpdating事件如下:

 protected void ASPxGridView1_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e)
    {
        //在RowUpdating時,將當前時間賦值給“創建時間列”ModifyTime賦值
        e.NewValues["ModifyTime"] = DateTime.Now;

        GridViewDataColumn columnHobbies = ASPxGridView1.Columns["Hobbies"] as GridViewDataColumn;//取出GridView的Column
        //通過ASPxGridView1.FindEditRowCellTemplateControl找出自定義的CheckBox
        ASPxCheckBox cbH1 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H1") as ASPxCheckBox);
        ASPxCheckBox cbH2 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H2") as ASPxCheckBox);
        ASPxCheckBox cbH3 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H3") as ASPxCheckBox);
        ASPxCheckBox cbH4 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H4") as ASPxCheckBox);

        ArrayList listHobbies = new ArrayList();
        if (cbH1.Checked == true)
        {
            listHobbies.Add(cbH1.Text);
        }
        if (cbH2.Checked == true)
        {
            listHobbies.Add(cbH2.Text);
        }
        if (cbH3.Checked == true)
        {
            listHobbies.Add(cbH3.Text);
        }
        if (cbH4.Checked == true)
        {
            listHobbies.Add(cbH4.Text);
        }
        //通過 e.NewValues["Hobbies"]賦值
        e.NewValues["Hobbies"] = string.Join(",", listHobbies.ToArray());
    }

通過上面代碼,我們已經能將【興趣愛好】、【創建時間】、【修改時間】的數據保存到數據庫,但是再次編輯時,【興趣愛好】列數據並未綁定控件,

這時,就需要用到ASPxCheckBox控件的OnInit事件。

 <dx:ASPxCheckBox ID="ASPxCheckBox_H2" ClientInstanceName="cb_hob2" runat="server" Text="思考" Layout="Flow" OnInit="ASPxCheckBox_Hobbies_Init">
 </dx:ASPxCheckBox>

 ASPxCheckBox_Hobbies_Init事件代碼如下:

    protected void ASPxCheckBox_Hobbies_Init(object sender, EventArgs e)
    {
        ASPxCheckBox cblHb = sender as ASPxCheckBox;
        GridViewEditItemTemplateContainer container = cblHb.NamingContainer as GridViewEditItemTemplateContainer;
        string strHobbies = string.Empty;
        if (DataBinder.Eval(container.DataItem, "Hobbies") != null)
            strHobbies = DataBinder.Eval(container.DataItem, "Hobbies").ToString().Trim();

        if (strHobbies.Contains(cblHb.Text))
        {
            cblHb.Checked = true;
        }
    }

此時,我們新增一條數據,錄入信息如下,點擊保存,再次點擊編輯圖標打開編輯界面,已經顯示【興趣愛好】列的選擇狀態數據綁定,因為是

新增數據,所以【修改時間】為空。

                                                      圖二 增加后台取值賦值代碼,執行新增並保存后的界面

再次編輯,修改【興趣愛好】選項,取消“運動“選項,增加”思考“選項,再保存,這時【修改時間】更新。

                                                                圖三 再執行編輯並保存后的界面

最后貼出完整代碼:

1、前台ASPX頁面代碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Xpo.v12.2.Web, Version=12.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Xpo" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.v12.2, Version=12.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.v12.2, Version=12.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <p>
                <h1>ASPxGridView自定義列和事件</h1>
            </p>
            <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False"
                OnRowInserting="ASPxGridView1_RowInserting"
                OnRowUpdating="ASPxGridView1_RowUpdating"
                DataSourceID="XpoDataSource1" KeyFieldName="UserID" Theme="Aqua">
                <Columns>
                    <dx:GridViewCommandColumn VisibleIndex="0" ButtonType="Image" Width="80px">
                        <EditButton Visible="true">
                            <Image ToolTip="編輯" Url="Assets/images/edit.png"></Image>
                        </EditButton>
                        <NewButton Visible="true">
                            <Image ToolTip="新增" Url="Assets/images/new.png"></Image>
                        </NewButton>
                        <DeleteButton Visible="true">
                            <Image ToolTip="刪除" Url="Assets/images/delete.png"></Image>
                        </DeleteButton>
                        <UpdateButton Visible="true">
                            <Image ToolTip="保存" Url="Assets/images/save.gif"></Image>
                        </UpdateButton>
                        <CancelButton Visible="true">
                            <Image ToolTip="取消" Url="Assets/images/cancel.gif"></Image>
                        </CancelButton>
                    </dx:GridViewCommandColumn>
                    <dx:GridViewDataTextColumn FieldName="UserID" ReadOnly="True" VisibleIndex="1" Visible="false">
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="UserName" VisibleIndex="2" Caption="用戶姓名" >
                        <EditFormSettings VisibleIndex="2" Visible="True" Caption="用戶姓名" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="3" Caption="名" Width="80px">
                        <EditFormSettings VisibleIndex="3" Visible="True" Caption="名" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="LastName" VisibleIndex="4" Caption="姓" Width="80px">
                        <EditFormSettings VisibleIndex="4" Visible="True" Caption="姓" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="MiddleName" VisibleIndex="5" Caption="教名" Width="100px">
                        <EditFormSettings VisibleIndex="5" Visible="False" Caption="教名" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataComboBoxColumn FieldName="Gender" VisibleIndex="6" Caption="性別" Width="80px">
                        <EditFormSettings VisibleIndex="4" Visible="True" Caption="性別" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                        <PropertiesComboBox>
                            <Items>
                                <dx:ListEditItem Text="男" Value="男" />
                                <dx:ListEditItem Text="女" Value="女" />
                            </Items>
                        </PropertiesComboBox>
                    </dx:GridViewDataComboBoxColumn>
                    <dx:GridViewDataTextColumn FieldName="Hobbies" VisibleIndex="7" Caption="興趣愛好" Width="100px">
                        <EditFormSettings VisibleIndex="5" Visible="True" Caption="興趣愛好" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                        <EditItemTemplate>
                            <table border="0">
                                <tr>
                                    <td>
                                        <dx:ASPxCheckBox ID="ASPxCheckBox_H1" runat="server" ClientInstanceName="cb_hob1" Text="閱讀" Layout="Flow" OnInit="ASPxCheckBox_Hobbies_Init">
                                        </dx:ASPxCheckBox>
                                    </td>
                                    <td> </td>
                                    <td>
                                        <dx:ASPxCheckBox ID="ASPxCheckBox_H2" ClientInstanceName="cb_hob2" runat="server" Text="思考" Layout="Flow" OnInit="ASPxCheckBox_Hobbies_Init">
                                        </dx:ASPxCheckBox>
                                    </td>
                                    <td> </td>
                                    <td>
                                        <dx:ASPxCheckBox ID="ASPxCheckBox_H3" runat="server" ClientInstanceName="cb_hob3" Text="運動" Layout="Flow" OnInit="ASPxCheckBox_Hobbies_Init">
                                        </dx:ASPxCheckBox>
                                    </td>
                                    <td> </td>
                                    <td>
                                        <dx:ASPxCheckBox ID="ASPxCheckBox_H4" runat="server" ClientInstanceName="cb_hob4" Text="社交" Layout="Flow" OnInit="ASPxCheckBox_Hobbies_Init">
                                        </dx:ASPxCheckBox>
                                    </td>
                                </tr>
                            </table>
                        </EditItemTemplate>
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="EmailID" VisibleIndex="6" Caption="郵箱" Width="200px">
                        <EditFormSettings VisibleIndex="6" Visible="True" Caption="郵箱" ColumnSpan="2" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataDateColumn FieldName="CreateTime" VisibleIndex="7" Caption="創建時間" Width="100px" >
                        <EditFormSettings VisibleIndex="5" Visible="False" Caption="創建時間" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </dx:GridViewDataDateColumn>
                    <dx:GridViewDataDateColumn FieldName="ModifyTime" VisibleIndex="7" Caption="修改時間" Width="100px" >
                        <EditFormSettings VisibleIndex="5" Visible="False" Caption="修改時間" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </dx:GridViewDataDateColumn>
                </Columns>
                <SettingsBehavior ConfirmDelete="true" AllowFocusedRow="true" AllowSelectSingleRowOnly="true" AllowSelectByRowClick="true" />
                <SettingsEditing EditFormColumnCount="2" />
                <Settings ShowFooter="True" />
                <SettingsText EmptyDataRow="無記錄" ConfirmDelete="確定刪除嗎?" />
                <SettingsPager Mode="ShowPager" PageSize="3" />
            </dx:ASPxGridView>
        </div>
        <dx:XpoDataSource ID="XpoDataSource1" runat="server" TypeName="XPOModel.DemoDB.Users"></dx:XpoDataSource>
    </form>
</body>
</html>

 2、后台代碼:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using DevExpress.Xpo;
using DevExpress.Xpo.DB;
using DevExpress.Web.ASPxGridView;
using DevExpress.Web.ASPxEditors;
using System.Collections;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Init(object sender, EventArgs e)
    {
        string provider = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;//獲取數據庫連接
        IDataLayer datalayer = new SimpleDataLayer(XpoDefault.GetConnectionProvider(provider, AutoCreateOption.DatabaseAndSchema));//建立數據層XPO獨有的
        DevExpress.Xpo.Session session = new DevExpress.Xpo.Session(datalayer); //將數據層和會話綁定
        XpoDataSource1.Session = session;
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void ASPxCheckBox_Hobbies_Init(object sender, EventArgs e)
    {
        ASPxCheckBox cblHb = sender as ASPxCheckBox;
        GridViewEditItemTemplateContainer container = cblHb.NamingContainer as GridViewEditItemTemplateContainer;
        string strHobbies = string.Empty;
        if (DataBinder.Eval(container.DataItem, "Hobbies") != null)
            strHobbies = DataBinder.Eval(container.DataItem, "Hobbies").ToString().Trim();

        if (strHobbies.Contains(cblHb.Text))
        {
            cblHb.Checked = true;
        }
    }

    protected void ASPxGridView1_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e)
    {
        //在RowInserting時,將當前時間賦值給“創建時間列”CreateTime賦值
        e.NewValues["CreateTime"] = DateTime.Now;

        GridViewDataColumn columnHobbies = ASPxGridView1.Columns["Hobbies"] as GridViewDataColumn; //取出GridView的Column
        //通過ASPxGridView1.FindEditRowCellTemplateControl找出自定義的CheckBox
        ASPxCheckBox cbH1 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H1") as ASPxCheckBox);
        ASPxCheckBox cbH2 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H2") as ASPxCheckBox);
        ASPxCheckBox cbH3 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H3") as ASPxCheckBox);
        ASPxCheckBox cbH4 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H4") as ASPxCheckBox);

        ArrayList listHobbies = new ArrayList();
        if (cbH1.Checked == true)
        {
            listHobbies.Add(cbH1.Text);
        }
        if (cbH2.Checked == true)
        {
            listHobbies.Add(cbH2.Text);
        }
        if (cbH3.Checked == true)
        {
            listHobbies.Add(cbH3.Text);
        }
        if (cbH4.Checked == true)
        {
            listHobbies.Add(cbH4.Text);
        }
        //通過 e.NewValues["Hobbies"]賦值
        e.NewValues["Hobbies"] = string.Join(",", listHobbies.ToArray());
    }
    protected void ASPxGridView1_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e)
    {
        //在RowUpdating時,將當前時間賦值給“創建時間列”ModifyTime賦值
        e.NewValues["ModifyTime"] = DateTime.Now;

        GridViewDataColumn columnHobbies = ASPxGridView1.Columns["Hobbies"] as GridViewDataColumn;//取出GridView的Column
        //通過ASPxGridView1.FindEditRowCellTemplateControl找出自定義的CheckBox
        ASPxCheckBox cbH1 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H1") as ASPxCheckBox);
        ASPxCheckBox cbH2 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H2") as ASPxCheckBox);
        ASPxCheckBox cbH3 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H3") as ASPxCheckBox);
        ASPxCheckBox cbH4 = (ASPxGridView1.FindEditRowCellTemplateControl(columnHobbies, "ASPxCheckBox_H4") as ASPxCheckBox);

        ArrayList listHobbies = new ArrayList();
        if (cbH1.Checked == true)
        {
            listHobbies.Add(cbH1.Text);
        }
        if (cbH2.Checked == true)
        {
            listHobbies.Add(cbH2.Text);
        }
        if (cbH3.Checked == true)
        {
            listHobbies.Add(cbH3.Text);
        }
        if (cbH4.Checked == true)
        {
            listHobbies.Add(cbH4.Text);
        }
        //通過 e.NewValues["Hobbies"]賦值
        e.NewValues["Hobbies"] = string.Join(",", listHobbies.ToArray());
    }
}

 源碼下載:http://pan.baidu.com/s/1hqziMNE


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM