DevExpress控件使用系列--ASPxGridView+Popup+Tab

 

1、控件功能
     列表控件展示数据、弹框控件执行编辑操作、Tab控件实现多标签编辑操官方说明

2、官方示例

      2.1 ASPxGridView
                http://documentation.devexpress.com/#AspNet/CustomDocument5823

      2.2 PopUp
                http://documentation.devexpress.com/#AspNet/CustomDocument8289

      2.3 Tab
　　　　http://documentation.devexpress.com/#AspNet/CustomDocument10035

3、使用说明
      3.1 aspx页面说明

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
    AutoEventWireup="true" CodeFile="DemoGridView.aspx.cs" Inherits="Demo_DemoGridView" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphJs" runat="Server">
    <script type="text/javascript">
        var key = "Id";
        function Menu_Click(s, e) {
            if (e.item.name == "add") {
                grid.AddNewRow();
            }
        }

        //自定义命令
        function CustomButtonClick(s, e) {
            var value = s.GetRowKey(e.visibleIndex);
            AddCollection(key, value);
            if (e.buttonID == "SetPasswordButton") {   //如果点击的是【重置密码】链接，则打开
                PopupSetPassword.Show();
            }
        }
        function SetPasswordClick(s, e) {
            if (true) {
                PopupSetPassword.PerformCallback(txtPwd.GetText());  //触发后台事件，并传参数
            }
            else { alert("两次密码不一致！"); }
        }

        //键值对，和服务器端通信 
        function AddCollection(key, value) {
            if (HiddenField.Get(key) == null) {
                HiddenField.Add(key, value);
            }
            else {
                HiddenField.Set(key, value);
            }
        }
        function PopupSetPassword_endCallback(s, e) {
            PopupSetPassword.Hide();
            Toast.Show(s.cp_retValue);
        }

        //省市县
        var lastCountry = null;
        var lastCity = null;
        function OnCountryChanged(cmbCountry) {
            if (grid.GetEditor("CityCode").InCallback())
                lastCountry = cmbCountry.GetValue().toString();
            else {
                lastCountry = cmbCountry.GetValue().toString();

                //触发后台的grid_CellEditorInitialize事件，重新绑定省市县信息
                grid.GetEditor("CityCode").PerformCallback(cmbCountry.GetValue().toString());
                grid.GetEditor("TownCode").PerformCallback(lastCountry + "," + lastCity);
            }
        }
        function OnCityChanged(cmbCity) {
            //Returns a value that determines whether a callback request sent by a web control is being currently processed on the server side. 
            if (grid.GetEditor("TownCode").InCallback())
                lastCity = cmbCity.GetValue().toString();
            else {
                //触发onchagne事件
                grid.GetEditor("TownCode").PerformCallback(lastCountry + "," + cmbCity.GetValue().toString()); 
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="c1" runat="Server">
  
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="c2" runat="Server">
    <dx:ASPxGridView runat="server" ID="grid" Width="100%" ClientInstanceName="grid"
        KeyFieldName="Id" OnRowInserting="grid_RowInserting" OnRowDeleting="grid_RowDeleting"
        OnRowUpdating="grid_RowUpdating" AutoGenerateColumns="False" OnHtmlEditFormCreated="grid_HtmlEditFormCreated"
        OnCellEditorInitialize="grid_CellEditorInitialize">
        <ClientSideEvents CustomButtonClick="CustomButtonClick" />
        <Columns>
            <dx:GridViewDataTextColumn FieldName="TrueName" Caption="真实姓名" VisibleIndex="3">
            </dx:GridViewDataTextColumn>
            <dx:GridViewDataTextColumn FieldName="EnterpriseName" Caption="企业" VisibleIndex="1">
                <%--新增、编辑窗体不显示该列--%>
                <EditFormSettings Visible="False" />
            </dx:GridViewDataTextColumn>
            <dx:GridViewDataComboBoxColumn FieldName="UserTypeName" VisibleIndex="3" Caption="用户类型">
                <EditFormSettings Visible="False" />
            </dx:GridViewDataComboBoxColumn>
            <%--该列在列表窗体不显示--%>
            <dx:GridViewDataTextColumn FieldName="Tel" VisibleIndex="6" Caption="电话" Visible="false">
                <EditFormSettings Visible="True" />
            </dx:GridViewDataTextColumn>
            <%--省市县联动--%>
            <dx:GridViewDataComboBoxColumn FieldName="ProvinceCode" VisibleIndex="11" Caption="省编码"
                Visible="false">
                <EditFormSettings Visible="True" />
                <PropertiesComboBox>
                    <ClientSideEvents SelectedIndexChanged="function(s, e) { OnCountryChanged(s); }">
                    </ClientSideEvents>
                </PropertiesComboBox>
            </dx:GridViewDataComboBoxColumn>
            <dx:GridViewDataComboBoxColumn FieldName="CityCode" VisibleIndex="12" Caption="市编码"
                Visible="false">
                <EditFormSettings Visible="True" />
                <PropertiesComboBox>
                    <ClientSideEvents SelectedIndexChanged="function(s, e) { OnCityChanged(s); }"></ClientSideEvents>
                </PropertiesComboBox>
            </dx:GridViewDataComboBoxColumn>
            <dx:GridViewDataComboBoxColumn FieldName="TownCode" VisibleIndex="13" Caption="县编码"
                Visible="false">
                <EditFormSettings Visible="True" />
            </dx:GridViewDataComboBoxColumn>
            <%--省市县联动--%>
            <%--命令按钮--%>
            <dx:GridViewCommandColumn VisibleIndex="17" Caption="操作" Width="120">
                <EditButton Visible="true" Text="编辑">
                </EditButton>
                <DeleteButton Visible="true" Text="删除">
                </DeleteButton>
                <CellStyle HorizontalAlign="Center">
                </CellStyle>
            </dx:GridViewCommandColumn>
            <dx:GridViewCommandColumn Caption="重置密码" VisibleIndex="18" AllowDragDrop="False">
                <CustomButtons>
                    <dx:GridViewCommandColumnCustomButton ID="SetPasswordButton" Text="重置密码">
                    </dx:GridViewCommandColumnCustomButton>
                </CustomButtons>
            </dx:GridViewCommandColumn>
        </Columns>
        <GroupSummary>
            <dx:ASPxSummaryItem FieldName="EnterpriseCount" DisplayFormat="{0}数量" SummaryType="Count" />
        </GroupSummary>
        <Templates>
            <%--新增、修改Tab控件--%>
            <EditForm>
                <div style="padding: 4px 4px 3px 4px">
                    <dx:ASPxPageControl runat="server" ID="pageControlUser" Width="100%">
                        <TabPages>
                            <dx:TabPage Text=" 基本信息" Visible="true">
                                <ContentCollection>
                                    <dx:ContentControl ID="ContentControl1" runat="server">
                                        <dx:ASPxGridViewTemplateReplacement ID="Editors" ReplacementType="EditFormEditors"
                                            runat="server"></dx:ASPxGridViewTemplateReplacement>
                                    </dx:ContentControl>
                                </ContentCollection>
                            </dx:TabPage>
                            <dx:TabPage Text="类型" Visible="true">
                                <ContentCollection>
                                    <dx:ContentControl ID="ContentControl2" runat="server">
                                        <dx:ASPxTreeList ID="OrgUnitTree" runat="server" AutoGenerateColumns="False" Width="100%"
                                            KeyFieldName="OrgUnitId" ParentFieldName="ParentId" ClientInstanceName="OrgUnitTree">
                                            <Columns>
                                                <dx:TreeListDataColumn FieldName="Name" Caption="名称">
                                                    <CellStyle Wrap="True">
                                                    </CellStyle>
                                                </dx:TreeListDataColumn>
                                                <dx:TreeListComboBoxColumn FieldName="TypeName" Caption="类型名称">
                                                    <EditFormSettings Visible="False" />
                                                </dx:TreeListComboBoxColumn>
                                                <dx:TreeListDataColumn FieldName="LinkMan" Caption="联系人" />
                                            </Columns>
                                            <SettingsBehavior AllowFocusedNode="True" AllowDragDrop="false" ProcessSelectionChangedOnServer="false" />
                                            <Settings VerticalScrollBarMode="Auto" ShowTreeLines="true" GridLines="Horizontal" />
                                            <SettingsPager PageSize="20" PageSizeItemSettings-Caption="每页显示:" AlwaysShowPager="True"
                                                CurrentPageNumberFormat="{0}" Mode="ShowPager">
                                                <Summary AllPagesText="总页数: {0} - {1} (共有 {2} 条数据)" Text="总页数: {0} - {1} (共有 {2} 条数据)" />
                                            </SettingsPager>
                                        </dx:ASPxTreeList>
                                    </dx:ContentControl>
                                </ContentCollection>
                            </dx:TabPage>
                        </TabPages>
                    </dx:ASPxPageControl>
                </div>
                <div style="text-align: right; padding: 2px 2px 2px 2px">
                    <dx:ASPxGridViewTemplateReplacement ID="UpdateButton" ReplacementType="EditFormUpdateButton"
                        runat="server"></dx:ASPxGridViewTemplateReplacement>
                    <dx:ASPxGridViewTemplateReplacement ID="CancelButton" ReplacementType="EditFormCancelButton"
                        runat="server"></dx:ASPxGridViewTemplateReplacement>
                </div>
            </EditForm>
        </Templates>
        <SettingsPopup EditForm-Modal="true" EditForm-HorizontalAlign="WindowCenter" CustomizationWindow-HorizontalAlign="WindowCenter"
            CustomizationWindow-VerticalAlign="WindowCenter">
            <EditForm Width="550px" Height="400px" HorizontalAlign="Center" Modal="True"></EditForm>
        </SettingsPopup>
        <Settings ShowGroupPanel="true" />
        <SettingsEditing Mode="PopupEditForm" />
    </dx:ASPxGridView>
    <dx:ASPxPopupControl ID="PopupSetPassword" runat="server" CloseAction="CloseButton"
        Modal="True" PopupVerticalAlign="WindowCenter" PopupHorizontalAlign="WindowCenter"
        AllowDragging="True" ShowFooter="True" Width="350px" Height="130px" HeaderText="重置密码"
        ClientInstanceName="PopupSetPassword" OnWindowCallback="PopupSetPassword_WindowCallback">
        <ClientSideEvents EndCallback="PopupSetPassword_endCallback" />
        <ContentCollection>
            <dx:PopupControlContentControl ID="PopupControlContentControl2" runat="server">
                <table class="dxgvEditFormTable_Glass">
                    <tr>
                        <td style="white-space: nowrap">
                            新密码：<dx:ASPxHiddenField runat="server" ID="HiddenField" ClientInstanceName="HiddenField">
                            </dx:ASPxHiddenField>
                        </td>
                        <td class="dxgvEditFormCell_Glass">
                            <dx:ASPxTextBox ID="txtPwd" Password="true" runat="server" Width="200" ClientInstanceName="txtPwd">
                            </dx:ASPxTextBox>
                        </td>
                    </tr>
                </table>
            </dx:PopupControlContentControl>
        </ContentCollection>
        <FooterTemplate>
            <div style="float: right; margin: 3px;">
                <dx:ASPxButton ID="RolesListButton" runat="server" Text="  确认  " AutoPostBack="False"
                    ClientSideEvents-Click="SetPasswordClick">
                </dx:ASPxButton>
            </div>
        </FooterTemplate>
    </dx:ASPxPopupControl>
</asp:Content>

      3.2 cs代码说明

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web.ASPxGridView;
using DevExpress.Web.ASPxTreeList;
using PanPass.YDYX.Model;
using PanPass.YDYX.BLL;
using DevExpress.Web.ASPxEditors;
using DevExpress.Web.ASPxTabControl;
using DevExpress.Web.ASPxClasses;
using PanPass.Commons;

public partial class Demo_DemoGridView : System.Web.UI.Page
{
    protected void AddError(Dictionary<GridViewColumn, string> errors, GridViewColumn column, string errorText)
    {
        if (errors.ContainsKey(column)) return;
        errors[column] = errorText;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

        }
    }

    //新增修改验证
    public override void ValidateRow(DevExpress.Web.Data.ASPxDataValidationEventArgs e)
    {

        if (e.NewValues["TrueName"] == null)
        {
            AddError(e.Errors, grid.Columns["TrueName"], "真实姓名不能为空.");
        }

        if (e.NewValues["LoginName"] != null && e.NewValues["LoginName"].ToString().Trim().Length < 3)
        {
            AddError(e.Errors, grid.Columns["LoginName"], "登录名长度不能小于3.");
        }

        if (grid.IsEditing && grid.IsNewRowEditing) //新增验证
        {

        }
        else if (!grid.IsNewRowEditing) //修改验证
        {

        }

        if (string.IsNullOrEmpty(e.RowError) && e.Errors.Count > 0) e.RowError = "请改正错误.";

    }

    //进入新增、修改页面时初始化或获取数据
    protected void grid_CellEditorInitialize(object sender, ASPxGridViewEditorEventArgs e)
    {

        if (grid.IsEditing) //编辑
        {

        }
        else //新增
        {

        }

        if (grid.IsEditing && e.Column.FieldName == "ProvinceCode")
        {
            ASPxComboBox combo = e.Editor as ASPxComboBox;
            //FillProvinceData(combo);  绑定省份信息
        }
        if (grid.IsEditing && e.Column.FieldName == "CityCode")
        {
            ASPxComboBox combo = e.Editor as ASPxComboBox;
            object val = grid.GetRowValuesByKeyValue(e.KeyValue, "ProvinceCode");
            //BindCbCityByProvince(combo, val);  绑定城市信息
        }
        if (grid.IsEditing && e.Column.FieldName == "TownCode")
        {
            ASPxComboBox combo = e.Editor as ASPxComboBox;
            object ProvinceCode = grid.GetRowValuesByKeyValue(e.KeyValue, "ProvinceCode");
            object CityCode = grid.GetRowValuesByKeyValue(e.KeyValue, "CityCode");
            //BindCountyByCity(combo, ProvinceCode, CityCode);  绑定县级信息
        }
    }

    void grid_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e)
    {
        if (e.ButtonID == "DeleteButtonID")
        {

        }
    }

    //绑定数据
    public void bindData()
    {

    }

    #region grid事件
    //初始化Page控件树
    protected void grid_HtmlEditFormCreated(object sender, ASPxGridViewEditFormEventArgs e)
    {

    }

    protected void grid_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e)
    {

        grid.CancelEdit();
        e.Cancel = true;
        bindData();
        //调用js方法
        //String js = "gv.PerformCallback();";
        //ScriptManager.RegisterStartupScript(Page, this.GetType(), "", js, true);
    }
    protected void grid_RowDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e)
    {
        grid.CancelEdit();
        e.Cancel = true;
        bindData();
    }
    protected void grid_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e)
    {
        grid.CancelEdit();
        e.Cancel = true;
        bindData();
    }
    #endregion

    protected void PopupSetPassword_WindowCallback(object source, DevExpress.Web.ASPxPopupControl.PopupWindowCallbackArgs e)
    {
        int userid = HiddenField.Get("UserId").ToInt().Value;
        //e.Parameter; 获取传递的参数  
        //userid获取在CustomButtonClick添加的隐藏内容

        PopupSetPassword.JSProperties["cp_retValue"] = "密码修改成功";

    }

}

 

Attachment List