DevExpress控件使用系列--ASPxGridView+Popup+Tab
1、控件功能
列表控件展示数据、弹框控件执行编辑操作、Tab控件实现多标签编辑操官方说明
2、官方示例
列表控件展示数据、弹框控件执行编辑操作、Tab控件实现多标签编辑操官方说明
2、官方示例
3、使用说明
3.1 aspx页面说明
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
