GridView添加新記錄

 

在 ASP.NET 2.0 中,GridView 支持修改/刪除記錄,但卻不支持新增記錄的功能(個人感覺是 GridVew 的一大缺憾,估計在下一版本中會加入此功能),大多數人建議用 FormView 來完成增加記錄的功能,但是 FormView 和 GridView 不是同一個表格,所以無法在同一個頁面的同一個表格中顯示。如果故意將 FormView 或自己的一堆於用新增功能的控件使用普通的表格組裝起來,那麼會碰到一個很麻煩的問題,即兩個表格的列寬如何協調一致,大多數情況下,大家在做表格的時候,表格中各列的寬度都是自動調整的,所以強行指定寬度在很多情況下並不適用。

通過實踐,想出了一種辦法,主要步驟如下所示:

1) 在 GridView 的 EmptyDataView 中,放置一個普通的Html Table,以便在GridView綁定的數據源中無數據時依舊顯示錶頭(如果數據源爲返回的數據行數爲0,GridView默認是不顯示錶頭的),假設 ID 爲 tbHeader,它的作用是下面用於新增功能的 tbForm 的各列控件提供說明(充當表頭);

2)在 GridView 下面,放置一個普通的 HTML 表格,其列數和 GridView 中定義的列數保持一致,但行數只有一行,然後在此表格的各列中放入用於新增功能的各個控件(如 TextBox等),假設此表格的 ID 爲 tbForm

3)在頁面中加入一段客戶端腳本,以便使頁面展示到客戶端時,利用 Javascript 將兩個表格強行合併到一起,這樣就可以將只有一行的 tbForm 合併到 GridView中,因此 GridView 的最下面多出一行,其中有 tbForm 表格中定義的輸入控件和“添加”鏈接(按鈕),主要代碼(JavaScript)如下:

function MergeTable(source,dest)

{

    var row;

    var cell;

    var sourceTb = document.all(source);

    var destTb = document.all(dest);

    for (var i=0; i<sourceTb.rows.length; i++)

   {

         row = document.createElement("TR");

         for (var j=0; j<>

<sourceTb.rows(i).cells.length; j++)

        {

             cell = document.createElement("TD");

             row.appendChild(cell);

             //複製對象

             for(k=0;k<sourceTb.rows(i).cells(j).all.length;k++)

                 cell.appendChild(sourceTb.rows(i).cells(j).all.item(k));

        }

        destTb.tBodies(0).appendChild(row);

    }

    for (var i=sourceTb.rows.length-1; i>=0; i--)

    {

        sourceTb.deleteRow(i)

    }

}

function ChangeTableLayout()

{

     if(document.all('tbHeader') == null)

        MergeTable('tbForm','<%=mygridview.clientid %>');

    else

        MergeTable('tbForm','tbHeader');

}

ChangeTableLayout();

如果 GridView 綁定時沒有數據,將不顯示其中定義的各列,而只顯示 EmptyDataView 中的 tbHeader,這時要合併 tbHeader 和 tbForm。如果 GridView 綁定時包含數據,則不會顯示 EmptyDataView(當然也不會顯示其中的 tbHeader),但這時會顯示 GridView 中定義的各個列,因此只需將 GridView 本身和 tbForm 合併即可。 GridView 的客戶端ID可以用GridView.ClientID來獲取。

在服務器端很容易知道 GridView 綁定後是否包含數據,但對於客戶端來說,不容易檢查,一個簡單的作法就是檢查頁面中有沒有 tbHeader 對象(如果有,則說明表格沒有數據,如果無此對象,表示 GridView 中包含數據... 好囉嗦)

4)如果是 AJAX 環境,上述腳本有可能不被執行,可以調用 Sys.Application.load.add ( JavaScriptFunction) 來強制執行腳本,來合併表格,主要代碼如下(C#):

ScriptManager myScriptManager = ScriptManager.GetCurrent(Page);

if (myScriptManager.IsInPartialRenderingMode)

{

    Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowFullTable1", "ChangeTableLayout();/n", true);

}

else

{

    Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowFullTable2", "Sys.Application.load.add (ChangeTableLayout);/n", true);

}

注:上述代碼中的 ChangeTableLayout 爲客戶端腳本函數的名稱,其中調用第3步驟中的代碼,上述代碼在 Atlas 中通過,在 ASP.NET AJAX Beta 上尚末測試。

另:爲了更能說明上文代碼的效果,我抓了一個截圖,圖中包括表頭在內的前三行就是 GridView,最下面一行其實來自於另一個表格,在客戶端強制合併後,顯示效果就是這樣,看起來象是一個表格。

o_gridview.jpg

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章