ExtJs-GridPanel简单的增删改
1.首先看下效果图：
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();
}