DevExpress ASPxGridView 使用文档二：列

最新推荐文章于 2021-06-04 06:00:57 发布

weixin_34143774

最新推荐文章于 2021-06-04 06:00:57 发布

阅读量185

点赞数

文章标签： javascript ui ViewUI

转载请注明出处：http://surfsky.cnblogs.com/

---------------------------------------------------------
-- ASPxGridView 列
---------------------------------------------------------
基本列(GridViewDataColumn)
<dxwgv:GridViewDataColumn FieldName="Country" VisibleIndex="5" />

其他列
    <dx:GridViewDataTextColumn />          : 文本列
    <dx:GridViewDataMemoColumn />          : 长文本列
    <dx:GridViewDataImageColumn />         : 图像列
    <dx:GridViewDataBinaryImageColumn />   : 二进制图像列
    <dx:GridViewDataDateColumn />          : 日期列
    <dx:GridViewDataTimeEditColumn />      : 时间列
    <dx:GridViewDataComboBoxColumn />      : 组合框列
    <dx:GridViewDataDropDownEditColumn /> : 下拉框编辑列？
    <dx:GridViewCommandColumn />           : 命令按钮列
    <dx:GridViewDataButtonEditColumn />    : 编辑按钮列？
    <dx:GridViewDataCheckColumn />         : 复选框列
    <dx:GridViewDataColorEditColumn />     : 色彩列
    <dx:GridViewDataHyperLinkColumn />     : 超链接列
    <dx:GridViewDataProgressBarColumn />   : 进度条列
    <dx:GridViewDataSpinEditColumn />      : SpinEdit列

长文本列（GridViewDataMemoColumn）
    编辑时展现为多行文本框
    <dx:GridViewDataMemoColumn FieldName="ED_CMT" Caption="政企部核对结果"
        EditCellStyle-BackColor="Yellow"
        PropertiesMemoEdit-Rows="4"
        EditFormSettings-ColumnSpan="2"
        />

超链接列(GridViewDataHyperLinkColumn)
    <dx:GridViewDataHyperLinkColumn FieldName="ArticleId" Caption="查看" >
         <PropertiesHyperLinkEdit Text="查看" TextFormatString="" />
    </dx:GridViewDataHyperLinkColumn>

组合框列（GridViewDataComboBoxColumn）
    <dx:ASPxGridView OnCellEditorInitialize="grid_CellEditorInitialize">
        <dxwgv:GridViewDataComboBoxColumn FieldName="City" VisibleIndex="2">
            <PropertiesComboBox EnableSynchronization="False" EnableIncrementalFiltering="True" DropDownStyle="DropDown" />
        </dxwgv:GridViewDataComboBoxColumn>
    </dx:ASPxGridView>
    protected void grid_CellEditorInitialize(object sender, ASPxGridViewEditorEventArgs e)
    {
        // 用下拉框展示国家下的所有城市
        if(grid.IsEditing && e.Column.FieldName != "City" && !grid.IsNewRowEditing)
        {
            ASPxComboBox combo = e.Editor as ASPxComboBox;
            string country = (string)grid.GetRowValuesByKeyValue(e.KeyValue, "Country");
            FillCityCombo(combo, country);
        }
    }

命令按钮列（GridViewCommandColumn）
    标准按钮
        <dx:ASPxGridView runat="server" KeyFieldName="ID"
            OnRowDeleting="gv_RowDeleting" OnRowUpdating="gv_RowUpdating" OnRowInserting="gv_RowInserting"
            <Columns>
                <dxwgv:GridViewCommandColumn>
                    <EditButton   Visible="True" Text="修改" />
                    <DeleteButton Visible="true" Text="删除" />
                    <NewButton    Visible="True" Text="新建" />
                    <CancelButton Visible="true" Text="取消" />
                    <UpdateButton Visible="true" Text="保存" />
                    <ClearFilterButton Visible="true" Text="取消过滤" />
                </dxwgv:GridViewCommandColumn>
            </Columns>
        </dx:ASPxGridView>
        代码详见《ASPxGridView.DataBind》
    复选框列
        <dxwgv:GridViewCommandColumn ShowSelectCheckbox="True"/>
        <dxwgv:GridViewCommandColumn ShowSelectCheckbox="True">
             <HeaderTemplate>
                 <input type="checkbox" οnclick="grid.SelectAllRowsOnPage(this.checked);" title="选择/放弃选择本页的所有行" />
             </HeaderTemplate>
             <HeaderStyle HorizontalAlign="Center" />
        </dxwgv:GridViewCommandColumn>
    自定义按钮
        “删除”按钮
            <dx:GridViewCommandColumn Caption="删除">
                <CustomButtons>
                    <dx:GridViewCommandColumnCustomButton ID="DeleteFile" Text="删除" />
                </CustomButtons>
            </dx:GridViewCommandColumn>
            protected void gv_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e)
            {
                if (e.ButtonID == "DeleteFile")
                {
                    long fileId = Convert.ToInt64(gv.GetRowValues(e.VisibleIndex, "FileId"));
                    string fileName = gv.GetRowValues(e.VisibleIndex, "FileName").ToString();
                    string filePath = Common.Config.Path.PhysicalUploadFolder + gv.GetRowValues(e.VisibleIndex, "FilePath").ToString();
                    System.IO.File.Delete(filePath);
                    using (DbFile db = new DbFile())
                        db.DelFile(fileId);
                    ShowData(this.FileBatchId);
                }
            }
        “复制行”按钮
            <dx:ASPxGridView runat="server" OnCustomButtonCallback="grid_CustomButtonCallback">
                <Columns>
                    <dxwgv:GridViewCommandColumn VisibleIndex="0">
                        <CustomButtons>
                            <dxwgv:GridViewCommandColumnCustomButton Text="复制行" ID="Copy" />
                        </CustomButtons>
                    </dxwgv:GridViewCommandColumn>
                </Columns>
            </dx:ASPxGridView>
            Hashtable copiedValues;
            protected void grid_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e)
            {
                if(e.ButtonID == "Copy")
                {
                    copiedValues = new Hashtable();
                    foreach(string fieldName in copiedFields)
                        copiedValues[fieldName] = grid.GetRowValues(e.VisibleIndex, fieldName);
                    grid.AddNewRow();
                }
            }
            protected void grid_InitNewRow(object sender, DevExpress.Web.Data.ASPxDataInitNewRowEventArgs e)
            {
                if(copiedValues != null)
                  foreach(string fieldName in copiedFields)
                      e.NewValues[fieldName] = copiedValues[fieldName];
            }

非绑定列（GridViewDataTextColumn）
    <dxwgv:GridViewDataTextColumn FieldName="Total" UnboundType="Decimal" />
    protected void grid_CustomUnboundColumnData(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewColumnDataEventArgs e)
    {
        // Total = UnitPrice * Quantity
        if(e.Column.FieldName == "Total")
        {
            decimal price = (decimal)e.GetListSourceFieldValue("UnitPrice");
            int quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"));
            e.Value = price * quantity;
        }
    }

模板列（GridViewDataTextColumn）
    onhtmlrowcreated="grid_HtmlRowCreated"
    <dxwgv:GridViewDataTextColumn Name="Percent" Caption="Change" FieldName="Change">
        <DataItemTemplate>
            <asp:Image ID="changeImage" runat="server" ImageUrl="~/Images/arGreen.gif" Visible="false" GenerateEmptyAlternateText="True" />
            <asp:Label ID="changePercent" runat="server" Text="" />
            <a href="javascript:void(0);" οnclick="OnMoreInfoClick(this, '<%# Container.KeyValue %>')">更多...</a>
            <a href="../pages/download.ashx?path=../uploads/<%#Eval("FilePath")%>&name=<%#Eval("FileName") %> " >下载</a>
        </DataItemTemplate>
    </dxwgv:GridViewDataTextColumn>
    protected void grid_HtmlRowCreated(object sender, ASPxGridViewTableRowEventArgs e)
    {
        if (!grid.IsEditing && e.RowType == DevExpress.Web.ASPxGridView.GridViewRowType.Data)
        {
            // 操作 Label 控件
            Label label = grid.FindRowCellTemplateControl(e.VisibleIndex, null, "changePercent") as Label;
            decimal change = (decimal)grid.GetRowValues(e.VisibleIndex, "Change");
            label.Text = string.Format("{0:p}", change);
            // 操作 Image 控件
            System.Web.UI.WebControls.Image img = (System.Web.UI.WebControls.Image)grid.FindRowCellTemplateControl(e.VisibleIndex, null, "changeImage");
            img.Visible = false;
            if(change != 0)
            {
                img.Visible = true;
                img.ImageUrl = change < 0 ? "~/Images/arRed.gif" : "~/Images/arGreen.gif";
                label.ForeColor = change < 0 ? Color.Red : Color.Green;
            }
        }
    }
    注：模板列中的事件如何写？手工写事件，如btn.OnClick += ...;
    注：视图模板请参考文档《ASPxGridView.Templates》

------------------------------------------
-- 定制窗口
------------------------------------------
定制窗口（CustomizationWindow）
    说明：一个小窗口，展示隐藏的列，可供用户选择，拖动到表格中就会显示，反之则隐藏
    展示定制窗口（隐藏列为Region）
        <dxwgv:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" KeyFieldName="CustomerID" >
            <Columns>
                <dxwgv:GridViewDataColumn FieldName="ContactName" />
                <dxwgv:GridViewDataColumn FieldName="CompanyName" />
                <dxwgv:GridViewDataColumn FieldName="City" />
                <dxwgv:GridViewDataColumn FieldName="Region" Visible="false" />
                <dxwgv:GridViewDataColumn FieldName="Country" />
            </Columns>
            <SettingsCustomizationWindow Enabled="True" />
            <ClientSideEvents CustomizationWindowCloseUp="grid_CustomizationWindowCloseUp" />
        </dxwgv:ASPxGridView>
    在客户端控制显隐定制窗口
        function button1_Click(s, e) {
            if(grid.IsCustomizationWindowVisible())
                grid.HideCustomizationWindow();
            else
                grid.ShowCustomizationWindow();
            UpdateButtonText();
        }
        function grid_CustomizationWindowCloseUp(s, e) {
            UpdateButtonText();
        }
        function UpdateButtonText() {
            var text = grid.IsCustomizationWindowVisible() ? "Hide" : "Show";
            text += " Customization Window";
            button1.SetText(text);
        }
    相关的 Client API：
        ShowCustomizationWindow()
        HideCustomizationWindow()
        IsCustomizationWindowVisible()