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


Posted in Javascript onAugust 26, 2010

1.首先看下效果图:
ExtJs GridPanel简单的增删改实现代码
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.RoleManage, Ext.util.Observable, { 
init: function() { 
//表单 
addForm = new Ext.form.FormPanel({ 
id: 'addRoleForm', 
width: 460, 
height: 250, 
//样式 
bodyStyle: 'margin:5px 5px 5px 5px', 
frame: true, 
xtype: 'filedset', 
labelWidth: 60, 
items: 
[ 
{ 
xtype: 'fieldset', 
title: '角色信息', 
collapsible: true, 
autoHeight: true, 
autoWidth: true, 
items: 
[ 
{ 
xtype: 'textfield', 
name: 'RoleName', 
fieldLabel: '角色名称', 
emptyText: '必填', 
blankText: '角色名称不能为空', 
allowBlank: false, 
maxLength: 10, 
maxLengthText: '角色不能超过10个字符', 
anchor: '98%' 
} 
] 
}, 
{ 
xtype: 'fieldset', 
title: '角色说明', 
collapsible: true, 
autoHeight: true, 
autoWidth: true, 
items: 
[ 
{ html: '这是说明信息...' } 
] 
} 
], 
reader: new Ext.data.JsonReader({ 
root: 'data', 
fields: [ 
{ name: 'RoleId', mapping: 'RoleId', type: 'int' }, 
{ name: 'RoleName', mapping: 'RoleName', type: 'string' } 
] 
}) 
}); 
//新增用户窗口 
addWin = new Ext.Window({ 
id: 'addRoleWin', 
title: '新增角色', 
width: 480, 
height: 210, 
//背景遮罩 
modal: true, 
//重置大小 
resizable: false, 
//当关闭按钮被点击时执行的动作 
closeAction: 'hide', 
plain: true, 
buttonAlign: 'center', 
items:addForm, 
buttons: 
[ 
{ text: '关闭', handler: function() { Ext.getCmp('addRoleWin').hide(); } }, 
{ text: '提交', id: 'btnSubmit' } 
] 
}); 
//添加角色事件 
function addRoleFunction() { 
var submitButton = this; 
submitButton.disable(); 
var userForm = Ext.getCmp("addRoleForm"); 
if (userForm.form.isValid()) { 
userForm.form.doAction('submit', { 
url: "http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=AddRole", 
method: 'post', 
waitTitle: "请稍候", 
waitMsg: '正在添加数据...', 
success: function(form, action) { 
submitButton.enable(); 
Ext.getCmp('roleGD').store.reload(); 
userForm.ownerCt.hide(); 
}, 
failure: function(form, action) { 
var tip = "新增失败!"; 
if (action.result.rspText != "") 
tip = action.result.rspText; 
Ext.Msg.alert('提示', tip); 
submitButton.enable(); 
} 
}); 
} 
else { 
submitButton.enable(); 
} 
}; 
//添加按钮单击事件 
function btnAddClick() { 
Ext.getCmp('addRoleForm').form.reset(); 
Ext.getCmp("addRoleWin").setTitle('新增角色'); 
Ext.getCmp("addRoleWin").buttons[1].handler = addRoleFunction; 
Ext.getCmp("addRoleWin").show(); 
}; 
//修改角色事件 
function updateRoleFunction() { 
var submitButton = this; 
submitButton.disable(); 
var userForm = Ext.getCmp("addRoleForm"); 
var id = userForm.form.reader.jsonData.data[0].RoleId; 
if (userForm.form.isValid()) { 
userForm.form.doAction('submit', { 
url: 'http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=UpdateRoleById&RoleId=' + id, 
method: 'post', 
//params:{}, 
waitTitle: "请稍候", 
waitMsg: '正在保存数据...', 
success: function(form, action) { 
submitButton.enable(); 
Ext.getCmp('roleGD').store.reload(); 
userForm.ownerCt.hide(); 
}, 
failure: function(form, action) { 
var tip = "编辑活动保存失败!"; 
if (action.result.text != "" & action.result.text != null) 
tip = action.result.text; 
Ext.Msg.alert('提示', tip); 
submitButton.enable(); 
} 
}); 
} 
else { 
submitButton.enable(); 
} 
}; 
//修改按钮单击事件 
function btnUpdateClick() { 
var grid = Ext.getCmp('roleGD'); 
if (grid.getSelectionModel().getSelections()[0] == undefined) { 
Ext.Msg.alert("提示", "请选中要修改的行"); 
} 
else { 
Ext.getCmp('addRoleWin').setTitle('修改角色'); 
Ext.getCmp("btnSubmit").handler = updateRoleFunction; 
Ext.getCmp("addRoleForm").form.reset(); 
var roleId = grid.getSelectionModel().getSelections()[0].data.RoleId; 
var url = 'http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=GetRoleById&roleId=' + roleId; 
Ext.getCmp("addRoleWin").show(); 
Ext.getCmp("addRoleForm").load({ 
url: url, 
waitTitle: "请稍候", 
waitMsg: '正在加载数据...', 
success: function(form, action) { 
}, 
failure: function(form, action) { 
var tip = "提交失败"; 
if (action.response.responseText != "") 
tip = action.response.responseText; 
Ext.Msg.alert('提示', tip); 
} 
}); 
} 
}; 
//删除角色函数 
function delRoleFunction() { 
var grid = Ext.getCmp('roleGD'); 
if (grid.getSelectionModel().getSelections()[0] == undefined) { 
Ext.Msg.alert("提示", "请选中要删除的角色"); 
} 
else { 
Ext.MessageBox.confirm('提示', '确实要删除所选的角色吗?', function(btn) { 
if (btn == 'yes') { 
var conn = new Ext.data.Connection(); 
conn.request 
({ 
url: 'http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=DeleteRoleById', 
params: { Id: grid.getSelectionModel().getSelections()[0].data.RoleId }, 
method: 'post', 
scope: this, 
callback: function(options, success, response) { 
if (success) { 
Ext.getCmp('roleGD').store.reload(); 
} 
else { 
Ext.MessageBox.alert("提示", "删除失败!"); 
} 
} 
}); 
} 
}); 
} 
}; 
//工具栏 
toolBar = new Ext.Toolbar({ 
items: 
[ 
{ text: '新增', id: 'btnAdd' }, 
'-', 
{ text: '修改', id: 'btnUpdate' }, 
'-', 
{ text: '删除', handler:delRoleFunction } 
] 
}); 
//新增按钮 
var addUserBtn = Ext.getCmp('btnAdd'); 
addUserBtn.on('click', btnAddClick); 
//修改按钮 
var btnUpdate = Ext.getCmp('btnUpdate'); 
btnUpdate.on('click', btnUpdateClick); 
var dataStore = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({ 
url: 'http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=GetAllRoles' 
}), 
reader: new Ext.data.JsonReader({ 
root: 'Table', 
totalProperty: 'RecordCount', 
id: 'RoleId', 
fields: ['RoleId', 'RoleName'] 
}) 
}); 
dataStore.load({ params: { start: 0, limit: 20} }); 
//grid 
var roleGrid = new Ext.grid.GridPanel({ 
region: 'center', 
id: 'roleGD', 
title: '角色管理', 
store: dataStore, 
columns: 
[ 
new Ext.grid.RowNumberer({ header: "编号", width: 50 }), 
{ header: "RoleId", width: 50, sortable: false, dataIndex: 'RoleId', hidden: true }, 
{ header: "角色名称", width: 50, sortable: true, dataIndex: 'RoleName' } 
], 
loadMask: { msg: "加载中..." }, 
stripeRows: true, 
viewConfig: { 
forceFit: true 
}, 
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }), 
bbar: new Ext.PagingToolbar({ 
pageSize: 20, 
store: dataStore, 
displayInfo: true, 
displayMsg: "显示第 {0} 条到 {1} 条记录,一共 {2} 条", 
emptyMsg: "没有记录" 
}), 
tbar: toolBar 
}); 
//布局 
var roleView = new Ext.Panel({ 
renderTo: 'roleMain', 
height: 550, 
layout: 'border', 
border: false, 
items: [roleGrid] 
}); 
}, 
destroy: function() { 
} 
});

3.linq代码
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
namespace XQH.ExtJs.LinqDatabase 
{ 
public class RoleLinqAccess 
{ 
LinqDatabaseDataContext db = new LinqDatabaseDataContext(); 
/// <summary> 
/// 获取所有角色 
/// </summary> 
/// <param name="start"></param> 
/// <param name="limit"></param> 
/// <param name="total"></param> 
/// <returns></returns> 
public List<XRole> GetAllRole(int start,int limit,out int total) 
{ 
var q = from r in db.XRole 
select r; 
total = q.Count(); 
if (limit == 0) 
{ 
return q.ToList(); 
} 
else 
{ 
return q.Skip(start).Take(limit).ToList(); 
} 
} 
/// <summary> 
/// 根据ID获取角色 
/// </summary> 
/// <param name="id"></param> 
/// <returns></returns> 
public XRole GetRoleById(int id) 
{ 
var q = from r in db.XRole 
where r.RoleId == id 
select r; 
return q.First(); 
} 
/// <summary> 
/// 新增角色 
/// </summary> 
/// <param name="role"></param> 
/// <returns></returns> 
public List<XRole> AddRole(XRole role) 
{ 
db.XRole.InsertOnSubmit(role); 
db.SubmitChanges(); 
return db.XRole.ToList(); 
} 
/// <summary> 
/// 根据ID删除角色 
/// </summary> 
/// <param name="id"></param> 
/// <returns></returns> 
public List<XRole> DelRoleById(int id) 
{ 
var q = from r in db.XRole 
where r.RoleId == id 
select r; 
db.XRole.DeleteAllOnSubmit(q); 
db.SubmitChanges(); 
return db.XRole.ToList(); 
} 
/// <summary> 
/// 更新角色 
/// </summary> 
/// <param name="role"></param> 
/// <returns></returns> 
public List<XRole> UpdateRole(XRole role) 
{ 
var q = from r in db.XRole 
where r.RoleId == role.RoleId 
select r; 
foreach (XRole r in q) 
{ 
r.RoleId = role.RoleId; 
r.RoleName = role.RoleName; 
} 
db.SubmitChanges(); 
return db.XRole.ToList(); 
} 
} 
}

4.ashx代码
/// <summary> 
/// 获取全部角色 
/// </summary> 
public void GetAllRoles() 
{ 
StringBuilder jsonData = new StringBuilder(); 
int start = Convert.ToInt32(Request["start"]); 
int limit = Convert.ToInt32(Request["limit"]); 
int total = 0; 
List<XRole> lsRole = roleAccess.GetAllRole(start, limit, out total); 
JsonConvert<XRole> json = new JsonConvert<XRole>(); 
jsonData = json.ToGridPanel(lsRole, total); 
Response.Write(jsonData); 
Response.End(); 
} 
/// <summary> 
/// 根据ID获取角色 
/// </summary> 
/// <param name="id"></param> 
/// <returns></returns> 
public void GetRoleById() 
{ 
StringBuilder jsonData = new StringBuilder(); 
bool success = false; 
string rspText = string.Empty; 
string id = Request["RoleId"].ToString(); 
try 
{ 
XRole role = roleAccess.GetRoleById(Convert.ToInt32(id)); 
success = true; 
rspText = "success"; 
JsonConvert<XRole> json = new JsonConvert<XRole>(); 
jsonData = json.ToFormPanel(success, rspText, role); 
} 
catch (Exception ex) 
{ 
success = false; 
rspText = ex.Message; 
} 
Response.Write(jsonData); 
Response.End(); 
} 
/// <summary> 
/// 新增角色 
/// </summary> 
public void AddRole() 
{ 
string jsonStr = string.Empty; 
bool success = false; 
string rspText = string.Empty; 
string roleName = Request["RoleName"].ToString(); 
XRole role = new XRole(); 
role.RoleName = roleName; 
try 
{ 
roleAccess.AddRole(role); 
success = true; 
rspText = "新增成功!"; 
} 
catch (Exception ex) 
{ 
success = false; 
rspText = ex.Message; 
} 
jsonStr = "{success:" + success.ToString().ToLower() + ",message:'" + rspText + "!'}"; 
Response.Write(jsonStr); 
Response.End(); 
} 
/// <summary> 
/// 根据角色编号修改角色 
/// </summary> 
public void UpdateRoleById() 
{ 
string jsonStr = string.Empty; 
bool success = false; 
string rspText = string.Empty; 
string RoleId = Request["RoleId"].ToString(); 
string RoleName = Request["RoleName"].ToString(); 
XRole role = new XRole(); 
role.RoleId = Convert.ToInt32(RoleId); 
role.RoleName = RoleName; 
try 
{ 
roleAccess.UpdateRole(role); 
success = true; 
rspText = "修改成功!"; 
} 
catch (Exception ex) 
{ 
success = false; 
rspText = ex.Message; 
} 
jsonStr = "{success:" + success.ToString().ToLower() + ",message:'" + rspText + "!'}"; 
Response.Write(jsonStr); 
Response.End(); 
} 
/// <summary> 
/// 根据ID删除用户 
/// </summary> 
public void DeleteRoleById() 
{ 
string jsonStr = string.Empty; 
bool success = false; 
string rspText = string.Empty; 
try 
{ 
int id = Convert.ToInt32(Request["Id"].ToString()); 
List<XRole> lsRole = roleAccess.DelRoleById(id); 
success = true; 
rspText = "success"; 
} 
catch (Exception ex) 
{ 
success = true; 
rspText = ex.Message; 
} 
jsonStr = "{success:" + success.ToString().ToLower() + ",message:'" + rspText + "!'}"; 
Response.Write(jsonStr); 
Response.End(); 
}
Javascript 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
javascript radio 联动效果
Mar 04 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
javascript oop开发滑动(slide)菜单控件
Aug 25 #Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 #Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 #Javascript
js中判断控件是否存在
Aug 25 #Javascript
JavaScript浏览器选项卡效果
Aug 25 #Javascript
Javascript之旅 对象的原型链之由来
Aug 25 #Javascript
Javascript new关键字的玄机 以及其它
Aug 25 #Javascript
You might like
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
React实现轮播效果
2020/08/25 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
python分析apache访问日志脚本分享
2015/02/26 Python
python中的装饰器详解
2015/04/13 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
行政总监岗位职责
2013/12/05 职场文书
会计岗位职责范本
2014/03/07 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
高中班主任寄语
2019/06/21 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers