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 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
javascript 闭包疑问
Dec 30 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 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实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
Python 基础知识之字符串处理
2017/01/06 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Django REST framework 分页的实现代码
2019/06/19 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
酒店管理自荐信
2013/10/23 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
cf搞笑广告词
2014/03/14 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js