在Coolite 中前台获取 GridPanel 当前选择行值的代码

发布时间：2023-06-12 14:30:05 所属栏目：Asp教程来源：

导读：ext:MenuItem>

</Items>

</ext:Menu>

效果如下：

Coolite 中前台获取 GridPanel 当前选择行值的代码

c. 将 gridPanel 的 storeID 设为 store 控件的 ID, 为 Gridpanel 添加数据源

GridPanel

ext:MenuItem>

</Items>

</ext:Menu>

效果如下：

Coolite 中前台获取 GridPanel 当前选择行值的代码

c. 将 gridPanel 的 storeID 设为 store 控件的 ID, 为 Gridpanel 添加数据源

GridPanel 源码如下：

复制代码代码如下:

<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="数据正加载中..." />

<Listeners>

<CellClick Fn="ShowUserInfo" />

</Listeners>

</ext:GridPanel>

此处要作几点说明

首先,cellclick 事件传递的参数可以根据 PrepareCommand 中 Args 设置的参数传递，比如 grid, command, record, row,col, value

其次此处的 SelectionModel 节点内定要使用 RowSelectionModel

d. 前台 extjs 脚本如下：

复制代码代码如下:

function ShowUserInfo(menu, e) {

var id = GridPanel1.getSelectionModel().getSelected().id;//此处的 id 为 jsonreader 中的 readerID所设置的值

var record = GridPanel1.getSelectionModel().getSelected(); //获取当前选中的整条记录，前提是必须设置为行选择模式

//查看详细信息

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 {

}

}

对于该脚本，有一点要说明，就是其中要调用 openUserInfoWindow 方法，该方法在是一个用户控件的页面中定义的，本页使用该控件以后，便可调用该方法。

空间页面源码如下：

说明一点： <%= ctrID.ClientID> 用户获取服务器端组件对象

复制代码代码如下:

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,设置时用 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();

}

删除用户的代码如下：

复制代码代码如下:

function DeleteUserInfo() {

Ext.Msg.confirm('提示', '确定删除用户？', function(btn) {

if (btn == 'yes') {

var record = GridPanel1.getSelectionModel().getSelected();

GridPanel1.getStore().remove(record);//该方法若写在后台删除成功后的回调函数中时，则 record 为 null

//用户可能只是在 gridpanel 上点击，但并没有选择确定的行，此时 record 值为 null

if (record == null) {

Ext.Msg.alert('提示', '请选择某一确定的记录！');

return;

}

Coolite.AjaxMethods.DeleteUserInfo(record.data.id.toString(), {

success: function() {

Ext.Msg.alert('提示', '删除成功！');

}

});

}

else {

return;

}

});

}

请特别注意 Coolite.AjaxMethods.DeleteUserInfo 方法的使用，第一个参数是在前台获取，并传递到服务器端的参数，第二个是回调函数。

后台删除代码实现如下：

复制代码代码如下:

[AjaxMethod]

public void DeleteUserInfo(string id)

{

string deletestring = "delete from T_User where id=" + id;

sqldb.ExecuteUpdate(deletestring);

}

特别注意

本页面的添加，修改功能都未实现，只提供了一个模式，不过使用和删除时是一样的。

学习心得

如果有不知道什么事件传递的参数个数和类型，可以随便写个错误的方法，然后调试的时候去分析有意义的参数。

疑问：当实现删除时，实现刷新时，实现修改时，我不用重新从数据库读取数据后再绑定到 Store, 而是通过刷新 Store 或者 GridPanel 实现

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!