带分页和排序的可自定义可编辑 Datagrid

• 下载源代码文件 - 2 Kb

引言

本文档展示了如何创建一个带有分页、交替排序并且完全可编辑的自定义 DataGrid。

详细说明

在开发一些 asp.net 页面时，我花费了大量时间在 Datagrid 上。这里的代码是为了让工作更简单。只需将控件拖到页面上，完成一些属性，指向控制更新、删除的方法，你就可以拥有一个完整的可编辑网格。

[ToolboxData("<{0}:editableElphGrid runat="\""server\">
    </{0}:editableElphGrid>")]
//ParseChildren allow to work with templates inside the custom datagrid

[ParseChildren(true)]
public class editableElphGrid : System.Web.UI.WebControls.DataGrid
{
    /// <summary>

    /// Points to the method that returns a datatable with data

    /// Apunta a la funcion q devolvera un dataTable con los datos

    /// </summary>

    public delegate DataTable getData();
    /// <summary>

    /// Obtain data event 

    /// Evento de obtener datos

    /// </summary>

    public event getData GetData;
    /// <summary>

    /// Points to method(to update data)

    /// Apunta a un metodo q nos servira para modificar datos

    /// </summary>

    public delegate void updateData(int dataKey,DataGridCommandEventArgs e);
    /// <summary>

    /// Update data event

    /// </summary>

    public event updateData UpdateData;
    /// <summary>

    /// Points to method(delete data)

    /// Apunta al metodo q usaremos para eliminar los datos

    /// </summary>

    public delegate void deleteData(int dataKey,DataGridCommandEventArgs e);
    /// <summary>

    /// delete data event

    /// </summary>

    public event deleteData DeleteData; 
    /// <summary>

    /// Cancel data

    /// </summary>

    public delegate void cancelData(int dataKey,DataGridCommandEventArgs e);
    /// <summary>

    /// cancel data event

    /// </summary>

    public event cancelData CancelData;
    /// <summary>

    /// edit data

    /// </summary>

    public delegate void editData(int dataKey,DataGridCommandEventArgs e);
    /// <summary>

    /// edit data event

    /// </summary>

    public event editData EditData;
    // Note: the params passed on the delegates

    // dataKey: is the DataKey field of the edited/

    // canceled/updated/deleted row

    // e: for work with the cells of the grid

    /// <summary>

    /// First sorting field

    /// campo por el q se ordenara en la primera carga

    /// </summary>

    private string _cFirst="";
    /// <summary>

    /// First sorting field

    /// campo por el q se ordenara en la primera carga

    /// </summary>

    public string FirstSortingField
    {
        get
        {return _cFirst;}
        set
        {_cFirst=value;}
    }
    // Inicializamos el grid

    protected override void OnInit(EventArgs e)
    {
        //paginacion=true

        this.AllowPaging=true;
        //ordenacion=true

        this.AllowSorting=true;
        //evento cambio de pagina

        //ADD the events

        this.PageIndexChanged+=new DataGridPageChangedEventHandler(
              cPage_elphGrid);
        //evento ordenar

        this.SortCommand+=new DataGridSortCommandEventHandler(
               Order_elphGrid);
        //evento de cargar datos

        this.Load+=new EventHandler(elphGrid_Load);
        this.EditCommand+=new DataGridCommandEventHandler(Edit_elphGrid);
        this.CancelCommand+=new DataGridCommandEventHandler(Cancel_elphGrid);
        this.DeleteCommand+=new DataGridCommandEventHandler(Delete_elphGrid);
        this.UpdateCommand+=new DataGridCommandEventHandler(Update_elphGrid);
        //clear the columns

        //limpiamos las columnas

        this.Columns.Clear();
        //create the editComandColumn an deleteColumn

        //creamos las columnas de editar i eliminar

        EditCommandColumn col=new EditCommandColumn();
        col.ButtonType=ButtonColumnType.LinkButton;
        col.CancelText="Cancel";
        col.EditText="Edit";
        col.UpdateText="Update";
        this.Columns.Add(col);
        ButtonColumn delCol=new ButtonColumn();
        delCol.CommandName="Delete";
        delCol.ButtonType=ButtonColumnType.LinkButton;
        delCol.Text="Delete";
        this.Columns.Add(delCol);
    }
    private void elphGrid_Load(object sender, EventArgs e)
    {
        if(!this.Page.IsPostBack)
        {
            //changed Session object for Viewstate

            if(this.AllowSorting&&this._cFirst!="")
                this.ViewState.Add("_orderBy",this._cFirst);
            this.ViewState.Add("_orderType","ASC");
            this.DataSource = CreateDataSet();
            this.DataBind();
        }
    }
    private void cPage_elphGrid(object sender, 
             DataGridPageChangedEventArgs e)
    {
        //PAging

        this.CurrentPageIndex = e.NewPageIndex;
        this.DataSource = CreateDataSet();
        this.DataBind();
    }
    private ICollection CreateDataSet() 
    {
        //this.ObtenerDatos call a external function that return data

        DataTable dt=this.GetData();
        if(this.AllowSorting&&this.ViewState["_orderBy"]!=null)
        {
            //sort the grid

            if(this.ViewState["_orderType"].ToString() == "ASC")
                dt.DefaultView.Sort=(string)
                   this.ViewState["_orderBy"].ToString()+" ASC";
            else if(this.ViewState["_orderType"].ToString()=="DESC")
                dt.DefaultView.Sort=(string)this.ViewState["_orderBy"]+
                          " DESC";
        }
        return dt.DefaultView;
    }
    public void Order_elphGrid(object sender, DataGridSortCommandEventArgs e) 
    { 
        this.ViewState["_orderBy"]=(string)e.SortExpression;
        if(this.ViewState["_orderType"].ToString()=="ASC")
            this.ViewState["_orderType"]="DESC";
        else if(this.ViewState["_orderType"].ToString()=="DESC")
            this.ViewState["_orderType"]="ASC";
        this.DataSource = CreateDataSet();
        this.DataBind(); 
    }
    public void Edit_elphGrid(object sender, 
           System.Web.UI.WebControls.DataGridCommandEventArgs e)
    {
        int id=Convert.ToInt32(this.DataKeys[e.Item.ItemIndex]);
        this.EditData(id,e);
        this.EditItemIndex=e.Item.ItemIndex;
        this.DataSource = CreateDataSet();
        this.DataBind();
    }
    public void Delete_elphGrid(object sender, 
          System.Web.UI.WebControls.DataGridCommandEventArgs e)
    {
        int id=Convert.ToInt32(this.DataKeys[e.Item.ItemIndex]);
        this.DeleteData(id,e);
        this.EditItemIndex=-1;
        this.DataSource = CreateDataSet();
        this.DataBind();
    }
    public void Update_elphGrid(object sender, 
           System.Web.UI.WebControls.DataGridCommandEventArgs e) 
    {
        int id=Convert.ToInt32(this.DataKeys[e.Item.ItemIndex]);
        this.UpdateData(id,e);
        this.EditItemIndex=-1;
        this.DataSource = CreateDataSet();
        this.DataBind();
    }
    public void Cancel_elphGrid(object sender, 
            System.Web.UI.WebControls.DataGridCommandEventArgs e) 
    {
        int id=Convert.ToInt32(this.DataKeys[e.Item.ItemIndex]);
        this.CancelData(id,e);
        this.EditItemIndex=-1;
        this.DataSource = CreateDataSet();
        this.DataBind();
    }
}

好了，现在将控件添加到页面上，然后你必须填充字段。

DataKeyField：这是表的主键字段，行的唯一标识符。我设置这个是因为我在数据库操作中使用它，例如删除特定行等。

并在“事件”选项卡上：GetData、CancelData、EditData 和 DeleteData。

最后你应该得到类似这样的效果。

在 aspx 页面上

<cc1:editableElphGrid id="EditableElphGrid1" runat="server" 
    DataKeyField="intId"></cc1:editableElphGrid>

在代码隐藏文件中

protected elphControls.editableElphGrid EditableElphGrid1;
   
private void InitializeComponent()
{    
 this.EditableElphGrid1.DeleteData += 
   new elphControls.editableElphGrid.eliminarDatos(this.del);
 this.EditableElphGrid1.GetData += 
   new elphControls.editableElphGrid.obtenerDatos(this.obt);
this.EditableElphGrid1.EditData += 
   new elphControls.editableElphGrid.editarDatos(this.edit);
 this.EditableElphGrid1.UpdateData += 
   new elphControls.editableElphGrid.actualizarDatos(this.act);
 this.EditableElphGrid1.CancelData += 
   new elphControls.editableElphGrid.cancelarDatos(this.cncl);
 this.Load += new System.EventHandler(this.Page_Load);
}
private System.Data.DataTable obt()
{
OleDbConnection conn=new OleDbConnection(
    "Provider=Microsoft.Jet.OLEDB.4.0;Data source=E:\\bdProves.mdb");
 OleDbDataAdapter adapter=new OleDbDataAdapter("select * from tabla",conn);
 adapter.SelectCommand.CommandType=CommandType.Text;
 conn.Open();
 DataSet ds=new DataSet();
 adapter.Fill(ds,"aa");
 conn.Close();
 conn.Dispose();
 return ds.Tables["aa"];
}
private void edit(int dataKey, 
    System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
//here the logic asociated with edit comand... if you have

}
private void del(int dataKey, 
    System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
 //here the logic asociated with delete comand

}
private void cncl(int dataKey, 
    System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
 //here the logic asociated with Cancel comand

}
private void act(int dataKey, 
    System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
 //here the logic asociated with update comand

}

更新

将 session 改为 viewstate 来保存排序参数，现在你可以在同一页面上拥有两个网格。 另外，更改了第一个排序字段的声明，现在这不再是必需的。感谢 Zanoza。

结论

我认为这个网格是一个很好的定制 datagrid 的基础。希望它能有所帮助。欢迎对本文的任何评论。