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() {
//表单
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();
///
/// 获取所有角色
///
///
///
///
///
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();
}