《Ext JS高级程序设计》节选： 一个结合DataWrite和RowEditor的Grid示例(2)
在定义中，需要监听 beforeedit 事件，其作用是判断当前编辑状态是增加新记录还是编辑原有记录，如果是增加新记录，则 cid 字段的输入框需要处于允许编辑状态。否则， cid 字段的输入框需要处于不允许编辑状态。因为当新增一个记录时， Sotre 记录集中的每个记录的关键字使用的是 id 的值，而不是 cid 的值，虽然在新增操作成功后，会根据服务器端返回的记录修改这个关键字，但是，当再次编辑该记录并修改其 cid 值时，并不会再更新记录集中该记录的关键字，因而当你第 3 次编辑该记录时，在服务器端将找不到该记录，从而引发错误。这就是使用两个 id 的弊端。因而，要在这里禁止在编辑原有记录时修改 cid 值。
接着定义 cid 字段的 TextField ，代码如下：
var ideditor=new Ext.form.TextField({
allowBlank: false,maskRe:/[0-9]/,regex:/^(/d{3})*$/, regexText:" 请输入正确的编号 "
});
定义中，参数 maskRe 限制了输入框只能输入数字。参数 regex 限制了输入的数字的个数必须为 3 的倍数，而参数 regexText 则是验证 regex 时输出的错误信息。
最后定义 GridPanel ，代码如下：
var grid = new Ext.grid.GridPanel({
renderTo: 'grid1',
frame: true,
title: ' 一个结合 DataWrite 和 RowEditor 的 Grid 的示例 ',
autoScroll: true,
width:600,
height: 500,
store: store,
plugins: [editor],
columns : [
{header: " 编号 ", width: 100, sortable: true, dataIndex: 'cid',
editor: ideditor
},
{header: " 名称 ", width: 250, sortable: true, dataIndex: 'title',
editor: new Ext.form.TextField({
allowBlank: false
}
)},
{header: " 描述 ", width: 300, sortable: true, dataIndex: 'desc', editor: new Ext.form.TextField()}
],
tbar: [{
text: ' 增加 ',
handler: function(){
var u = new store.recordType({
cid : '',
title: '',
desc : ''
});
editor.stopEditing();
store.insert(0, u);
editor.startEditing(0);
}
}, {
text: ' 删除 ',
handler: function(){
var rec = grid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
grid.store.remove(rec);
}
}],
viewConfig: {
forceFit: true
}
});
在 GridPanel 中，增加按钮用来在 Store 中创建一个新记录，然后激活 RowEditor ，进入编辑状态。删除按钮则获取选择记录，并从 Store 中删除该记录。
现在要完成服务器端代码。
在 VS 2008 中，创建一个名称为“ Grid.ashx ”的一般处理程序，然后添加以下引用：
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using ExtShop;
using System.Linq;
接着修改 processRequest 方法，其代码如下：
public void ProcessRequest (HttpContext context) {
string act = context.Request["act"] ?? "";
string output = "";
switch (act)
{
case "list":
output = List(context.Request);
break;
case "create":
output = Create(context.Request);
break;
case "update":
output = Update(context.Request);
break;
case "del":
output = Del(context.Request);
break;
default:
output = "{success:false,msg:' 错误的访问类型。 '}";
break;
}
context.Response.ContentType="text/javascript";
context.Response.Write(output);
}
代码将根据提交 act 参数执行对应的方法。
首先完成 List 方法，其代码如下：
private string List(HttpRequest request)
{
ExtShopDataContext dc = new ExtShopDataContext();
return new JObject(
new JProperty("success", true),
new JProperty("total", dc.T_Categories.Count()),
new JProperty("msg", ""),
new JProperty("rows", new JArray(
from m in dc.T_Categories
select new JObject(
new JProperty("id", m.CategoryID),
new JProperty("cid", m.CategoryID),
new JProperty("title",m.Titel),
new JProperty("desc",m.Description)
)
))
).ToString();
}
因为不考虑分页问题，所以直接使用 JSON to LINQ 输入结果就可以了，要注意的就是，需要输出 2 次 CategoryID 值。
接着完成 Create 方法，其代码如下：
private string Create(HttpRequest request)
{
string rows = request["rows"] ?? "";
if (rows.Length > 0)
{
JObject r = JObject.Parse(rows);
string id = (string)r["cid"] ?? "";
string title = (string)r["title"] ?? "";
string desc = (string)r["desc"] ?? "";
if (id.Length > 0 & title.Length > 0)
{
try
{
ExtShopDataContext dc = new ExtShopDataContext();
var q = dc.T_Categories.SingleOrDefault(m => m.CategoryID == id);
if (q == null)
{
T_Categories rec = new T_Categories();
rec.CategoryID = id;
rec.Titel = title;
rec.Description = desc;
dc.T_Categories.InsertOnSubmit(rec);
dc.SubmitChanges();
return new JObject(
new JProperty("success", true),
new JProperty("total", 0),
new JProperty("msg", rows),
new JProperty("rows", new JArray(
new JObject(
new JProperty("id", id),
new JProperty("cid", id),
new JProperty("title", title),
new JProperty("desc", desc)
)
))
).ToString();
}
else
{
return new JObject(
new JProperty("success", false),
new JProperty("msg", " 编号“ "+id+" ”已存在。 ")
).ToString();
}
}
catch (Exception e)
{
return new JObject(
new JProperty("success", false),
new JProperty("msg", e.Message)
).ToString();
}
}
else
{
return new JObject(
new JProperty("success", false),
new JProperty("msg", " 错误的提交数据。 ")
).ToString();
}
}
else
{
return new JObject(
new JProperty("success", false),
new JProperty("msg"," 错误的提交数据。 ")
).ToString();
}
}
因为提交的参数是“ rows ”（该参数由 Store 定义的参数 root 的值决定），且值为 JSON 格式的字符串，因而最简单的方式是先将字符串转换为 JSON 对象，然后再处理。转换后将值分别保存到 id 、 title 和 desc 三个变量里。
保存成功一定要按 JsonStore 定义的格式返回数据，而且要返回新增的记录。如果是自动生成的 id ，需要获取并返回给 Store 。
接着要完成 Update 方法，代码如下：
private string Update(HttpRequest request)
{
string id = request["id"] ?? "";
string rows = request["rows"] ?? "";
if (rows.Length > 0)
{
JObject r = JObject.Parse(rows);
string cid = (string)r["cid"] ?? "";
string title = (string)r["title"] ?? "";
string desc = (string)r["desc"] ?? "";
if (title.Length <= 0)
{
return new JObject(
new JProperty("success", false),
new JProperty("total", 1),
new JProperty("msg", " 请输入名称。 "),
new JProperty("rows", new JArray(
new JObject(
new JProperty("id", id),
new JProperty("cid", id),
new JProperty("title", title),
new JProperty("desc", desc)
)
))
).ToString();
}
try
{
ExtShopDataContext dc = new ExtShopDataContext();
var q = dc.T_Categories.SingleOrDefault(m => m.CategoryID.ToLower() == id.ToLower());
if (q != null)
{
q.Titel = title;
q.Description = desc;
dc.SubmitChanges();
return new JObject(
new JProperty("success", true),
new JProperty("total", 1),
new JProperty("msg", ""),
new JProperty("rows", new JArray(
new JObject(
new JProperty("id", id),
new JProperty("cid", id),
new JProperty("title", title),
new JProperty("desc", desc)
)
))
).ToString();
}
else
{
return new JObject(
new JProperty("success", false),
new JProperty("msg", " 编号“ "+id+" ”不存在或已被删除。 "),
new JProperty("rows", new JArray(
new JObject(
new JProperty("id", id),
new JProperty("cid", id),
new JProperty("title", title),
new JProperty("desc", desc)
)
))
).ToString();
}
}
catch (Exception e)
{
return new JObject(
new JProperty("success", false),
new JProperty("msg", e.Message),
new JProperty("rows", new JArray(
new JObject(
new JProperty("id", id),
new JProperty("cid", id),
new JProperty("title", title),
new JProperty("desc", desc)
)
))
).ToString();
}
}
else
{
return new JObject(
new JProperty("success", false),
new JProperty("msg"," 错误的提交数据。 ")
).ToString();
}
}
在 Update 方法中，无论是返回错误信息还是成功信息，都要以 Store 中定义好的 JSON 格式返回，而且必须返回更新的记录，不然 Store 在确认记录时，会认为该条记录不存在而删除该记录，然后向服务器提交删除该记录的请求。关于这一点，在已存在数据的情况下进行调试时一定要小心，不然会误删数据。
在 Update 方法中还要注意，要更新记录的 id 会通过参数 id 提交，“ rows ”里提交的是更新的数据。
最后完成的是 Del 方法，其代码如下：
private string Del(HttpRequest request)
{
string id= request["rows"] ?? "";
try
{
id = id.Replace("/"", "");
ExtShopDataContext dc = new ExtShopDataContext();
var q = dc.T_Categories.SingleOrDefault(m=>m.CategoryID.ToLower()==id.ToLower());
if (q != null)
{
id = q.CategoryID;
dc.T_Categories.DeleteOnSubmit(q);
dc.SubmitChanges();
}
return new JObject(
new JProperty("success", true),
new JProperty("msg", " 删除编号为“ " + id + " ”的记录成功。 ")
).ToString();
}
catch(Exception e)
{
return new JObject(
new JProperty("success", false),
new JProperty("msg", e.Message)
).ToString();
}
}
在 Del 方法中，记录的 id 也是以参数“ rows ”提交的。返回的数据格式就不用 Store 定义的 JSON 格式返回了。
转载于:https://www.cnblogs.com/wdpp/archive/2009/10/30/2386523.html
《Ext JS高级程序设计》节选： 一个结合DataWrite和RowEditor的Grid示例(2)相关推荐
- 《Ext JS高级程序设计》节选： 一个结合DataWrite和RowEditor的Grid示例(1)
本示例将使用第 2 章定义的 T_Categories 表,结合 DataWrite 和 RowEditor 直接在 Grid 中实现添加.修改和删除操作. 首先创建一个" grid.htm ...
- 《Ext JS 高级程序设计》的目录与样张
第一部分 Ext Core 第1 章 Ext Core 重要概念 ············· 2 1.1 Ext.Element······························· 2 1. ...
- Ext JS高级程序设计
Ext JS高级程序设计 图书详细情况查看: http://www.china-pub.com/193076 市场价 :￥59.00 会员价 : ￥44.25(75折) [作 者]黄灯桥;徐会生 [同 ...
- 《Ext JS高级程序设计》节选：在CRUD操作中restful的设置以及使用Ext.Direct的问题...
在上一节的示例中,也可以在 Store 或 HttpProxy 中定义参数 restful 实现 RESTful 操作,不过在使用 RESTful 操作之前,先要了解清楚你所使用的服务器端语言是否支持 ...
- js高级程序设计第四部分
js高级程序设计:BOM.客户端检测 BOM window对象 在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 ...
- JS高级程序设计【红宝书】学习笔记——数据类型
目录 数据类型 Number类型 1.值的范围 2.NaN 3.数值转换 String类型 1.字符字面量(详见JS高级程序设计P63 2.转换为字符串 Symbol类型 Object类型 objec ...
- Js高级程序设计第三版学习(十二章)
Js高级程序设计第三版学习(十二章) 第十二章 DOM2和DOM3 1.样式: 访问样式属性 任何支持style特性的HTML元素都有一 ...
- JS高级程序设计——阅读笔记四
JS高级程序设计--阅读笔记四 第六章 集合引用类型 6.1 Object 6.2 Array 6.2.1 创建数组 from()函数 6.2.2 数组空位 6.2.3 数组索引 6.2.4 检测数组 ...
- 读js高级程序设计中有感
我现在都到js高级程序设计最难的章节,第六章,对象,虽然有人推荐不用全部读完,但我还是完整的读一遍吧,一遍可以敲代码一边看书理解加百度,我认为这种方式很好,可以加深理解增强印象,这是我觉得这本书比JS ...
最新文章
- 为何jsp 在resin下乱码，但在tomcat下却工作良好的问题
- CF1070L Odd Federalization 高斯消元
- Java柏林算法,柏林噪音 - 我做错了什么？
- react中webpack.config.js配置lessless-loader less
- 最短路径——Dijkstra算法以及二叉堆优化（含证明）
- 浏览器根对象document之字符串属性
- android控件在同一水平,android – 在linearlayout中水平对齐按钮,间距相等
- CentOS7通过定时脚本阻断异常IP连接SSH（实测）
- [面试]排列组合与概率计算（一）
- Ehcache 整合Spring 使用页面、对象缓存（转）
- NSA武器库知识整理
- [转]多媒体范例: 如何使用CSS来格式化TLF文本
- 【有利可图网】PS实战系列：PS美化婚纱照片
- html背景图片定位方法
- Linux自定义日志文件设置回滚（避免信息溢出）
- 针对屏幕显示模糊/清晰度不够的3种调节途径
- 刀塔OMG塔防1.23单机版使用方法
- 机型增多，时间延长，华为一口价更换原装电池活动惊喜不断
- 澳大利亚种植最辣辣椒 制作辣酱需穿防护服
- 【物联网树莓派毕设04】Arduino实现电梯及人脸识别门禁