快捷導(dǎo)航

Coolite 中前臺獲取 GridPanel 當(dāng)前選擇行值的代碼

更新時間：2010年06月17日 11:19:29 作者：

掌握獲取 GridPanel 當(dāng)前行的各個字段值的方法，需要的朋友可以參考下。

主要目的

a. 掌握獲取 GridPanel 當(dāng)前行的各個字段值的方法
b. 掌握如何將前臺數(shù)據(jù)傳遞到后臺，并將后臺操作結(jié)果返回到前臺
c. 掌握如何獲取和設(shè)置 button 和 textField 控件的文本值

主要內(nèi)容

a. 我們先在頁面中添加三個 ext 組件：store, menu,gridpanel

b. 將 gridpanel 的contextmenuID 設(shè)置為　menu 控件的ID, 從而為GridPanel 添加右鍵菜單

復(fù)制代碼代碼如下:

 
<ext:Store ID="Store1" runat="server" 
onbeforestorechanged="Store1_BeforeStoreChanged" > 
<Reader> 
<ext:JsonReader ReaderID="id" > 
<Fields > 
<ext:RecordField Name="id" Type="Int"></ext:RecordField> 
<ext:RecordField Name="uid" Type="String"></ext:RecordField> 
<ext:RecordField Name="uname" Type="String"></ext:RecordField> 
<ext:RecordField Name="uage" Type="Int"></ext:RecordField> 
</Fields> 
</ext:JsonReader> 
</Reader> 
</ext:Store> 

此處的 ReaderID 可以不設(shè)置，設(shè)置了的話，就可以使用方法 GridPanel1.getSelectionModel().getSelected().id 來獲取該行 id 字段所對應(yīng)的值。
使用該方法的前提是在GridPanel 中設(shè)置其選擇方式為行選擇模式，代碼會在后面貼出。Name 對應(yīng)于數(shù)據(jù)庫表中的字段名。

復(fù)制代碼代碼如下:

 
<ext:Menu ID="Menu1" runat="server"> 
<Items> 
<ext:MenuItem ID="MenuItem1" runat="server" Text="查看用戶信息"> 
<Listeners> 
<Click Fn="ShowUserInfo" /> 
</Listeners> 
</ext:MenuItem> 
<ext:MenuItem ID="MenuItem2" runat="server" Text="修改用戶信息"> 
<Listeners> 
<Click Fn="ShowUserInfo" /> 
</Listeners> 
</ext:MenuItem> 
<ext:MenuItem ID="MenuItem3" runat="server" Text="添加用戶信息"> 
<Listeners> 
<Click Fn="ShowUserInfo" /> 
</Listeners> 
</ext:MenuItem> 
<ext:MenuItem ID="MenuItem4" runat="server" Text="刪除用戶信息"> 
<Listeners> 
<Click Fn="DeleteUserInfo" /> 
</Listeners> 
</ext:MenuItem> 
</Items> 
</ext:Menu> 

效果如下：

c. 將 gridPanel 的 storeID 設(shè)為 store 控件的 ID, 為 Gridpanel 添加數(shù)據(jù)源

GridPanel 源碼如下：

復(fù)制代碼代碼如下:

 
<ext:GridPanel ID="GridPanel1" runat="server" ContextMenuID="Menu1" AutoHeight="true" Width="400px" 
AutoDataBind="true" StoreID="Store1"> 

<ColumnModel ID="ctl10"> 
<Columns> 
<ext:Column DataIndex="id" Header="用戶編號"> 
<PrepareCommand Args="grid, record, rowIndex, columnIndex, value" /> 
</ext:Column> 
<ext:Column DataIndex="uid" Header="用戶名"> 
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> 
</ext:Column> 
<ext:Column DataIndex="uname" Header="用戶昵稱"> 
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> 
</ext:Column> 
<ext:Column DataIndex="uage" Header="用戶年齡"> 
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> 
</ext:Column> 
</Columns> 
</ColumnModel> 
<SelectionModel> 
<ext:RowSelectionModel runat="server" ID="ctl09"></ext:RowSelectionModel> 
</SelectionModel> 
<LoadMask ShowMask="true" Msg="數(shù)據(jù)正加載中..." /> 
<Listeners> 
<CellClick Fn="ShowUserInfo" /> 
</Listeners> 
</ext:GridPanel> 

此處要作幾點(diǎn)說明
首先,cellclick 事件傳遞的參數(shù)可以根據(jù) PrepareCommand 中 Args 設(shè)置的參數(shù)傳遞，比如 grid, command, record, row,col, value
其次此處的 SelectionModel 節(jié)點(diǎn)內(nèi)定要使用 RowSelectionModel

d. 前臺 extjs 腳本如下：

復(fù)制代碼代碼如下:

 
function ShowUserInfo(menu, e) { 
var id = GridPanel1.getSelectionModel().getSelected().id;//此處的 id 為 jsonreader 中的 readerID所設(shè)置的值 
var record = GridPanel1.getSelectionModel().getSelected(); //獲取當(dāng)前選中的整條記錄，前提是必須設(shè)置為行選擇模式 

//查看詳細(xì)信息 
if (menu.id == 'MenuItem1') { 
openUserInfoWindow(record, 0); //在 objectInfo.ascx 頁面中定義 
} 
//修改信息 
else if (menu.id == 'MenuItem2') { 
openUserInfoWindow(record, 1); 
} 
//添加信息 
else if (menu.id == 'MenuItem3') { 
openUserInfoWindow(record, 2); 
} 
else { 

} 
} 

對于該腳本，有一點(diǎn)要說明，就是其中要調(diào)用 openUserInfoWindow 方法，該方法在是一個用戶控件的頁面中定義的，本頁使用該控件以后，便可調(diào)用該方法。
空間頁面源碼如下：
說明一點(diǎn)： <%= ctrID.ClientID> 用戶獲取服務(wù)器端組件對象

復(fù)制代碼代碼如下:

 
function openUserInfoWindow(record,id) { 
<%= Button2.ClientID %>.hide(null); 
<%= txtID.ClientID %>.setValue(record.data.id); 
<%= txtName.ClientID %>.setValue(record.data.uid); 
<%= txtNC.ClientID %>.setValue(record.data.uname); 
<%= txtAge.ClientID %>.setValue(record.data.uage); 
if(id==1) 
{ 
<%= Button1.ClientID %>.setText('修改'); //對于 button, 取值時用 text,設(shè)置時用 setText(); 
<%= txtID.ClientID %>.hide(null); 
<%= Button2.ClientID %>.show(null); 
} 
if(id==0) 
{ 

} 
if(id==2) 
{ 
<%= txtID.ClientID %>.setValue(''); 
<%= txtName.ClientID %>.setValue(''); 
<%= txtNC.ClientID %>.setValue(''); 
<%= txtAge.ClientID %>.setValue(''); 
<%= txtID.ClientID %>.hide(null); 
<%= Button1.ClientID %>.value="添加"; 

} 
<%= Window1.ClientID %>.show(); 
} 

刪除用戶的代碼如下：

復(fù)制代碼代碼如下:

 
function DeleteUserInfo() { 
Ext.Msg.confirm('提示', '確定刪除用戶？', function(btn) { 
if (btn == 'yes') { 
var record = GridPanel1.getSelectionModel().getSelected(); 
GridPanel1.getStore().remove(record);//該方法若寫在后臺刪除成功后的回調(diào)函數(shù)中時，則 record 為 null 
//用戶可能只是在 gridpanel 上點(diǎn)擊，但并沒有選擇確定的行，此時 record 值為 null 
if (record == null) { 
Ext.Msg.alert('提示', '請選擇某一確定的記錄！'); 
return; 
} 
Coolite.AjaxMethods.DeleteUserInfo(record.data.id.toString(), { 
success: function() { 

Ext.Msg.alert('提示', '刪除成功！'); 
} 
}); 
} 
else { 
return; 
} 
}); 
} 

請?zhí)貏e注意 Coolite.AjaxMethods.DeleteUserInfo 方法的使用，第一個參數(shù)是在前臺獲取，并傳遞到服務(wù)器端的參數(shù)，第二個是回調(diào)函數(shù)。
后臺刪除代碼實(shí)現(xiàn)如下：

復(fù)制代碼代碼如下:

 
[AjaxMethod] 
public void DeleteUserInfo(string id) 
{ 
string deletestring = "delete from T_User where id=" + id; 
sqldb.ExecuteUpdate(deletestring); 
} 

特別注意
本頁面的添加，修改功能都未實(shí)現(xiàn)，只提供了一個模式，不過使用和刪除時是一樣的。
學(xué)習(xí)心得
如果有不知道什么事件傳遞的參數(shù)個數(shù)和類型，可以隨便寫個錯誤的方法，然后調(diào)試的時候去分析有意義的參數(shù)。
疑問：當(dāng)實(shí)現(xiàn)刪除時，實(shí)現(xiàn)刷新時，實(shí)現(xiàn)修改時，我不用重新從數(shù)據(jù)庫讀取數(shù)據(jù)后再綁定到 Store, 而是通過刷新 Store 或者 GridPanel 實(shí)現(xiàn)

您可能感興趣的文章: