ExtJs GridPanel simple addition, deletion and modification implementation code_extjs

1. First look at the rendering:

2.ext code

Copy code The code is as follows:

///
Ext.namespace('XQH. ExtJs.Frame');
XQH.ExtJs.Frame.RoleManage = function() {
this.init();
};
Ext.extend(XQH.ExtJs.Frame.RoleManage, Ext.util.Observable, {
init: function() {
//Form
addForm = new Ext.form.FormPanel({
id: 'addRoleForm',
width: 460 ,
height: 250,
//Style
bodyStyle: 'margin:5px 5px 5px 5px',
frame: true,
xtype: 'filedset',
labelWidth: 60 ,
items:
[
{
xtype: 'fieldset',
title: 'Character information',
collapsible: true,
autoHeight: true,
autoWidth: true,
items:
[
{
xtype: 'textfield',
name: 'RoleName',
fieldLabel: 'RoleName',
emptyText: 'Required',
blankText: 'The role name cannot be empty',
allowBlank: false,
maxLength: 10,
maxLengthText: 'The role cannot exceed 10 characters',
anchor : '98%'
}
]
},
{
xtype: 'fieldset',
title: 'Character Description',
collapsible: true,
autoHeight: true,
autoWidth: true,
items:
[
{ html: 'This is the description...' }
]
}
],
reader: new Ext.data.JsonReader({
root: 'data',
fields: [
{ name: 'RoleId', mapping: 'RoleId', type: 'int' } ,
{ name: 'RoleName', mapping: 'RoleName', type: 'string' }
]
})
});
//New user window
addWin = new Ext.Window({
id: 'addRoleWin',
title: 'Add new role',
width: 480,
height: 210,
//Background mask
modal: true,
//Reset size
resizable: false,
//The action performed when the close button is clicked
closeAction: 'hide',
plain: true,
buttonAlign: 'center',
items:addForm,
buttons:
[
{ text: 'Close', handler: function() { Ext.getCmp('addRoleWin' ).hide(); } },
{ text: 'Submit', id: 'btnSubmit' }
]
});
//Add role event
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: "Please wait",
waitMsg: 'Adding data...',
success: function(form, action) {
submitButton.enable();
Ext. getCmp('roleGD').store.reload();
userForm.ownerCt.hide();
},
failure: function(form, action) {
var tip = "New Failed!";
if (action.result.rspText != "")
tip = action.result.rspText;
Ext.Msg.alert('tip', tip);
submitButton .enable();
}
});
}
else {
submitButton.enable();
}
};
//Add button list Click event
function btnAddClick() {
Ext.getCmp('addRoleForm').form.reset();
Ext.getCmp("addRoleWin").setTitle('Add role');
Ext.getCmp("addRoleWin").buttons[1].handler = addRoleFunction;
Ext.getCmp("addRoleWin").show();
};
//Modify role events
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: "Please wait",
waitMsg: 'Saving data...',
success: function(form, action) {
submitButton.enable();
Ext.getCmp('roleGD').store.reload( );
userForm.ownerCt.hide();
},
failure: function(form, action) {
var tip = "Failed to save editing activity!";
if (action.result.text != "" & action.result.text != null)
tip = action.result.text;
Ext.Msg.alert('tip', tip);
submitButton.enable();
}
});
}
else {
submitButton.enable();
}
};
//Modify button click event
function btnUpdateClick() {
var grid = Ext.getCmp('roleGD');
if (grid.getSelectionModel().getSelections()[0] = = undefined) {
Ext.Msg.alert("Prompt", "Please select the row to be modified");
}
else {
Ext.getCmp('addRoleWin').setTitle( 'Modify role');
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: "Please wait",
waitMsg: ' Loading data...',
success: function(form, action) {
},
failure: function(form, action) {
var tip = "Submission failed";
if (action.response.responseText != "")
tip = action.response.responseText;
Ext.Msg.alert('tip', tip);
}
});
}
};
//Delete role function
function delRoleFunction() {
var grid = Ext.getCmp('roleGD');
if (grid.getSelectionModel() .getSelections()[0] == undefined) {
Ext.Msg.alert("Prompt", "Please select the character to be deleted");
}
else {
Ext.MessageBox .confirm('Prompt', 'Are you sure you want to delete the selected role? ', 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("Prompt", "Deletion failed!");
}
}
});
}
});
}
};
//Toolbar
toolBar = new Ext.Toolbar({
items:
[
{ text: 'Add', id: 'btnAdd' },
'-',
{ text: 'Modify', id: 'btnUpdate' },
'-',
{ text : 'Delete', handler:delRoleFunction }
]
});
//Add button
var addUserBtn = Ext.getCmp('btnAdd');
addUserBtn.on(' click', btnAddClick);
//Modify button
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: 'Role Management',
store: dataStore,
columns:
[
new Ext.grid.RowNumberer({ header: "Number", width: 50 }),
{ header: "RoleId", width: 50, sortable: false, dataIndex: 'RoleId' , hidden: true },
{ header: "Role Name", width: 50, sortable: true, dataIndex: 'RoleName' }
],
loadMask: { msg: "Loading... " },
stripeRows: true,
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
bbar : new Ext.PagingToolbar({
pageSize: 20,
store: dataStore,
displayInfo: true,
displayMsg: "Display records {0} to {1}, a total of {2 } bar",
emptyMsg: "No record"
}),
tbar: toolBar
});
//Layout
var roleView = new Ext.Panel({
renderTo: 'roleMain',
height: 550,
layout: 'border',
border: false,
items: [roleGrid]
});
},
destroy: function() {
}
});

3.linq code

Copy code The code is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace XQH.ExtJs.LinqDatabase
{
public class RoleLinqAccess
{
LinqDatabaseDataContext db = new LinqDatabaseDataContext();
///

/// 获取所有角色
///

///
///
///
///
public List 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();
}
}
///

/// 根据ID获取角色
///

///
///
public XRole GetRoleById(int id)
{
var q = from r in db.XRole
where r.RoleId == id
select r;
return q.First();
}
///

/// 新增角色
///

///
///
public List AddRole(XRole role)
{
db.XRole.InsertOnSubmit(role);
db.SubmitChanges();
return db.XRole.ToList();
}
///

/// 根据ID删除角色
///

///
///
public List 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();
}
///

/// 更新角色
///

///
///
public List 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代码

复制代码 代码如下:

///

/// 获取全部角色
///

public void GetAllRoles()
{
StringBuilder jsonData = new StringBuilder();
int start = Convert.ToInt32(Request["start"]);
int limit = Convert.ToInt32(Request["limit"]);
int total = 0;
List lsRole = roleAccess.GetAllRole(start, limit, out total);
JsonConvert json = new JsonConvert();
jsonData = json.ToGridPanel(lsRole, total);
Response.Write(jsonData);
Response.End();
}
///

/// 根据ID获取角色
///

///
///
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 json = new JsonConvert();
jsonData = json.ToFormPanel(success, rspText, role);
}
catch (Exception ex)
{
success = false;
rspText = ex.Message;
}
Response.Write(jsonData);
Response.End();
}
///

/// 新增角色
///

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();
}
///

/// 根据角色编号修改角色
///

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();
}
///

/// 根据ID删除用户
///

public void DeleteRoleById()
{
string jsonStr = string.Empty;
bool success = false;
string rspText = string.Empty;
try
{
int id = Convert.ToInt32(Request["Id"].ToString());
List 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();
}