简单扩展 ASP.NET GridView

• 下载源代码 - 11.4 KB

引言

这是一个解决简单问题的简单方案。它显示一个 ASP GridView，在 HTML 中渲染时，会根据需要逐行扩展。换句话说，这是一个按需扩展的 GridView。

背景

一位同事询问是否可以有一个 GridView，只要用户继续输入或编辑数据，行就会动态显示。他们提出了使用 AJAX 或其他新颖技术的一些想法。然而，由于每次添加新行时，都不需要新的服务器数据，我认为这个问题可以用更少的精力来解决。

代码工作原理

*由于是在 VS 2008 中完成的，一些语法可能有所不同。

想法是，我们提供整个表格（包含完整或空行），其中每行的最后一个可更新（意味着用户可以更改其值）控件调用一个 JavaScript 函数，该函数将“添加”另一行。

function ShowNextLine(what)
{
    //below I use a simple regular expression which 
    //searches for a number. Often you may have your controls
    //which have numbers in their names - this will make 
    //the reg exp find that number, but not the "row" number 
    //therefore you will either need to rename your controls 
    //(GridView or Foo instead of GridView1)
    //or come up with a more flexible regular expression. 
    //I'd prefer the former for it's more comprehensive plus 
    //reg exps eat CPU. 

    //Get the number part of the  item (what) ID
    var s = parseInt(what.id.substring(what.id.search("\\d")));
    //take the "text part" of tr's id and concat 
    //it with an incremented what's - current Id
    document.getElementById("GridView_" + 
      (parseInt(s)+1).toString()).setAttribute("class","trVisible"); 
}

如代码所示，它不会添加下一行，而是通过更改其 CssClass 使其可见。

行在 HTML 中渲染为 <TR>。为了使 <TR> 不可见，我们不能使用“visibility:hidden”，也不能使用“height:0px”。这些都不起作用。只有“display:none”才有效。

<style type="text/css">
    .trInvisible
    {        
        display:none;
    }
    .trVisible
    {
      display:table-row;
    }
</style>

当绑定每个表格行时，我们会对其进行适当的格式化，并将 CssClass 值设置为“trInvisible”。请阅读代码中的注释。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
//this will fire on each row of the datasource 
{
    // (our datatable in this case) being bound to the GridView. 
    e.Row.ID = (this.j).ToString();
    //here we are setting the row id (rendered as <TR>
    //in HTML) to the counter - a secuential number;
    
    TextBox txtLastControlInRow = 
       (TextBox)e.Row.FindControl("txtDescription");
       // get the reference to the last textbox in the row
    if (txtLastControlInRow != null) //if it ain't null
    { 
        txtLastControlInRow.Attributes.Add("onfocus", 
          "ShowNextLine(this)");
          //add a JavaScript function call on control focus.
    }
        
    if (this.j > 1) //if this is not the header or the first row
    {
        e.Row.CssClass = "trInvisible";
        //make the row invisible through 
        //specifying the appropriate CSS class
    }
    this.j = this.j + 1; //increment the class global counter.
}

在绑定表格之前，我们创建一个示例表格。

private DataTable CreateFooTable()
//this will create a table, which we use to display the grid
{
    //this table is only for demonstration purposes
    //I could have used any other source of data (XML, Database, CSV, whatever)
    //But I chose making the table on the spot
    
    DataTable dt = new DataTable(); //the table to be created;
    int i = 1;

    dt.Columns.Add("Item_Id"); //add ID column
    dt.Columns.Add("Item_Description"); //add whatever other column(s);

    for (i=1; i <= 20; i++) //add 20 rows; 
    {
        dt.Rows.Add(i, "Foo Item " + i.ToString());
        //I am simply adding rows with i in first 
        //column and Item_i into the second;
    }

    return dt; //when the table is 20 rows, return it;
}

关注点

1. 这是一个很好的练习，可以结合使用各种技术。
2. 只有“display:none”才能使表格行不可见。