65.9K
CodeProject 正在变化。 阅读更多。
Home

用于数据管理的数据GridView自定义控件

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (8投票s)

2016年11月14日

CPOL

9分钟阅读

viewsIcon

51868

downloadIcon

2557

用于管理数据的 DataGridView 自定义控件

引言

本文将向用户展示如何为您的 ASP.NET 解决方案使用自定义数据网格工具,以实现数据的显示、排序、过滤、图表制作和提取。自定义数据网格工具对于创建和管理数据非常有用。

 

解决方案解决的问题

默认的 ASP.NET datagrid 非常基础,您想在应用程序中添加任何额外功能都需要进行大量的编程,包括分页、过滤、图表制作和数据提取。本解决方案无需任何额外编码即可提供多项内置功能。它不仅简化和优化了您的编码时间,还增加了丰富的 UI 组件,为您提供了广泛的功能和能力。扩展的 datagrid 具有内置功能,可以过滤数据、多选记录、提供标题、分页、排序数据、对数据集进行图表制作和图形绘制,以及以各种格式提取数据,而无需您进行任何额外工作。

这对其他用户有什么帮助

本项目将通过消除开发复杂编码以向 datagrid 添加附加功能的需要来帮助开发人员。这将降低解决方案的复杂性,提高可用性,并使您的 datagrid 功能丰富,而无需编写多个编码功能来提供附加功能。

代码如何工作

我在 Visual Studio 中为 DataGridView 开发了一个 扩展 类。新的 DataGridView 提供了通常需要大量编程才能完成的广泛功能。在使用自定义 DataGridView 时,您将能够过滤 datagrid 中的数据、提取数据、对数据进行排序和分页,而无需编写任何额外代码。下面的演练详细介绍了如何设置代码并使其正常工作。

遇到的问题和学到的东西

在开发解决方案的过程中,我遇到了几个问题,包括跟踪会话状态和视图状态值。组织扩展的功能列表和管理解决方案中的事件。扩展 ASP.NET 控件并非 最简单的 任务,需要大量时间来测试和调试错误。我了解到,利用动态功能来提取、过滤、分页和排序 datagrid 中的数据,可以为最终用户提供出色的可用性体验,并缩短开发人员的编程时间。由于解决方案被打包在一个库中,因此向库 添加更新和功能 非常方便,并且可以更新整个系统,而无需更新单个控件。  图表功能仍存在一些问题,具体取决于所选的图表类型。  系统取决于用户理解标签和分组以显示不同图表的能力。  图表部分将继续更新。

背景

几年前,我想创建一个用于在 datagrid 中管理数据的工具。添加 datagrid、分页、过滤和提取方法是一项繁琐的任务,我想要一个类似于 datagridview 的控件,它内置了所有功能,这样我就不必编写它们了。我最终构建了这个工具,并想与世界分享。

Using the Code

使用自定义工具非常简单。下面是一个关于使用自定义控件创建基本 WinForms Web 应用程序的演练。

打开 Visual Studio 并创建一个使用 Framework 4.5 或更高版本的空白 Web 应用程序。

选择一个空白的 WinForms 应用程序。

Microsoft 默认添加了许多引用,但演示开始时您只需要

为应用程序创建一个 default.aspx 页面

右键单击您的引用并添加对 CSDRGridView.dll 的引用。CSDRGridView.dll 包含在本文中。

通过添加现有项,将样本 TestData.csv 文件添加到解决方案。随附有样本解决方案。

通过右键单击工具箱的通用部分并选择“选择项”将 CSDRGridView 添加到您的工具箱控件中。

浏览到要添加的控件。

从工具箱中,您将看到新的 gridview 控件。打开 Default.aspx 设计器视图并将 gridview 拖到页面上。

转到代码视图页面,确保其设置了下方红色所示的列和引用

如果您想复制并粘贴,以下是需要添加的代码。

// <%@ Register Assembly="CSDRGridView" Namespace="CSDRGridView.Controls" TagPrefix="cc1" %>
// <%@ Register Assembly="CSDRGridView" Namespace="CSDRGridView.Controls.Fields" TagPrefix="cc1" %>
<cc1:GridView ID="gvCSDRPagerName" runat="server" CustomPagerSettingsMode="CSDRPager"
    CustomSkin="GreyBlackWhite" DataKeyNames="BusinessEntityID" SkinID="" DefaultSecurity="Admin"
    TableTitle="Sample GridView Data" ShowChartButton="true">
    <PagerSettings Position="TopAndBottom" />
    <EmptyDataTemplate>
        There are no users defined for the table...
    </EmptyDataTemplate>
    <Columns>
        <cc1:BoundField DataField="Title" 
HeaderText="Title" HeaderStyle-Width="60" SortExpression="Title" 
ShowOnExtract="true" />
        <cc1:BoundField DataField="FirstName" 
HeaderText="First Name" HeaderStyle-Width="100" SortExpression="FirstName" 
ShowOnExtract="True" />
        <cc1:BoundField DataField="LastName" 
HeaderText="Last Name" HeaderStyle-Width="100" SortExpression="LastName" 
ShowOnExtract="True" />
        <cc1:BoundField DataField="EmailAddress" 
HeaderText="Email" SortExpression="EmailAddress" ShowOnExtract="True" />
        <cc1:BoundField DataField="AddressLine1" 
HeaderText="Address" SortExpression="AddressLine1" ShowOnExtract="True" />
        <cc1:BoundField DataField="City" 
HeaderText="City" SortExpression="City" ShowOnExtract="True" />
        <cc1:BoundField DataField="StateProvinceName" 
HeaderText="State" SortExpression="StateProvinceName" ShowOnExtract="True" />
        <cc1:BoundField DataField="CountryRegionName" 
HeaderText="Country" SortExpression="CountryRegionName" ShowOnExtract="True" />
        <cc1:BoundField DataField="PostalCode" 
HeaderText="Zip Code" HeaderStyle-Width="60" SortExpression="PostalCode" 
ShowOnExtract="True" />
    </Columns>
</cc1:GridView>

Default.aspx.cs 的代码隐藏页面中,添加函数并将 datasource 设置如下所示

//using System;
//using System.Data;
//using System.IO;
//
//namespace SampleGridViewApplication
//{
//    public partial class Default : System.Web.UI.Page
//    {
//        protected void Page_Load(object sender, EventArgs e)
//        {
//            if (!IsPostBack)
//            {
//                gvCSDRPagerName.DataSource = GetXMLDataTable();
//                gvCSDRPagerName.DataBind();
//            }
//        }
//
//        private DataTable GetXMLDataTable()
//        {
//            StreamReader oStreamReader = new StreamReader(Server.MapPath("~/TestData.csv"));
//
//            DataTable oDataTable = null;
//            int RowCount = 0;
//            string[] ColumnNames = null;
//            string[] oStreamDataValues = null;
//            //using while loop read the stream data till end
//            while (!oStreamReader.EndOfStream)
//            {
//                String oStreamRowData = oStreamReader.ReadLine().Trim();
//                if (oStreamRowData.Length > 0)
//                {
//                    oStreamDataValues = oStreamRowData.Split(',');
//                    //Bcoz the first row contains column names, we will populate
//                    //the column name by
//                    //reading the first row and RowCount-0 will be true only once
//                    if (RowCount == 0)
//                    {
//                        RowCount = 1;
//                        ColumnNames = oStreamRowData.Split(',');
//                        oDataTable = new DataTable();
//
//                        //using foreach looping through all the column names
//                        foreach (string csvcolumn in ColumnNames)
//                        {
//                            DataColumn oDataColumn = new DataColumn(csvcolumn.ToUpper(), typeof(string));
//
//                            //setting the default value of empty.string to newly created column
//                            oDataColumn.DefaultValue = string.Empty;
//
//                            //adding the newly created column to the table
//                            oDataTable.Columns.Add(oDataColumn);
//                        }
//                    }
//                    else
//                    {
//                        //creates a new DataRow with the same schema as of the oDataTable            
//                        DataRow oDataRow = oDataTable.NewRow();
//
//                        //using foreach looping through all the column names
//                        for (int i = 0; i < ColumnNames.Length; i++)
//                        {
//                            oDataRow[ColumnNames[i]] = oStreamDataValues[i] == null ? 
//                                     string.Empty : oStreamDataValues[i].ToString();
//                        }
//
//                        //adding the newly created row with data to the oDataTable       
//                        oDataTable.Rows.Add(oDataRow);
//                    }
//                }
//            }
//            //close the oStreamReader object
//            oStreamReader.Close();
//            //release all the resources used by the oStreamReader object
//            oStreamReader.Dispose();
//            return oDataTable;
//        }
//    }
//}

 

在解决方案的 bin 文件夹中,您需要复制下方所示的引用。  自定义控件的提取功能依赖于这些 DLL 库。

这些引用已包含在附带解决方案的资源目录中。

 

现在运行项目,并使用自定义 gridview 来搜索、提取和管理您的数据!

参考资料

由于自定义 gridview 是 Microsoft ASP.NET DataGridView 对象的扩展,因此您可以使用所有内置功能以及各种新功能。您可以通过多种方式自定义 gridview,例如启用和禁用提取按钮。管理对最终用户可见的按钮。自定义 gridview 的外观,以及其他几项功能。所有功能均列在下方

AutoGenerateCheckBoxColumn

(truefalse)。如果您不想要自动生成的 checkbox 列及其功能,请将此值设置为 false,则不会显示 checkbox 列。默认值为 true

ChartWindowAddChartLabelsDropDownFieldSelectText

允许您设置图表窗口下拉列表的默认“请选择”文本。

ChartWindowChartFieldValueLabelText

图表字段值标签的自定义文本

ChartWindowChartGroupByLabelText

图表分组值标签的自定义文本

ChartWindowChartLabelText

图表标签值标签的自定义文本

ChartWindowChartOperationText

图表操作值标签的自定义文本

ChartWindowChartTypeText

图表类型值标签的自定义文本

ChartWindowHeaderText

图表窗口的自定义标题文本

CustomPagerSettingsMode

(CSDRPagerNonePagePreviousNext)。系统中共有 3 种分页设置模式。CSDRPager 是自定义分页器,显示管理按钮、搜索和提取功能。None 显示无分页,PagePreviousNext 仅显示上一页和下一页的分页功能。

CustomSkin
为皮肤设置自定义外观和感觉
  1. BlueWhiteTurquoise
  2. BlueWhiteYellow
  3. GreyBlackWhite
  4. GreyWhiteBlack

CustomSkinAlternateBackgroundColorDisabled

(truefalse) 如果您不希望有交替的背景颜色,请将此属性设置为 true。默认为 false

CheckBoxColumnIndex

显示 checkbox 列在 datagrid 中的位置。默认值为 0(第一列)。

DefaultSecurity

(noneReadOnlyAdminAddEditDeleteExportSearch)。用户可以通过设置网格的默认安全设置,轻松设置用户可以执行的操作的安全性。默认值为 none。

EnableSortGraphic

(truefalse)。如果您不想要已排序列上的向上和向下箭头,请将此值设置为 false。默认为 true

FilterWindowAddFilterText

允许您为“添加过滤器”窗口设置特定文本

FilterWindowAddFilterDropDownFieldSelectText

允许您为“添加过滤器”窗口的下拉列表字段选择设置特定文本

FilterWindowCurrentFiltersHeaderText

允许您为当前过滤器窗口的标题设置特定文本

FilterWindowHeaderText

允许您为“添加过滤器”窗口的标题设置特定文本

OnExportCSV (事件)

希望在导出到 CSV 时触发自定义事件而不是默认事件,请在此处添加。

OnExportExcel (事件)

希望在导出到 Excel 时触发自定义事件而不是默认事件,请在此处添加。

OnExportHTML (事件)

希望在导出到 HTML 时触发自定义事件而不是默认事件,请在此处添加。

OnExportPDF (事件)

希望在导出到 PDF 时触发自定义事件而不是默认事件,请在此处添加。

OnExportWord (事件)

希望在导出到 Word 时触发自定义事件而不是默认事件,请在此处添加。

OnItemChecked (事件)

如果您希望在选中项目时触发自定义事件。

ShowAddButton

(TrueFalse) 如果您不想看到“添加”按钮,请将此值设置为 false。默认为 true

ShowChartButton (TrueFalse) 如果您想看到“图表”按钮,请将此值设置为 true。默认为 false

ShowDeleteButton

(TrueFalse) 如果您不想看到“删除”按钮,请将此值设置为 false。默认为 true

ShowEditButton

(TrueFalse) 如果您不想看到“编辑”按钮,请将此值设置为 false。默认为 true

ShowExportCSV

(TrueFalse) 如果您不想看到 CSV 导出按钮,请将此值设置为 false。默认为 true

ShowExportExcel

(TrueFalse) 如果您不想看到 Excel 导出按钮,请将此值设置为 false。默认为 true

ShowExportHTML

(TrueFalse) 如果您不想看到 HTML 导出按钮,请将此值设置为 false。默认为 true

ShowExportPDF

(TrueFalse) 如果您不想看到 PDF 导出按钮,请将此值设置为 false。默认为 true

ShowExportWord

(TrueFalse) 如果您不想看到 Word 导出按钮,请将此值设置为 false。默认为 true

ShowExtractButton

(TrueFalse) 如果您想完全禁用提取功能,可以将此值设置为 false,则不会显示提取按钮。默认为 true

ShowSearchButton

(TrueFalse) 如果您想完全禁用搜索功能,可以将此值设置为 false,则不会显示搜索按钮。默认为 true

ShowTableTitle

(TrueFalse) 如果您不想在页面顶部看到表格标题,请将此值设置为 false。如果设置了标题值,则默认为 true

ShowViewButton

(TrueFalse) 如果您不想看到“查看项”按钮,请将此值设置为 false。默认为 true

ToolTipAddButton

“添加”按钮工具提示的自定义文本

ToolTipCloseExportWindow

关闭导出窗口按钮工具提示的自定义文本

ToolTipCloseFilterWindow

关闭过滤器窗口按钮工具提示的自定义文本

ToolTipDeleteButton

“删除”按钮工具提示的自定义文本

ToolTipEditButton

“编辑”按钮工具提示的自定义文本

ToolTipExportCSV

导出 CSV 按钮工具提示的自定义文本

ToolTipExportExcel

导出 Excel 按钮工具提示的自定义文本

ToolTipExportHTML

导出 HTML 按钮工具提示的自定义文本

ToolTipExportPDF

导出 PDF 按钮工具提示的自定义文本

ToolTipExportWord

导出 Word 按钮工具提示的自定义文本

ToolTipExtractButton

“提取”按钮工具提示的自定义文本

ToolTipFilterWindowDeleteFilterText

过滤器窗口“删除过滤器”按钮工具提示的自定义文本

ToolTipFilterWindowSaveFilterOptionText

过滤器窗口“保存过滤器选项”按钮工具提示的自定义文本

ToolTipFirstPageButton

分页“第一页”按钮工具提示的自定义文本

ToolTipLastPageButton

分页“最后一页”按钮工具提示的自定义文本

ToolTipNextPageButton

分页“下一页”按钮工具提示的自定义文本

ToolTipPrevPageButton

分页“上一页”按钮工具提示的自定义文本

ToolTipRefreshButton

“刷新”按钮工具提示的自定义文本

ToolTipSearchButton

“刷新”按钮工具提示的自定义文本

ToolTipViewButton

“查看”按钮工具提示的自定义文本

使用系统的示例:这里是 一个 YouTube 视频,演示如何使用自定义控件。

历史

  • 初始文档创建
  • 消除了输入许可证密钥的需求
  • 添加了对丢失配置设置“自定义皮肤”的引用
  • 改进了无效许可证密钥错误的调试
  • 包含了 DLL 资源,以使提取功能正常工作
  • 更新了库,用于设置数据网格按钮的自定义文本以支持多语言。
  • 解决了许可证密钥错误,并从需求中删除。
  • 解决了主页中数据集的问题。
  • 集成了 Chart.js 以可视化数据集。
  • 添加了将图表保存为图像的功能。
  • 增加了演示数据集的大小,以更好地演示分页和图表功能。
© . All rights reserved.