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="">

            </dx:GridViewDataTextColumn>

            <dx:GridViewDataTextColumn FieldName="EnterpriseName" Caption="企业" VisibleIndex="">

                <%--新增、编辑窗体不显示该列--%>

                <EditFormSettings Visible="False" />

            </dx:GridViewDataTextColumn>

            <dx:GridViewDataComboBoxColumn FieldName="UserTypeName" VisibleIndex="" Caption="用户类型">

                <EditFormSettings Visible="False" />

            </dx:GridViewDataComboBoxColumn>

            <%--该列在列表窗体不显示--%>

            <dx:GridViewDataTextColumn FieldName="Tel" VisibleIndex="" Caption="电话" Visible="false">

                <EditFormSettings Visible="True" />

            </dx:GridViewDataTextColumn>

            <%--省市县联动--%>

            <dx:GridViewDataComboBoxColumn FieldName="ProvinceCode" VisibleIndex="" Caption="省编码"

                Visible="false">

                <EditFormSettings Visible="True" />

                <PropertiesComboBox>

                    <ClientSideEvents SelectedIndexChanged="function(s, e) { OnCountryChanged(s); }">

                    </ClientSideEvents>

                </PropertiesComboBox>

            </dx:GridViewDataComboBoxColumn>

            <dx:GridViewDataComboBoxColumn FieldName="CityCode" VisibleIndex="" Caption="市编码"

                Visible="false">

                <EditFormSettings Visible="True" />

                <PropertiesComboBox>

                    <ClientSideEvents SelectedIndexChanged="function(s, e) { OnCityChanged(s); }"></ClientSideEvents>

                </PropertiesComboBox>

            </dx:GridViewDataComboBoxColumn>

            <dx:GridViewDataComboBoxColumn FieldName="TownCode" VisibleIndex="" Caption="县编码"

                Visible="false">

                <EditFormSettings Visible="True" />

            </dx:GridViewDataComboBoxColumn>

            <%--省市县联动--%>

            <%--命令按钮--%>

            <dx:GridViewCommandColumn VisibleIndex="" Caption="操作" Width="">

                <EditButton Visible="true" Text="编辑">

                </EditButton>

                <DeleteButton Visible="true" Text="删除">

                </DeleteButton>

                <CellStyle HorizontalAlign="Center">

                </CellStyle>

            </dx:GridViewCommandColumn>

            <dx:GridViewCommandColumn Caption="重置密码" VisibleIndex="" 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="" 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="" 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 < )

        {

            AddError(e.Errors, grid.Columns["LoginName"], "登录名长度不能小于3.");

        }

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

        {

        }

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

        {

        }

        if (string.IsNullOrEmpty(e.RowError) && e.Errors.Count > ) 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"] = "密码修改成功";

    }

}

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

Attachment List

DevExpress控件使用系列--ASPxGridView+Popup+Tab的相关教程结束。

相关推荐

vue怎么实现滚动tab跟随切换效果

vue项目中如何使用tab切换组件

Vue.js实现tab切换效果

vue如何实现滚动tab跟随切换效果

Flutter系列文章-Flutter 插件开发

spring-mvc 系列：注解开发（SpringMVCConfig、SpringConfig、AbstractAnnotationConfigDispatcherServletInitializer详细配置）

3、数据库：Oracle部署 - 系统部署系列文章

在DevExpress中使用BandedGridView表格实现多行表头的处理