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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
看了就知道什么是JSON
Dec 09 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
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实现的ID混淆算法类与用法示例
2018/08/10 PHP
优化javascript的执行速度
2010/01/23 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
前端微信支付js代码
2016/07/25 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
nodejs初始化init的示例代码
2018/10/10 NodeJs
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python内置函数OCT详解
2016/11/09 Python
Python反转序列的方法实例分析
2018/03/21 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Django配置文件代码说明
2019/12/04 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
医学院学生求职简历的自我评价
2013/10/24 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2014年稽查工作总结
2014/12/20 职场文书
新郎答谢词
2015/01/04 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
化工生产实习心得体会
2016/01/22 职场文书
PHP策略模式写法
2021/04/01 PHP
浅析NIO系列之TCP
2021/06/15 Java/Android
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android