ASP.NET GridView中使用搜索框（SearchableGridView）

 

 

朱祁林

介绍:

我正在搜寻一种方法实现在ASP.NET GridView控件包含搜索框。我找不到一个完美的解决方案，决定自己去实现它。这里所以写出我的解决方案。

为什么使用这种方案？

您可以使用此种方案和实施行的表格过滤变得非常容易。搜索和过滤操作可以由公正处理的搜索事件引发。此外，该GridView还可以设置选项以显示行序列号，行的总数，并显示页眉和页脚即使没有行在GridView可用。 （默认情况下，页眉和页脚是隐藏,当GridView没有数据行。）

该解决方案

我做了什么

1.我扩展GridView和创建了一个SearchableGridView类。
2.添加了一个TemplateColumn显示行数。

3. 在页脚,添加了控件来处理搜查事件。
4.当开启搜索的时候,，传递搜索字符串给触发的事件。

代码：

1、通过创建了一个SearchableGridView来扩展GridView，实现在Gridview的页脚有一个搜索框.

public   class  NumberColumn : ITemplate
{
     public   void  InstantiateIn(Control container)
    {
    }
}

 

在SearchableGridView类中，我重写的OnInit函数添加模板的第一列显示的行序号，如果ShowRowNumber标记将被打开。

  

Code
protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    //If showrownumber option is turned on then add 
    //the template column as the first column.
    if (!IsDesign() && ShowRowNumber) 
    {
        TemplateField tmpCol = new TemplateField();
        NumberColumn numCol = new NumberColumn();
        tmpCol.ItemTemplate = numCol;
        // Insert this as the first column
        this.Columns.Insert(0, tmpCol);
    }
}

 

当每一行创建时,该OnRowCreated方法被执行。在此期间时，对创建的行类型的不同，在表尾,我们添加搜索控件和显示行数量label，在表身,添加行数，在表头,该添加列标题。

 

  

Code
protected override void OnRowCreated(GridViewRowEventArgs e)
{
    base.OnRowCreated(e);
    if (!IsDesign()) //During Runtime
    {
        if (e.Row.RowType == DataControlRowType.Footer)
        {
            //If ShowFooter is set to true
            if (ShowFooter && e.Row.Cells.Count > 0)
            {
                //If TotalRows has to be shown
                if (ShowTotalRows)
                {
                    e.Row.Cells[0].Text = ViewState[NO_OF_ROWS] + " Rows.";
                }
                if (e.Row.Cells[e.Row.Cells.Count - 1].Controls.Count == 0)
                {
                    //Create the search control
                    Table table = new Table();
                    table.Style.Add("width", "100%");
                    table.Style.Add("align", "right");
                    TableRow tr = new TableRow();
                    TableCell tc = new TableCell();
                    tc.Style.Add("align", "right");
                    tc.Style.Add("width", "100%");
                    //Populate the dropdownlist with the Ids
                    //of the columns to be filtered
                    if (_ddlFinder.Items.Count == 0)
                        SetFilter();
                    _btnSearch.Width = 20;
                    _btnSearch.Height = 20;
                    _btnSearch.ImageAlign = ImageAlign.AbsMiddle;
                    _btnSearch.AlternateText = "Search";
                    //Assign the function that is called when search button is clicked
                    _btnSearch.Click += new ImageClickEventHandler(_btnSearch_Click);
                    
                    tc.Controls.Add(_ddlFinder);
                    tc.Controls.Add(_tbSearch);
                    tc.Controls.Add(_btnSearch);
                    tr.Cells.Add(tc);
                    table.Rows.Add(tr);
                    _pnlSearchFooter.Controls.Add(table);
                    e.Row.Cells[e.Row.Cells.Count - 1].Controls.Add(_pnlSearchFooter);
                
                }
            }
        }
        if (e.Row.RowType == DataControlRowType.Header)
        {
            // If ShowHeader is set to true and 
            // If Row number has to be shown
            if (ShowRowNumber && ShowHeader) 
            {
                e.Row.Cells[0].Text = "Sno";
            }
        }
        else if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if (ShowRowNumber)
            {
                //Set the row number in every row
                e.Row.Cells[0].Text = (e.Row.RowIndex + 
                  (this.PageSize * this.PageIndex) + 1).ToString();
            }
        }
    }
}

 

该SearchableGridView的SearchFilters属性设置的搜索选项的下拉列表的值。它的Text属性对应的显示名称在DropDownList和列表项的值属性是数据源的列名。

 

public   void  SetFilter()
{
    _ddlFinder.Items.Clear();
     // Copy the items to the dropdownlist
     foreach  (ListItem li  in  SearchFilters)
        _ddlFinder.Items.Add(li);
}

 

现在，让我们进入到搜索的事件处理。为此，我创建了一个委托和事件SearchGrid，搜索按钮时被击中。搜索字符串形成使用语法_ddlFinder.SelectedValue + " like '" + _tbSearch.Text.Trim() + "%'".

 

 

Code
public delegate void SearchGridEventHandler(string _strSearch);
public event SearchGridEventHandler SearchGrid;
void _btnSearch_Click(object sender, ImageClickEventArgs e)
{
    string sSearchText = ConstructSearchString();
    OnSearchGrid(sSearchText);
}
protected string ConstructSearchString()
{
    string _strText = _tbSearch.Text.Trim();
    if (_strText == string.Empty)
        return string.Empty;
    return _ddlFinder.SelectedValue + " like '" + _strText + "%'";
}
protected void OnSearchGrid(string _strSearch)
{
    if (SearchGrid != null)
    {
        SearchGrid(_strSearch);
    }
}

 

显示页脚时,当没有返回任何行
GridView的默认属性是隐藏的页眉和页脚时没有行被绑定到它。设置一个空项目模板只可以显示模板而不是页眉或页脚。在我们的情况，页脚，必须始终显示，不论绑定到SearchableGridView行数，因为搜索选项应该是可见的。要做到这一点，我不得不重写CreateChildControls方法如下：

 

Code
protected override int CreateChildControls(System.Collections.IEnumerable dataSource, 
                                           bool dataBinding)
{
    int count = base.CreateChildControls(dataSource, dataBinding);
    //  no rows in grid. create header and footer in this case
    if (count == 0 && (ShowEmptyFooter || ShowEmptyHeader))
    {
        //  create the table
        Table table = this.CreateChildTable();
        DataControlField[] fields;
        if (this.AutoGenerateColumns)
        {
            PagedDataSource source = new PagedDataSource();
            source.DataSource = dataSource;
            System.Collections.ICollection autoGeneratedColumns = 
                                           this.CreateColumns(source, true);
            fields = new DataControlField[autoGeneratedColumns.Count];
            autoGeneratedColumns.CopyTo(fields, 0);
        }
        else
        {
            fields = new DataControlField[this.Columns.Count];
            this.Columns.CopyTo(fields, 0);
        }
        if (ShowEmptyHeader)
        {
            //  create a new header row
            GridViewRow headerRow = base.CreateRow(-1, -1, DataControlRowType.Header, 
                                                   DataControlRowState.Normal);
            this.InitializeRow(headerRow, fields);
            // Fire the OnRowCreated event to handle showing row numbers
            OnRowCreated(new GridViewRowEventArgs(headerRow));
            //  add the header row to the table
            table.Rows.Add(headerRow);
        }
        //  create the empty row
        GridViewRow emptyRow = new GridViewRow(-1, -1, DataControlRowType.EmptyDataRow, 
                                               DataControlRowState.Normal);
        TableCell cell = new TableCell();
        cell.ColumnSpan = fields.Length;
        cell.Width = Unit.Percentage(100);
        //  respect the precedence order if both EmptyDataTemplate
        //  and EmptyDataText are both supplied 
        if (this.EmptyDataTemplate != null)
        {
            this.EmptyDataTemplate.InstantiateIn(cell);
        }
        else if (!string.IsNullOrEmpty(this.EmptyDataText))
        {
            cell.Controls.Add(new LiteralControl(EmptyDataText));
        }
        emptyRow.Cells.Add(cell);
        table.Rows.Add(emptyRow);
        if (ShowEmptyFooter)
        {
            //  create footer row
            GridViewRow footerRow = base.CreateRow(-1, -1, DataControlRowType.Footer, 
                                                   DataControlRowState.Normal);
            this.InitializeRow(footerRow, fields);
            // Fire the OnRowCreated event to handle showing
            // search tool and total number of rows
            OnRowCreated(new GridViewRowEventArgs(footerRow));
            //  add the footer to the table
            table.Rows.Add(footerRow);
        }
        this.Controls.Clear();
        this.Controls.Add(table);
    }
    return count;
}

 

例子:
让我用一个例子帮助说明上面的控件。为此，我使用Northwind数据库中的客户表。

步骤1：创建与选择查询数据源dsCustomers：“SELECT CustomerID, CompanyName, Address, City, Country FROM Customers”。

步骤2：创建一个SearchableGridView实例和设置SearchFilters属性有关于的搜索选择项。

 

步骤3：添加两个隐藏字段hfSearchText和hfSort分别存储搜索文本和文本的排序。

第4步：用SearchGrid事件来设置SearchableGridView数据源和过滤的搜索字符串。 hfSearchText和hfSort是隐藏的领域持有的搜索字符串和SearchableGridView排序字符串。BindData方法实现绑定的过滤和排序后的数据。

 

Code
protected void SearchGridView1_SearchGrid(string _strSearch)
{
    hfSearchText.Value = _strSearch;
    BindData();
}
protected void SearchGridView1_Sorting(object sender, GridViewSortEventArgs e)
{
    //If hfSort has the same value as before, 
    //the sorting should be done in descending order
    if (hfSort.Value == e.SortExpression)
        hfSort.Value = e.SortExpression + " Desc";
    else
        hfSort.Value = e.SortExpression;
    BindData();
}
void BindData()
{
    //hfSearchText has the search string returned from the grid.
    if (hfSearchText.Value != "")
        dsCustomers.SelectCommand += " where " + hfSearchText.Value;
    DataView dv = (DataView)dsCustomers.Select(new DataSourceSelectArguments());
    //hfSort has the sort string returned from the grid.
    if (hfSort.Value != "")
        dv.Sort = hfSort.Value;
    SearchGridView1.DataSource = dv;
    try
    {
        SearchGridView1.DataBind();
    }
    catch (Exception exp)
    {
        //If databinding threw exception b’coz current 
        //page index is > than available page index
        SearchGridView1.PageIndex = 0;
        SearchGridView1.DataBind();
    }
    finally
    {
        //Select the first row returned
        if (SearchGridView1.Rows.Count > 0)
            SearchGridView1.SelectedIndex = 0;
    }
}

 

结论
SearchableGridView将是非常有用，当有一个表格中的数据行很大的时候。通过执行搜索没有太多麻烦。

翻译：http://www.codeproject.com/KB/webforms/SearchSortableGridView.aspx

代码：http://www.codeproject.com/KB/webforms/SearchSortableGridView.aspx

小弟第一次翻译文章，错误多多，请多多指出！