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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
javascript常用方法汇总
Dec 02 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
vue实现列表的添加点击
Dec 29 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 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中的生成XML文件的4种方法分享
2012/10/06 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
深入理解 JS 垃圾回收
2019/06/03 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python如何将多个PDF进行合并
2019/08/13 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
某科技软件测试面试题
2013/05/19 面试题
企业活动策划方案
2014/06/02 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
pt-archiver 主键自增
2022/04/26 MySQL