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

2、官方示例

      2.1 ASPxGridView
                http://documentation.devexpress.com/#AspNet/CustomDocument5823
      2.2 PopUp
                http://documentation.devexpress.com/#AspNet/CustomDocument8289
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"] = "密码修改成功";

    }

}
 

Attachment List

DevExpress控件使用系列--ASPxGridView+Popup+Tab的更多相关文章

  1. DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  2. DevExpress控件使用系列--ASPxTreeList

      控件功能 结合列表控件及树控件的优点,在列表控件中实现类型树的多层级操作 官方说明 http://documentation.devexpress.com/#AspNet/clsDevExpres ...

  3. DevExpress控件的GridControl控件小结

    DevExpress控件的GridControl控件小结 (由于开始使用DevExpress控件了,所以要点滴的记录一下) 1.DevExpress控件组中的GridControl控件不能使横向滚动条 ...

  4. DevExpress控件学习总结（转）

    DevExpress控件学习总结   1.Navigation & Layout 1.1 Bar Manager 如果想在窗体或用户控件(user control)上添加工具条(bars)或弹 ...

  5. DevExpress控件的一些快捷操作

    用的DevExpress控件时,有一些操作并不太方便,根据我自己需要的封装了一些控件的事件,调用的时候直接绑定控件的事件就可以了 例如: this.ComboBoxEdit.KeyDown += Ct ...

  6. DevExpress控件库 开发使用经验总结3 制作项目安装包

    2015-01-27 使用DevExpress控件包开发C/S项目完成后,部署前需要制作本地安装包.本文还是使用“SetupFactory”安装工厂来制作安装包.在以前的系列文章中详细介绍过该工具的使 ...

  7. DevExpress控件库 开发使用经验总结1 DevExpress简介、安装、使用

    2015-01-24 最近公司开发的WinForm客户端图书行业ERP管理系统,界面端采用了DevExpress控件库.界面效果非常绚丽,类似于Office2007.2010的界面风格. 其中的控件功 ...

  8. DevExpress控件使用之多重坐标图形的绘制 z

    有时候,基于对一些年份.月份的统计,需要集成多个数值指标进行分析,因此就需要把多种数据放到一个图形里面展现,也成为多重坐标轴,多重坐标轴可以是多个X轴,也可以是Y轴,它们的处理方式类似.本文通过一个例 ...

  9. DevExpress控件与VS和.NET各个版本的支持情况

    如下图所示,绿色Yes代表支持,红色No代表不支持.对于有些人觉得装了dev后,vs工具箱没有,一般都是以下两大问题: 1.要么你的Dev的版本不支持你当前的VS版本,没有很正常. 2.要么你的项目的 ...

随机推荐

  1. 英特尔® 实感™ SDK 前置摄像头 (F200) 常见问题解答

    原文地址 https://software.intel.com/zh-cn/articles/intel-realsense-sdk-faq-for-front-facing-camera-f200? ...

  2. iOS-画板的实现

    先上一张效果图,有看下去的动力 再来一张工程图片 好,首先是对线的实体的封装,在LineEntity.h文件中创建一个点的数组 然后在LineEntity.m文件中,在初始化方法中给points变量开 ...

  3. [Silverlight] Visual Studio2010不能安装Silverlight4_Tools,提示语言不一致

    今天在装Silverlight4_Tools时出现“必须先安装与 Silverlight Tools 4 语言版本相一致的 Visual Studio 2010.Visual Web Develope ...

  4. ASP.NET MVC强制返回XML

    GlobalConfiguration.Configuration.Formatters.Remove(config.Formatters.JsonFormatter);

  5. wix xslt for adding node

    Using xslt to add new node item to wix source code. Original wix code: <Fragment> <Director ...

  6. Vim保存文件命令 ":wq" 与 ":x" 的区别

    CSDN转载 [1] Vim是Unix/Linux系统最常用的编辑器之一,在保存文件时,我通常选择":wq",因为最开始学习vim的时候,就只记住了几个常用的命令:也没有细究命令的 ...

  7. 【NPOI】.NET EXCEL导入导出开发包

    1.导出 //工作簿HSSFWorkbook HSSFWorkbook hssfworkbook = new HSSFWorkbook(); //ISheet页 ISheet sheet1 = hss ...

  8. 浅析 GRUB 如何加载 linux kernel

    前言 对于 GRUB 的加载流程,网上绝大部分都是写对 menu.lst, grub.cfg 这些 GRUB 配置文件的编写流程,就像是写脚本语言一样,用些关键字就能让 PC机能正确启动桌面 Linu ...

  9. javascript里面技巧整理

    web develop tools secrets: http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/ 1.Date new Date( ...

  10. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...