真正類似于 Excel 的網格控件
2024-07-21 02:24:28
供稿：網友
注 與本文相關的下載文件的 visual basic_ 版本已于 3 月 4 日進行了更新。如果您是在 3 月 4 日之前下載源代碼的，則將需要重新下載該文件以獲得 visual basic 文件。
asp.net datagrid 控件生成一個 html 輸出結果，此結果看上去確實像 microsoft excel 工作表的 web 副本。另外，該控件支持如選擇和就地編輯之類的功能，這些功能又進一步證實了這種相似性。特別是，從支持就地編輯功能這一點來看時，這種相似性就最為明顯了。當您單擊特殊類型的命令列時，網格會使用文本框（而非靜態文本）重繪其內容。與此同時，命令列會更改布局，將編輯鏈接替換為兩個其他鏈接 — 一個用來保存所做的更改，另一個用來取消所做的更改。整個看上去幾乎與 excel 名稱框命令欄完全相同。
datagrid 還使程序員有機會在某種程度上自定義所編輯的單元格的布局。這可通過以下方法來實現：使用模板化列來代替綁定列和按鈕列，并在模板化列的標記正文中定義編輯模板。
簡單地說，datagrid 控件只是為就地編輯提供基礎結構，并在保存所做的更改時激發某些事件。為了能夠完全編輯，網格組件應當提供三個您可能希望針對數據源執行的基本操作：“插入、“刪除和 “更新”。datagrid 用于編輯的基礎結構（基本上是 editcommandcolumn 列類）只保證能夠執行更新和刪除操作。實現 “刪除” 功能相對容易些，而且只要求您定義一個命令名為 “刪除” 的 buttoncolumn 對象，并等待deletecommand 事件激發。
在本專欄中，您將看到如何擴展 datagrid 控件，使其支持 insert 命令。我們將通過創建一個新類并讓其從 datagrid 繼承來實現這一點。我們將使該類盡可能多地實現樣本代碼，以省去某些重復編碼。因此，我們將擁有一個激發新事件和更具體事件的控件，而且我們可以使用這個唯一的界面來維護數據庫表。
editablegrid 控件
新控件應當具有哪種接口？
的思路是盡可能限制程序員必須編寫的代碼的數量。該控件將負責向其自身的接口中添加任何新行，然后在需要保存所做的更改時警告用戶。這一原則適用于大多數操作，而不應當僅限于 “插入”。在實現就地編輯和刪除時，總是必須在 sql 語句周圍放一些相對標準的和重復的代碼。特別是在實現就地編輯功能時，必須重置所編輯項目的索引，并重新加載和重新綁定更新過的數據源。所有這些樣本代碼將嵌入到新的 editablegrid 控件中。因此，該控件提供一個名為 addnewrow 的新布爾屬性，以及幾個自定義事件 — initrow、updateview、“保存數據”、“插入數據” 和 “刪除數據”。
當用戶希望添加新行時，他（或她）只需將 addnewrow 屬性設置為 true 并重新綁定該控件。該操作的其余部分在內部發生。（稍后我將描述此過程的細節。）新行將在編輯模式下繪制，initrow 事件將激發，其目的只是使您有機會將某些字段設置為默認值。
updateview 的角色不與更新操作緊密相關。datagrid 控件不緩存數據源，因此，無論頁面何時回發（以便進行分頁、排序、編輯、插入或刪除），您都需要重新綁定。為了簡化編碼并盡可能多地嵌入編碼，添加了這個新事件。當該網格需要設置其 datasource 屬性時，“更新視圖” 就會激發。“更新視圖” 的典型處理程序將當前的數據源分配給該屬性并調用 databind 方法。
當相應的 sql 語句不能進一步延遲執行時，就會激發其他三個事件 — “保存數據”、“插入數據” 和 “刪除數據”。在處理其中的任何事件時，可設置和執行 “更新”、“插入” 或 “刪除” 語句。您負責檢索更新后的數據，并準備和執行該命令。除了 “插入數據”（與 datagrid 編程接口沒有緊密關系）以外，“保存數據” 和 “刪除數據” 也不同于標準的 updatecommand 和 deletecommand，這是因為它們更具體而且只要求您執行 sql 代碼。新事件基本上由 updatecommand 和 deletecommand 的處理程序激發，這些處理程序是 editablegrid 控件在加載時以靜默方式定義的。這些內部處理程序負責執行所有其他任務（例如，重置索引）并刷新視圖。后者（即刷新視圖）是通過激發 updateview 事件來完成的。
設置控件
讓我們快速瀏覽 editablegrid 類。該類的構造函數初始化某些公共屬性和受保護的屬性，并為基類的幾個事件設置默認處理程序。
namespace bwslib
{
public class editablegrid : datagrid
{
public editablegrid()
{
allowfullediting = true;
addnewrow = false;
allowpaging = true;
rejectchanges = false; // internal use
mustinsertrow = false; // internal use
// handlers
init += new eventhandler(oninit);
pageindexchanged += new
datagridpagechangedeventhandler(onpageindexchanged);
itemcreated += new datagriditemeventhandler(onitemcreated);
cancelcommand += new datagridcommandeventhandler(oncancelcommand);
editcommand += new datagridcommandeventhandler(oneditcommand);
updatecommand += new datagridcommandeventhandler(onupdatecommand);
deletecommand += new datagridcommandeventhandler(ondeletecommand);
}
:
}
}
editablegrid 類有一個尚未提到的公共屬性 — allowfullediting。該屬性成員支持對網格的完全編輯功能。如果您將該屬性設置為 false，則該控件將不提供就地編輯或插入功能。究竟執行的是怎樣的處理？該控件自動將 allowpaging 設置為 true，并為 pageindexchanged 提供一個處理程序。這意味著 editablegrid 還是比 datagrid 控件好一些，因為它為您提供自動的空閑分頁。
當 allowfullediting 設置為 true（默認值）時，editablegrid 控件自動將兩個新列追加到網格中。第一列是 editcommandcolumn，它提供就地編輯功能。第二列是 buttoncolumn，它的命令是 delete。這兩列都是通過為響應 init 事件而運行的處理程序來添加的。
public void oninit(object sender, eventargs e)
{
if (allowfullediting)
addworkercolumns();
}
private void addworkercolumns()
{
// edit column
editcommandcolumn editcolumn = new editcommandcolumn();
editcolumn.edittext = editcolumntext;
editcolumn.updatetext = editcolumnupdatetext;
editcolumn.canceltext = editcolumncanceltext;
columns.add(editcolumn);
// delete column
buttoncolumn deletecolumn = new buttoncolumn();
deletecolumn.commandname = "delete";
deletecolumn.text = deletecolumntext;
columns.add(deletecolumn);
}
editcolumntext、editcolumnupdatetext、editcolumncanceltext 和 deletecolumntext 確定用來觸發編輯和刪除操作的按鈕的文本。它們在默認時分別為 “編輯”、“確定”、“取消” 和 “刪除”。
在將該控件插入到任何 asp.net 頁中之前，必須按如下方式注冊它：
<%@register tagprefix="expo" namespace="bwslib" assembly="editablegrid" %>
在上面的聲明中，可以更改 tagprefix 屬性的內容，但是，除了該控件的命名空間和類名可以修改以外，不能更改任何其他內容。下面的代碼顯示如何在 aspx 頁中聲明該控件：
<expo:editablegrid id="grid" runat="server"
autogeneratecolumns="false"
font-name="verdana" font-size="xx-small"
cellspacing="0" cellpadding="3"
borderstyle="solid" bordercolor="skyblue" borderwidth="1"
gridlines="both"
pagesize="4"
datakeyfield="employeeid"
oninitrow="initrow"
onupdateview="updateview"
onsavedata="savedata"
oninsertdata="insertdata"
ondeletedata="deletedata">
:
<columns>
:
</columns>
</expo:editablegrid>
示例頁從一個名為 employees 的 microsoft access 2000 表讀出數據并將生成的 dataset（數據集）存儲在 cache 對象中。
private dataset physicaldataread()
{
oledbdataadapter da = new oledbdataadapter(
"select * from employees",
"provider=microsoft.jet.oledb.4.0;data source=c://myemployees.mdb;");
dataset ds = new dataset();
da.fill(ds, "employees");
return ds;
}
圖 1 顯示該頁中控件的輸出結果。
圖 1. 操作中的 editablegrid 控件
添加和刪除列時無需任何額外的代碼。可是，必須要指定 updateview 處理程序。但是，正如您可以看到的那樣，這是一段必須在多個位置與 datagrid 控件一起使用的代碼。然而，由于有 updateview 事件，所以只需指定一次。
public void updateview(object sender, eventargs e)
{
updatedataview();
}
private void updatedataview()
{
dataset ds = (dataset) cache["mydata"];
dataview dv = ds.tables["employees"].defaultview;
grid.datasource = dv;
grid.databind();
}
在上面的控件聲明中，還可以看到三個與數據相關的事件的事件處理程序。讓我們看一下該控件如何處理它們。
insert 操作
editablegrid 控件不包括任何用來啟動 “插入” 操作的用戶界面元素。正如對于其他重要功能一樣，程序員負責將能夠觸發網格上給定事件的超級鏈接或按鈕放到頁面中。由于添加新項目不是依賴特定行的操作，因此建議您不要使用特殊的命令列（例如，“編輯” 或 “刪除”）。客戶端代碼處理頁面級事件，并設置 addnewrow 屬性以響應該操作。接著，頁面刷新網格，以反映所做的更改。例如，圖 1 中的 insert（插入）按鈕鏈接到下面的 on-click 處理程序：
public void oninsert(object sender, eventargs e)
{
grid.addnewrow = true;
updatedataview();
}
“更新數據視圖” 是頁面級過程，它處理網格數據綁定并設置 “數據源” 屬性。
設計的思路是使用戶不直接將新記錄添加到數據源中，而是只聲明其想要實現的目標。因此，在設置 editablegrid 控件的 “數據源” 屬性時，該控件會檢查 addnewrow 的值。在派生的控件中，因為有多種訪問器，所以可以很方便地確定何時讀取或寫入給定屬性。這樣做之后，editablegrid 會按如下方式重寫 “數據源” 屬性：
public override object datasource
{
get {return base.datasource;}
set
{
// standard behavior
base.datasource = value;
// customized behavior
if (allowfullediting)
{
if (addnewrow)
{
addnewrow = false;
insertnewrow();
}
// more code here...
:
}
}
}
在設置 “數據源” 時，只要 addnewrow 屬性為 true，就會追加一個新行。insertnewrow 就是用來為插入和行編輯功能設置網格的內部過程。此處進行的重要假設就是網格與 “數據視圖” 對象綁定。利用該代碼，您可以方便地推廣到更普遍的解決方案。
private void insertnewrow()
{
// get the underlying datatable object
datatable dt = ((dataview) datasource).table;
// if any pending changes, stop here to avoid inserting over
// and over again if user refreshes...
datatable tableofpendingchanges = dt.getchanges(datarowstate.added);
if (tableofpendingchanges!= null)
return;
// add the new row
datarow row = dt.newrow();
dt.rows.add(row);
// initialize the row (fire the initrow event)
datagridinitroweventargs dgire = new datagridinitroweventargs();
dgire.row = row;
oninitrow(dgire);
// goto to last page and turn edit mode for the last item
int nnewitemindex = setindexestolastpage(dt);
edititemindex = nnewitemindex;
// tracks that a new row has just been added (internal member)
mustinsertrow = true; // means the table has pending changes
}
在創建基礎 “數據表” 對象以后，使用 newrow 方法添加新行，并激發自定義的 initrow 事件，以便用戶有機會將某些字段設置為默認值。為了實現其目標，initrow 需要將某些數據向下傳遞到事件處理程序并接收任何更新。必須安排一個自定義的事件數據結構和一個自定義的事件處理程序簽名。datagridinitroweventargs 是事件數據結構的名稱，而 datagridinitroweventhandler 是要使用的委托。
public delegate void datagridinitroweventhandler(
object sender, datagridinitroweventargs e);
public event datagridinitroweventhandler initrow;
private void oninitrow(datagridinitroweventargs e)
{
if (initrow != null)
initrow(this, e);
}
datagridinitroweventargs 類繼承于 eventargs 并通過簡單地添加一個 datarow 成員進行擴展。
public sealed class datagridinitroweventargs : eventargs
{
// represents the row being added. you can use this object
// to set fields to default values.
public datarow row;
}
在激發 initrow 事件之前，該控件用新創建（但仍為空）的 datarow 對象的實時實例填充 row 成員。
datagridinitroweventargs dgire = new datagridinitroweventargs();
dgire.row = row;
oninitrow(dgire);
如果需要設置某些默認值，則可以編寫 initrow 處理程序并設置 datarow 對象的字段。
public void initrow(object sender, datagridinitroweventargs e)
{
e.row["lastname"] = "esposito";
}
此處，datasource 額外有一行可模擬新記錄的插入操作。該行已經添加到數據源的底部。因此，您應當使網格指向它的最后一頁，而且還要考慮到新行進入新頁的可能性。例如，如果表中有八個記錄，而且您使用的頁面大小為四，則在添加新記錄時還需要增加一個新頁。為了使用戶能夠編輯新行的內容，只需將 datagrid 的 edititemindex 屬性設置為新行的頁索引。insertnewrow 完成的最后一步是設置內部數據成員，來跟蹤向表中添加新的未提交行的操作。
簡言之，該代碼將一個空行對象添加到網格的數據源中。該行代表 “數據表” 對象的待定更改，而且如果用戶取消該操作，則必須拒絕該行。如果用戶移到另一頁或者決定單擊和編輯同一頁上的另一行，也必須拒絕該行。拒絕待定更改是內置處理程序（例如，pageindexchanged、editcommand 和 cancelcommand）通過內部數據成員 rejectchanges 完成的事情之一。（有關更多詳細信息，請參閱源代碼。）
通過將新行置于編輯模式，即可完成插入階段，從而進入更新階段，如下圖所示。
圖 2. 插入新行
對于 insertnewrow 的主體，我還需要闡明另外一個方面。在獲取數據源之后，該方法立即確保沒有已添加但尚未提交的行。在設計上，最多可以有一個待定更改，而且如果該代碼重新進入有一個已添加的行的過程，那是由于用戶刷新了該頁面。為了避免反復添加空白行和未提交的行，程序流會跳出代碼塊。
update 操作
請注意，在圖 2 中看不到可在圖 1 中看到的 delete 列。為了簡化界面，我決定在任何行進入編輯模式時隱藏 delete 列。并且因為有了以前提到的內置事件處理程序，所以此行為在 editablegrid 類中是硬編碼的。
update 操作是由以下三個事件執行的：
• editcommand — 開始該操作并以編輯模式呈現行
• updatecommand — 保存所做的更改并還原默認用戶界面
• cancelcommand — 取消所做的更改并還原以前的用戶界面
用于 editcommand 和 cancelcommand 的典型代碼是能夠方便地嵌入類中的傳統 vanilla 代碼。一般來說，此處沒有真正需要在頁面級解決的內容，但是有時情況也可能與您的特定實例有所不同。
“更新” 操作的應用程序特定的邏輯集中在 “更新命令” 事件中。除了保存任何更改以外，您應當還原網格的一致狀態（取消編輯模式、還原 delete 列和拒絕待定的更改），并確保所做的更改隨后由用于顯示的數據源反映出來。如果您像本例中那樣使用緩存數據，則后面的一點至關重要。
public void onupdatecommand(object sender, datagridcommandeventargs e)
{
// clear edit mode
edititemindex = -1;
// show/hide delete column
toggledeletecolumn(true);
// reject changes on the last row
rejectchanges = true; // internal member
// update or insert data
if (mustinsertrow) // internal member
oninsertdata(e);
else
onsavedata(e);
// refresh view
onupdateview(eventargs.empty);
}
updatecommand 處理程序取消當前行的編輯模式，然后打開 delete 列的可見性標志。此時，該表可能有一個待定的更改。因為 “更新命令” 事件會在兩種情況（打算將所做的更改保存到現有的行中時；要插入新行時）下激發，所以條件窗體很有意義。內部成員 mustinsertrow 由 insertnewrow 設置并由 datasource 重置，它有助于確定是哪種情況。當代碼處理完網格的狀態之后，它激發兩個連續事件 — 一個事件讓頁面保存或插入到物理數據源中，另一個事件刷新數據綁定。這就解釋了為何 insertdata 和 savedata 處理程序只能執行主要通過 sql 語句來進行的物理更新。
insertdata 和 savedata 事件處理程序的簽名與 updatecommand 的相同。
public event datagridcommandeventhandler savedata;
protected virtual void onsavedata(datagridcommandeventargs e)
{
if (savedata != null)
savedata(this, e);
}
public event datagridcommandeventhandler insertdata;
protected virtual void oninsertdata(datagridcommandeventargs e)
{
if (insertdata != null)
insertdata(this, e);
}
在本文中討論的示例代碼中，設置了幾個假設，其中一個就是假設網格的數據源是 “數據視圖” 對象。這間接表示不支持自定義分頁，或者，更確切地講，必須仔細修改此代碼才能處理這樣的網格。這同樣適用于排序。
所作的第二個重要假設是有關使用 sql 語句進行更新的。
設計思路是，無論進行了什么樣的更改，總是激發單個 sql 語句以應用它。此處設計的 editablegrid 不能正確地處理批更新。順便提一句，在我的 building web solutions with asp.net and ado.net 一書中，在介紹就地編輯時，更詳細地討論了對于網格使用批更新的優缺點。然而，如果您對使用批更新技術感興趣，請給我發送電子郵件，我將在以后的專欄中介紹此主題。
由于您通過直接的 sql 語句（或者數據源識別為直接語句的內容）進行更新，因此，“更新命令” 事件可以成功地命令拒絕任何更改。這就是批更新方案中的主要區別。
“保存數據” 和 “插入數據” 事件代表執行更新所必需的任務的子集。在執行該命令之后，這些處理程序必須確保網格可以訪問和顯示刷新數據。在這種情況下，必須更新數據的緩存副本。根據基礎數據庫架構（任何觸發器或任何自動編號的字段），可以決定是完全重新讀取還是基于每個字段更新緩存數據。
讓我們花些時間來了解如何從網格的編輯模板來檢索更新后的數據。我考慮使 editablegrid 控件具有足夠的智能，以便從單元格提取值，并將它們填充到 datarow 對象中以充當事件數據。這個方法使得在批方案中更新代碼變得微不足道。之所以決定讓 asp.net 頁負責提取數據，是因為這樣您也可以透明地支持編輯模板。下面我將向您展示在不使用任何特殊模板時所必需的代碼。
public void savedata(object sender, datagridcommandeventargs e)
{
stringbuilder sb = new stringbuilder("");
sb.append("update employees set ");
sb.append("firstname='{0}',");
sb.append("lastname='{1}',");
sb.append("title='{2}',");
sb.append("country='{3}' ");
sb.append("where employeeid={4}");
string cmd = sb.tostring();
sb = null;
textbox fname = (textbox) e.item.cells[1].controls[0];
textbox lname = (textbox) e.item.cells[2].controls[0];
textbox position = (textbox) e.item.cells[3].controls[0];
textbox country = (textbox) e.item.cells[4].controls[0];
cmd = string.format(cmd,
fname.text, lname.text,
position.text, country.text,
grid.datakeys[e.item.itemindex]);
// executes the command
oledbconnection conn = new oledbconnection(m_connstring);
oledbcommand c = new oledbcommand(cmd, conn);
c.connection.open();
c.executenonquery();
c.connection.close();
// re-read from the database and updates the cache
datafromsourcetomemory();
}
要檢索用戶在文本框中輸入的信息，使用 e.item.cells[n].controls[0] 表達式，其中n 是該列的索引（從 0 開始）。請記住，datagrid 的就地編輯功能允許您通過將 “只讀” 屬性設置為 true 來將列視為只讀。
delete 操作
delete 操作的工作方式與 insert 和 update 操作大體相同。自動創建的列有一個命令名 delete，在單擊該按鈕時會導致激發 ± 事件。內置的處理程序修復網格的界面，然后依次先后激發 deletedata 和 updateview。
由于刪除操作的入侵性比插入或更新操作的強，因此您可能希望使用某個客戶端腳本代碼，并要求用戶在繼續之前確認。我在 last month's column 的“對話欄”部分中討論了該方法。在本月的源代碼中，有一個如下圖所示的實際實現。
圖 3. 在刪除之前確認
最終的優化
我提到過 editablegrid 控件支持編輯模板。讓我來證明這一結論。在示例代碼的第 2 步，我使用該網格中一組稍有不同的列。
<columns>
<asp:boundcolumn runat="server" headertext="id"
datafield="employeeid" readonly="true" />
<asp:templatecolumn runat="server" headertext="name">
<itemtemplate>
<%# databinder.eval(container.dataitem, "lastname") + ", " +
databinder.eval(container.dataitem, "firstname") %>
</itemtemplate>
<edititemtemplate>
<asp:textbox runat="server" id="lname"
text='<%#databinder.eval(container.dataitem, "lastname")%>' />
<asp:textbox runat="server" id="fname"
text='<%#databinder.eval(container.dataitem, "firstname")%>' />
</edititemtemplate>
</asp:templatecolumn>
<asp:boundcolumn runat="server" headertext="position"
datafield="title" />
<asp:boundcolumn runat="server" headertext="country"
datafield="country" />
</columns>
正如您可以看到的那樣，有一個模板列，它在單個字段中顯示名和姓。此列的編輯模板（您必須指定能夠編輯該列的編輯模板）由兩個并排的文本框提供。無需在類中進行任何更改，即可獲得圖 4 中所示的示例。
圖 4. 使用編輯模板
另一方面，在使用從文本框中檢索更新的文本的方式時，編輯模板需要進行少許調整。現在，可以按名稱檢索模板中的控件。之所以可以并且建議這樣做，是因為您知道控件的 id。
textbox fname = (textbox) e.item.findcontrol("fname");
textbox lname = (textbox) e.item.findcontrol("lname");
textbox position = (textbox) e.item.cells[2].controls[0];
textbox country = (textbox) e.item.cells[3].controls[0];
在本月的源代碼中，您將發現該類的 c# 源代碼、兩個示例 asp.net 頁以及我用過的 access 數據庫。但是，您將找不到編譯過的程序集。我提供了一個（非常）簡單的批文件，您可以使用它，針對與 beta 2 及其更高版本兼容的任何版本的 .net clr，將該類編譯成為可執行代碼。
注 如果您在使下載正確運行時遇到問題，請檢查下列步驟：
• 1.將 cs 類編譯成為程序集。這可通過打開一個 dos 框并運行 zip 中的 c.bat 批處理文件來完成，或者通過在 visual studio 中創建一個新的類庫項目并將類文件添加到這個空白項目中來實現。
• 2.必須使程序集對于示例 aspx 頁可用。下載文件中包括的批處理文件將該 dll 復制到 c:/inetpub/wwwroot/bin 文件夾中。如果您恰好有一個不同的路徑，請對它進行修改。如果您創建一個虛擬目錄，請確保將該 dll 復制到虛擬文件夾的 bin 子文件夾中，而不要復制到 web 服務器根的 bin 文件夾中。
• 3.根據 asp.net 安全設置，在與示例 microsoft access 數據庫交互時，可能會遇到難以處理的 updateable query 錯誤。在這種情況下，請更改示例 .mdb 文件的安全設置。在“windows 資源管理器”中選擇該文件，顯示屬性，然后單擊安全選項卡。接著，添加 /aspnet 用戶并確保它有權寫入和修改該文件。
• 4.刷新 aspx 頁面。
對話欄：創建自定義模板
在上一個專欄中，您討論了 summary 網格組件。是否有機會創建或加載匯總行的自定義模板？這將允許在 aspx 文件中（而非代碼中）規定設計的規范。
使用匯總行的自定義模板無疑將是可能的。問題只是在于如何實現？或者，更準確地說，哪種方法最簡單？我將在下面介紹幾種可能的方法。
• 使用 pagelet： 可以修改應用程序的代碼，使其動態加載 pagelet 控件（又稱用戶控件） — 即 ascx 文件。ascx 文件看上去像一個小型 web 窗體，而且其中的大部分內容都是布局信息。可以使用 page.loadcontrol 來按名稱加載 ascx 文件，然后將它添加到 datagriditem 對象的某個單元格的 controls 集合中。
• 模板列：datagrid 的所有列都是模板化列。使用 asp.net 標記和各處的一些代碼定義每一列的 。您能夠執行的操作就是將 塊的結構分成兩個截然不同且互斥的部分 — 一部分用于普通行，另一部分用于匯總行。為了確保一次只顯示一行，可以處理控件的 “可見” 屬性并將該屬性與界定匯總行或普通行的條件綁定。
• 編寫新控件：從 datagrid 派生一個新類并添加一個新的模板屬性。這允許您使用自定義的子標記、按照與輸入列模板幾乎相同的方式輸入匯總行布局。
返回頁首
國內最大的酷站演示中心!
