Posted in Javascript onAugust 26, 2010
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(); }
ExtJs GridPanel简单的增删改实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@