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

主要目的

a. 掌握获取 GridPanel 当前行的各个字段值的方法
b. 掌握如何将前台数据传递到后台,并将后台操作结果返回到前台
c. 掌握如何获取和设置 button 和 textField 控件的文本值

主要内容

a. 我们先在页面中添加三个 ext 组件:store, menu,gridpanel

b. 将 gridpanel 的contextmenuID 设置为 menu 控件的ID, 从而为GridPanel 添加右键菜单


复制代码 代码如下:

<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 可以不设置,设置了的话,就可以使用方法 GridPanel1.getSelectionModel().getSelected().id 来获取该行 id 字段所对应的值。
使用该方法的前提是在GridPanel 中设置其选择方式为行选择模式,代码会在后面贴出。Name 对应于数据库表中的字段名。


复制代码 代码如下:

<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 设为 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 实现

时间: 2010-06-14

ExtJS GridPanel 根据条件改变字体颜色

1.在GridPanel中加入GridView 复制代码 代码如下: <View> <ext:GridView ID="GridView1" runat="server"> <GetRowClass Fn="setRowBg" /> </ext:GridView> </View> 2.加入js脚本 复制代码 代码如下: <script language="javascri

ExtJS 2.0 GridPanel基本表格简明教程

ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.ColumnModel定义.而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore.SimpleStroe.GroupingSto

ExtJs设置GridPanel表格文本垂直居中示例

业务场景,需要实现最终效果图如下:  GridPanel代码如下配置: 复制代码 代码如下: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'center', title : '列表详细信息', columnLines : true, loadMask : true, store : 'test_store', viewConfig : { forceFit : true, scrollOffset : 0 }, ancho

ExtJs GridPanel简单的增删改实现代码

1.首先看下效果图: 2.ext代码 复制代码 代码如下: /// <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" /> Ext.namespace('XQH.ExtJs.Frame'); XQH.ExtJs.Frame.RoleManage = function() { this.init(); }; Ext.extend(XQH.ExtJs.Frame.RoleMana

JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

表格GridPanel概述 ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义).而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同

Extjs4 GridPanel的主要配置参数详细介绍

1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设置该配置项 sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel enableHdMenu:

Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法

在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中 如下图: 但是这个一般没有什么用处,只是用于后台取值的作用. so 加一个属性:hideable:false就可以搞定了 复制代码 代码如下: { header: "attendanceId", dataIndex: "attendanceId", hideable: false, hidden: true },

Ext第一周 史上最强学习笔记---GridPanel(基础篇)

如果你想实现什么特效,这个文字不适合你,但如果你想Ext文章,我想鄙人的小文非常适合你. 另:这篇教程是建立在Ext2.2上的.这个很多教程都没说明.让人很糊涂.我在此特别说明 网上很多教程,但是实际使用并不是很多,我想作为一个星期一个星期的总结来给各位网络上的朋友带来帮助.希望各位有用.我会从每个细节都说明,尽量不漏掉作为初学者需要知道的基础知识.第一次写教程,见笑了. 因为我学这个是这样一个过程,通过一个控件了解其他的控件,剩下的就是属性查API了.API我自己在翻译CHM版的.因为是个人操

Javascript学习笔记之 对象篇(四) : for in 循环

先上范例: // Poisoning Object.prototype Object.prototype.bar = 1; var foo = {moo: 2}; for(var i in foo) { console.log(i); // prints both bar and moo } 这里我们要注意两点,一是 for in 循环会忽略 enumerable 设置为 false 的属性.例如一个数组的 length 属性.第二是,由于 for in 会遍历整个原型链,所以当原型链过长时,会

Java中jqGrid 学习笔记整理——进阶篇(二)

相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

spring boot 学习笔记(入门篇)

简介: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,spring boot整合了所有的框架(不知道这样比喻是否合适). 优点: 其实就是简单.快速.方便!平时如果我们需要搭建一个spring web项目的时候需要怎么

jqGrid 学习笔记整理——进阶篇(一 )

在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&

php学习笔记之基础知识

php学习至今一年有余,笔记积累挺多的,也挺杂的,写篇文章整理一下吧. php基础部分 PHP 输出文本的基础指令:echo 和 print. echo和print的区别 echo是PHP语句, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用) echo 输出一个或者多个字符串. print 只能打印出简单类型变量的值(如int,string) print_r 可以打印出复杂类型变量的值(如数组,对象) var_dump和print_r的区别 var_dump返回

Javascript学习笔记之 函数篇(三) : 闭包和引用

Javascript 中一个最重要的特性就是闭包的使用.因为闭包的使用,当前作用域总可以访问外部的作用域.因为 Javascript 没有块级作用域,只有函数作用域,所以闭包的使用与函数是紧密相关的. 模拟私有变量 复制代码 代码如下: function Counter(start) {     var count = start;     return {         increment: function() {             count++;         },      

seajs学习教程之基础篇

介绍 众所周知前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现.类似于c/c++的include,java中的import关键字,在js中也定义了require关键字,用以引进依赖模块. 由于规范的多样性,模块化的实现也是各有各的不同. nodejs遵从的就是commonJS规范,它有着一些形式上的约定: 1.require为函数,该函数接受一个字符串作为模块标示符 2.req

RxSwift学习教程之基础篇

前言 我们在 iOS 开发过程中,几乎无时无刻都要面对异步事件的处理.例如,按键点击.数据保存..音频后台播放.交互动画展示.这些事件并不具备特定时序性,甚至它们可能同时发生. 虽然 Apple 提供了通知.代理.GCD.闭包等异步机制,但是这些机制缺乏一个统一的抽象表述.另外,这些机制在处理共享的可变数据或状态时不够清晰简练.当然,这并不是说编写优雅的异步代码不现实.毕竟与其他平台相比 iOS 的异步机制还是很强大的. 幸运的是,我们能够通过 RxSwift 优雅的处理异步代码. 至于 RxS

ios学习笔记之基础数据类型的转换

前言 前几天在做一些小功能的时候,忽然发现有的基础数据转换都忘记了,于是赶紧整理下记下来!方便自己以后查阅,也给有需要的朋友们一些参考,下面话不多说,来看详细的内容. 一.NSString 字符串拼接: NSString *string = [NSString stringWithFormat:@"%@%@",对象,对象]; 字符串与int int intString = [newString intValue]; NSString *string = [NSString string