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