ExtJs GridPanel 단순 추가, 삭제 및 수정 구현 code_extjs

1. 먼저 렌더링을 살펴보세요.

2.ext 코드

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

///
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 ,
높이: 250,
//스타일
bodyStyle: 'margin:5px 5px 5px 5px',
프레임: true,
xtype: 'filedset',
labelWidth: 60 ,
항목:
[
{
xtype: 'fieldset',
title: '문자 정보',
collapsible: true,
autoHeight: true,
autoWidth: true,
항목:
[
{
xtype: 'textfield',
name: 'RoleName',
fieldLabel: 'RoleName',
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' } ,
{ 이름: 'RoleName', 매핑: 'RoleName', 유형: 'string' }
]
})
})
//새 사용자 창
addWin = new Ext.Window({
id: 'addRoleWin',
title: '새 역할 추가',
width: 480,
height: 210,
//배경 마스크
modal: true,
//크기 재설정
resizing: false,
//닫기 버튼을 클릭할 때 수행되는 동작
closeAction: 'hide',
plain: true,
buttonAlign: 'center',
items:addForm,
buttons:
[
{ text: 'Close', handler: function() { Ext.getCmp('addRoleWin' ).hide( ); } },
{ text: 'Submit', 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",
메서드: 'post',
waitTitle: "잠시 기다려주세요",
waitMsg: '데이터 추가 중...',
success: function(form, action) {
submitButton.enable()
Ext.getCmp('roleGD') .store.reload();
userForm.ownerCt.hide();
},
failure: function(form, action) {
vartip = "New Failed!"; if (action.result.rspText != "")
tip = action.result.rspText
Ext.Msg.alert('tip',tip)
submitButton .enable(); >}
});
}
else {
submitButton.enable()
}
}//버튼 목록 클릭 이벤트
function btnAddClick () {
Ext.getCmp('addRoleForm').form.reset();
Ext.getCmp("addRoleWin").setTitle('역할 추가'); ").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: '데이터를 저장하는 중입니다.. .',
성공: function(form, action) {
submitButton.enable()
Ext.getCmp('roleGD').store.reload(
userForm.ownerCt.hide) ();
},
failure: function(form, action) {
vartip = "편집 활동을 저장하지 못했습니다!";
if (action.result.text != "" & action.result.text != null)
tip = action.result.text;
Ext.Msg.alert('tip', 팁);
submitButton.enable();
}
else {
}
}; 🎜>//버튼 클릭 이벤트 수정
function btnUpdateClick() {
vargrid = Ext.getCmp('roleGD')
if (grid.getSelectionModel().getSelections()[0] = = 정의되지 않음) {
Ext.Msg.alert("Prompt", "수정할 행을 선택하십시오.")
}
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; getCmp("addRoleWin").show();
Ext.getCmp("addRoleForm").load({
url: url,
waitTitle: "잠시 기다려주세요",
waitMsg: ' 로드 중 데이터...',
성공: function(form, action) {
},
failure: function(form, action) {
vartip = "제출 실패"
if (action.response.responseText != "")
tip = action.response.responseText;
Ext.Msg.alert('tip',tip)
}
}); >}
};
//역할 함수 삭제
function delRoleFunction() {
vargrid = Ext.getCmp('roleGD')
if (grid.getSelectionModel() .getSelections ()[0] == 정의되지 않음) {
Ext.Msg.alert("Prompt", "삭제할 문자를 선택하세요.");
}
else {
Ext.MessageBox . verify('Prompt', '선택한 역할을 삭제하시겠습니까? ', 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 } ,
메서드: '포스트',
범위: this,
콜백: 함수(옵션, 성공, 응답) {
if (성공) {
Ext.getCmp('roleGD') .store.reload();
}
else {
Ext.MessageBox.alert("프롬프트", "삭제 실패!")
}
}
});
}
})
}
};
//Toolbar
toolBar = new Ext.Toolbar({
항목:
[
{ text : '추가', id: 'btnAdd' },
'-',
{ text: '수정', id: 'btnUpdate' },
'-',
{ text: ' 삭제', handler:delRoleFunction }
]
});
//추가 버튼
var addUserBtn = Ext.getCmp('btnAdd')
addUserBtn.on(' 클릭', 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: { 시작: 0, 제한: 20} })
//grid
var roleGrid = new Ext.grid.GridPanel({
지역: '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' , 숨김: 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
})
//Layout
var roleView = new Ext.Panel({
renderTo: ' roleMain',
높이: 550,
레이아웃: '테두리',
테두리: false,
항목: [roleGrid]
})
},
삭제: function() {
}
});


3.linq 코드

코드 복사

코드는 다음과 같습니다.

시스템 사용;
System.Collections.Generic 사용;
System.Linq 사용;
System.Text 사용;
네임스페이스 XQH.ExtJs.LinqDatabase
{
공용 클래스 RoleLinqAccess
{
LinqDatabaseDataContext db = new LinqDatabaseDataContext();
/// <요약>
/// 获取所有角color
///
///
///
///
/// <반품>
공개 목록 GetAllRole(int start,intlimit,out int total)
{
var q = from r in db.XRole
select r;
전체 = q.Count();
if (한도 == 0)
{
return q.ToList();
}
else
{
return q.Skip(start).Take(limit).ToList();
}
}
///

/// 根据ID获取角color
///

///
/// <반품>
public XRole GetRoleById(int id)
{
var q = from r in db.XRole
where r.RoleId == id
select r;
q.First()를 반환합니다.
}
/// <요약>
/// 새로운 내용
///
///
/// <반품>
공개 목록 AddRole(XRole 역할)
{
db.XRole.InsertOnSubmit(role);
db.SubmitChanges();
db.XRole.ToList()를 반환합니다.
}
/// <요약>
/// 根据ID删除角color
///
///
/// <반품>
공개 목록 DelRoleById(int id)
{
var q = from r in db.XRole
where r.RoleId == id
select r;
db.XRole.DeleteAllOnSubmit(q);
db.SubmitChanges();
db.XRole.ToList()를 반환합니다.
}
/// <요약>
/// 更新角color
///
///
/// <반품>
공개 목록 UpdateRole(XRole 역할)
{
var q = from r in db.XRole
여기서 r.RoleId == role.RoleId
select r;
foreach(q의 XRole r)
{
r.RoleId = role.RoleId;
r.RoleName = 역할.RoleName;
}
db.SubmitChanges();
db.XRole.ToList()를 반환합니다.
}
}
}

4.ashx代码

复system代码 代码如下:

/// <요약>
/// 获取전체부角color
///
public void GetAllRoles()
{
StringBuilder jsonData = new StringBuilder();
int start = Convert.ToInt32(Request["start"]);
int Limit = Convert.ToInt32(Request["limit"]);
전체 합계 = 0;
목록 lsRole = roleAccess.GetAllRole(시작, 제한, 총 출력);
JsonConvert json = new JsonConvert();
jsonData = json.ToGridPanel(lsRole, 전체);
Response.Write(jsonData);
응답.끝();
}
/// <요약>
/// 根据ID获取角color
///
///
/// <반품>
public void GetRoleById()
{
StringBuilder jsonData = new StringBuilder();
부울 성공 = false;
string rspText = string.Empty;
string id = Request["RoleId"].ToString();
시도해 보세요
{
XRole role = roleAccess.GetRoleById(Convert.ToInt32(id));
성공 = 사실;
rspText = "성공";
JsonConvert json = new JsonConvert();
jsonData = json.ToFormPanel(성공, rspText, 역할);
}
catch(예외예외)
{
success = false;
rspText = ex.Message;
}
Response.Write(jsonData);
응답.끝();
}
/// <요약>
/// 새로운 내용
///
public void AddRole()
{
string jsonStr = string.Empty;
부울 성공 = false;
string rspText = string.Empty;
string roleName = 요청["RoleName"].ToString();
XRole 역할 = 새로운 XRole();
role.RoleName = 역할이름;

{
roleAccess.AddRole(role)을 시도해 보세요.
성공 = 사실;
rspText = "새로 시작합니다!";
}
catch(예외예외)
{
success = false;
rspText = ex.Message;
}
jsonStr = "{success:" 성공.ToString().ToLower() ",message:'" rspText "!'}";
Response.Write(jsonStr);
응답.끝();
}
/// <요약>
/// 根据角color编号修改角color
///
public void UpdateRoleById()
{
string jsonStr = string.Empty;
부울 성공 = false;
string rspText = string.Empty;
string RoleId = 요청["RoleId"].ToString();
string RoleName = 요청["RoleName"].ToString();
XRole 역할 = 새로운 XRole();
role.RoleId = Convert.ToInt32(RoleId);
role.RoleName = 역할이름;

{
roleAccess.UpdateRole(role)을 시도해 보세요.
성공 = 사실;
rspText = "성공!";
}
catch(예외예외)
{
success = false;
rspText = ex.Message;
}
jsonStr = "{success:" 성공.ToString().ToLower() ",message:'" rspText "!'}";
Response.Write(jsonStr);
응답.끝();
}
/// <요약>
/// 根据ID删除用户
///
public void DeleteRoleById()
{
string jsonStr = string.Empty;
부울 성공 = false;
string rspText = string.Empty;
시도
{
int id = Convert.ToInt32(Request["Id"].ToString());
목록 lsRole = roleAccess.DelRoleById(id);
성공 = 사실;
rspText = "성공";
}
catch(예외예외)
{
success = true;
rspText = ex.Message;
}
jsonStr = "{success:" 성공.ToString().ToLower() ",message:'" rspText "!'}";
Response.Write(jsonStr);
응답.끝();
}