Asp.Net+Oracle+ExtJs简单的增删查改
正文:我觉得ExtJs相对其他Js框架比较难上手,一些api都是英文的,学习资源也相对可能少一些,这里根据我自己所学的东西做了一套的简单的增删查改,框架还是Oracle+Ado.Net.
首先还是一个empPage.html,总体的页面布局以及表格数据:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="/Css/main.css" rel="stylesheet" type="text/css" />
<link href="/Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/Ext/ext-all.js"></script>
<script type="text/javascript" src="/Ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="/Js/Main.js"></script>
<script type="text/javascript" src="/Js/GridMain.js"></script>
<script type="text/javascript" src="Js/AddEmpInfo.js"></script>
<script type="text/javascript" src="Js/DelEmpInfo.js"></script>
<script type="text/javascript" src="Js/EditEmpInfo.js"></script>
</head>
<body>
<form>
<div>
<div id="north" style=" background-image:url(/HotelUI/Images/main_top_BG.gif);width: 980px; height: 65px">
<div id="myTime" style="width: 237px; height: 19px; float:right; left: -11px; position: relative; top: 41px; font-size: 12px; color: #ffffff; z-index: 101;">
</div>
<div id="UserName" style="width: 187px; height: 18px; float:right; left: 152px; position: relative; top: 21px; font-size: 12px; color: #ffffff; z-index: 102;">
</div>
<div id="logo" style="width: 464px;
height: 61px; background-image: url(Images/aa.gif);">
</div>
</div>
<div id="west" style="width: 190px; height: 400px; float:left">
</div>
<div id="center" style="width: 579px; height: 400px; float:left">
</div>
<div id="east" style="width: 160px; height: 400px; float:left">
</div>
</div>
<div id="south" style="width: 980px; height: 105px; color:Red; margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;" align="center">
<a>Footer Infomation YZR</a>
</div>
</form>
</body>
</html>
Main.Js包含了整个页面布局的设计以及相应布局下的一些事件代码:
//页面主要布局
Ext.onReady
(
function()
{
//实例化布局对象
var view = new Ext.Viewport
(
{
layout:‘border‘, //声明为border布局
items:
[
//头部 logo
new Ext.BoxComponent
(
{
region:‘north‘,
el: ‘north‘, //填充指定id的区域内容到north区域(页面会有一个div的id为north)
height:65
}
),
//底部
new Ext.BoxComponent
(
{
region:‘south‘,
el: ‘south‘, //填充指定id的区域内容到south区域
height:20
}
),
//中间,主要的表格数据,根据业务决定
{
region:‘center‘,
el:‘center‘,
height:405,
width:613,
title:‘EMP详细信息‘,
html:"<div id=‘grid‘></div>"//动态生成一个div
},
//左边,一般用来摆放菜单数据
{
region:‘west‘,
split:true,
margins:‘0 0 0 0‘,
layout:‘accordion‘,//一种布局形式,很多js框架都提供这种布局,类似qq
width:190,
el:‘west‘, //填充指定id的区域内容到west区域
collapsible:true,
title: ‘EMP管理菜单‘,
layoutConfig:
{
animate:true
},
items:
[
{
title: ‘日常EMP管理‘,
border:false,
html:‘<div id="tree1" style="overflow:auto;width:100%;height:100%"></div>‘
},
{
title: ‘EMP信息中心‘,
border:false,
html:‘<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>‘
}
]
},
//右边 比较少用
{
region:‘east‘,
width:160,
collapsible:true,
title: ‘EMP右部模块‘,
html:"<div id=‘moneyGrid‘></div>"
}
]
}
);
//树形菜单 这边固定写死左边这颗树的数据,子节点和父节点是通过appendChild();实现的
// ===================================
var root = new Ext.tree.TreeNode
(
{
id:‘root‘,
text:‘树的根‘
}
);
//第一个根节点
var a = new Ext.tree.TreeNode
(
{
id:‘a‘,
icon:‘/ExtImg/Images/user3.gif‘,//图标文件
text: ‘普通EMP日常管理‘,
expanded:true //展开显示
}
);
//创建第一个根节点的第一个子节点
var a1 = new Ext.tree.TreeNode
(
{
id:‘a1‘,
icon: ‘/ExtImg/Images/write.gif‘,//图标文件
text: ‘新增EMP信息‘,
listeners:
{
‘click‘:function(){
AddEmpInfo();
}
}
}
);
//创建第一个根节点的第三个子节点
var a2 = new Ext.tree.TreeNode
(
{
id:‘a2‘,
icon: ‘/ExtImg/Images/select.gif‘,//图标文件
text: ‘删除EMP信息‘,
listeners:
{
‘click‘: function (){
DelEmpInfo();
}
}
}
);
//创建第一个根节点的第三个子节点
var a3 = new Ext.tree.TreeNode
(
{
id: ‘a3‘,
icon: ‘/ExtImg/Images/select.gif‘,//图标文件
text: ‘编辑EMP信息‘,
listeners:
{
‘click‘: function () {
EditEmpInfo();
}
}
}
);
//添加子节点到第一个根节点
a.appendChild(a1);
a.appendChild(a2);
a.appendChild(a3);
root.appendChild(a);
var tree = new Ext.tree.TreePanel
(
{
renderTo:"tree1",//页面id为tree1的div
root:root, //对应的根节点
animate:true, //动态显示
enableDD:false, //支持拖放
border:false,
lines:true, //虚线
rootVisible:false, //显示根节点
containerScroll: true
}
);
}
);
Main.Js
GridMain.Js是Emp表格数据的js代码:
//主界面的Grid
//获得输入的字符串
//var message = "";
//storeMain为数据来源
var storeMain=new Ext.data.Store
(
{
//表示从哪里获得数据
proxy:new Ext.data.HttpProxy
(
{
url:‘/Ajax/getEmpList.ashx‘
}
),
//解析Json
reader: new Ext.data.JsonReader
(
{
root: ‘data‘,
//主键
id: ‘JSON_empno‘,
//表格显示字段列
fields:
[
‘JSON_empno‘, ‘JSON_ename‘, ‘JSON_job‘, ‘JSON_sal‘, ‘JSON_mgr‘, ‘JSON_hiredate‘, ‘JSON_comm‘, ‘JSON_deptno‘
]
}
),
remoteSort:true
}
);
var grid;
Ext.onReady
(
function()
{
var colModel = new Ext.grid.ColumnModel
(
[
{ header: "empno", width: 100, dataIndex: ‘JSON_empno‘ },
{ header: "ename", width: 100, dataIndex: ‘JSON_ename‘ },
{ header: "job", width: 110, dataIndex: ‘JSON_job‘ },
{ header: "sal", width: 120, renderer: getColor, dataIndex: ‘JSON_sal‘ },
{ header: "mgr", width: 120, dataIndex: ‘JSON_mgr‘ },
{ header: "hiredate", width: 125, renderer: formatterdate, dataIndex: ‘JSON_hiredate‘ },
{ header: "comm", width: 120, dataIndex: ‘JSON_comm‘ },
{ header: "deptno", width: 120, dataIndex: ‘JSON_deptno‘ }
]
);
//设置金额颜色
function getColor(val)
{
if (val != "")
{
var value = parseInt(val);
if(value>2000){
return ‘<span style="color:red;">‘ + ‘$‘ + val + ‘</span>‘;
}
return ‘<span style="color:green;">‘+ ‘$‘ + val + ‘</span>‘;
}
}
function formatterdate(val, row) {
if (val != null) {
var date = new Date(val);
return date.getFullYear() + ‘-‘ + (date.getMonth() + 1) + ‘-‘
+ date.getDate();
}
}
grid = new Ext.grid.GridPanel
(
{
renderTo:‘grid‘,
height:500,
width:1005,
cm:colModel, //行列
store:storeMain, //数据源
trackMouseOver:true, //鼠标特效
loadMask: true,
autoShow : true,
autoScroll: true,
//头部
tbar:
[
‘empNo查询‘,
{xtype:‘textfield‘,width:170,id:‘title‘,name:‘title‘},
{text:‘搜索‘,iconCls:‘search‘,handler:SerachGrid},{xtype:‘tbseparator‘}
]
}
)
//加载数据
storeMain.load();
}
);
function SerachGrid()
{
var message = Ext.get(‘title‘).dom.value;
storeMain.reload
(
{
params:{msg:message}
}
)
}
GridMain.Js
左边为菜单栏,有三个子菜单分别演示用于对Emp表格数据的增删改:
//添加普通员工
function AddEmpInfo()
{
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = ‘side‘;
//编写一个作为window窗体 的item
var addUser = new Ext.FormPanel
(
{
labelWidth:75,
frame : true,
title : ‘请仔细填写表单‘,
width : 300,
waitMsgTarget : true,
items:
[
{
xtype:‘textfield‘,
fieldLabel: ‘ Empno‘,
labelStyle: ‘width:80px‘,
width:150,
name: ‘Empno‘,
allowBlank:false,
blankText: ‘请输入Empno‘
//validator:CheckUserId,//指定验证的方法
//invalidText:‘用户名已存在！‘
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Ename‘,
labelStyle: ‘width:80px‘,
width: 150,
name: ‘Ename‘,
allowBlank: false,
blankText: ‘请输入Ename‘
//validator:CheckUserId,//指定验证的方法
//invalidText:‘用户名已存在！‘
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Job‘,
labelStyle: ‘width:80px‘,
width: 150,
name: ‘Job‘,
allowBlank: false,
blankText: ‘请输入Job‘
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Mgr‘,
labelStyle: ‘width:80px‘,
width: 150,
name: ‘Mgr‘,
allowBlank: false,
blankText: ‘请输入Mgr‘
},
{
xtype:‘textfield‘,
fieldLabel: ‘ Hiredate‘,
labelStyle: ‘width:80px‘,
width:150,
name: ‘Hiredate‘,
allowBlank:false,
blankText: ‘请输入Hiredate‘
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Sal‘,
labelStyle: ‘width:80px‘,
width: 150,
name: ‘Sal‘,
allowBlank: false,
blankText: ‘请输入Sal‘
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Comm‘,
labelStyle: ‘width:80px‘,
width: 150,
name: ‘Comm‘,
allowBlank: false,
blankText: ‘请输入Comm‘
},
{
xtype:‘textfield‘,
fieldLabel: ‘ Deptno‘,
labelStyle: ‘width:80px‘,
width:150,
name: ‘Deptno‘,
allowBlank:false,
blankText: ‘请输入Deptno‘
}
],
buttons:
[
{
id:‘btnOk‘,
text:‘确 定‘,
handler:function()
{
//如果验证合法
if (addUser.form.isValid())
{
//弹出效果
Ext.MessageBox.show
(
{
msg: ‘正在保存，请稍等...‘,
progressText: ‘Saving...‘,
width:300,
wait:true,
waitConfig: {interval:200},
icon:‘download‘,
animEl: ‘saving‘
}
);
setTimeout(function(){}, 10000);
//提交到服务器
addUser.form.submit
(
{
url:‘/Ajax/addEmpInfo.ashx‘, //提交的页面路径
method:‘post‘,//提交方式为post
//提交成功的回调函数
success:function(form,action)
{
var flage = action.result.success;
//如果服务器端传过来的数据为true则表示登录成功
if (flage == true)
{
Ext.MessageBox.alert(‘恭喜‘,‘添加员工成功!‘);
newWin.hide();
}
},
//提交失败的回调函数
failure:function()
{
Ext.Msg.alert(‘错误‘,‘服务器出现错误请稍后再试！‘);
}
}
);
}
}
},
{
text:‘取 消‘,
handler:function()
{
newWin.hide();
}
}
]
}
);
//定义窗体
newWin = new Ext.Window
(
{
layout:‘fit‘,
width:350,
height:350,
collapsible:true, //允许缩放条
closeAction : ‘hide‘,
plain : true,
modal: ‘true‘, //启用遮罩
title : ‘添加EMP员工‘,
items : addUser
}
);
//显示窗体
newWin.show();
}
//Ajax验证是否已存在EmpNo
//var isok=false;
//function CheckUserId()
//{
// var UserId = Ext.get(‘LoginName‘).dom.value;
// //ajax提交
// Ext.Ajax.request
// (
// {
// url:‘/HotelUI/Form/CheckUserId.aspx‘,
// params:{name:UserId},
// success: function(response, options)
// {
//
// var check = Ext.util.JSON.decode(response.responseText);
// if(check.success == true) //已被注册
// {
// SetValue(false);
// }
// else
// {
// SetValue(true);
// }
// }
// }
// );
// //给变量赋值
// function SetValue(b)
// {
// isok = b;
// }
// return isok;
//}
AddEmpInfo
function DelEmpInfo() {
var selected = grid.getSelectionModel().getSelections();
if (selected != null) {
var ids = "";
Ext.each(selected, function () {
var id = this.get(‘JSON_empno‘);
ids = ids + id + ",";
})
ids = ids.substring(0, ids.length - 1);
//Ext.Msg.alert(‘提示‘, ids);
Ext.MessageBox.confirm("提示", "是否要删除", function (yes) {
if (yes == ‘yes‘) {
//Ext.Msg.alert(‘提示‘, ids);
//$.post("", { "action": "del", id: ids }, function (data) {
// Ext.Msg.alert(‘提示‘, data);
//});
Ext.Ajax.request({
url: ‘/Ajax/delEmpInfo.ashx‘,
params: { "action": "del", ids: ids },
method: ‘POST‘,
success: function (response, options) {
Ext.MessageBox.alert(‘删除成功‘, response.responseText);
storeMain.reload();
},
failure: function (response, options) {
Ext.MessageBox.alert(‘删除失败‘, ‘请求超时或网络故障,错误编号：‘ + response.status);
}
});
}
})
} else {
Ext.Msg.alert(‘提示‘, ‘您还没有选中一行数，请选中在删除！‘);
}
}
DelEmpInfo
function EditEmpInfo() {
var selected = grid.getSelectionModel().getSelections();
if (selected != null) {
var id = "";
Ext.each(selected, function () {
id = this.get(‘JSON_empno‘);
})
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = ‘side‘;
var reader = new Ext.data.JsonReader({}, [
{ name: ‘Empno‘, type: ‘string‘ },
{ name: ‘Ename‘, type: ‘string‘ },
{ name: ‘Job‘, type: ‘string‘ },
{ name: ‘Mgr‘, type: ‘int‘ },
{ name: ‘Hiredate‘, type: ‘string‘, dateFormat: ‘Y-m-d H:i:s‘ },
{ name: ‘Sal‘, type: ‘float‘ },
{ name: ‘Comm‘, type: ‘float‘ },
{ name: ‘Deptno‘, type: ‘int‘ }
]);
var updateEmp = new Ext.FormPanel({
labelAlign: ‘right‘,
title: ‘编辑Emp‘,
labelWidth: 50,
frame: true,
url: ‘/Ajax/EditEmpInfo.ashx‘,
width: 280,
reader: reader,
items: [
{
layout: ‘column‘,
border: false,
items:
[
{
columnWidth: .5,
layout: ‘form‘,
border: false,
items:
[
{
xtype: ‘textfield‘,
fieldLabel: ‘ Empno‘,
labelStyle: ‘width:100px‘,
width: 80,
name: ‘Empno‘,
allowBlank: false,
blankText: ‘请输入Empno‘,
hidden: true,
hideLabel: true,
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Ename‘,
labelStyle: ‘width:100px‘,
width: 80,
name: ‘Ename‘,
allowBlank: false,
blankText: ‘请输入Ename‘
}
]
},
{
columnWidth: .5,
layout: ‘form‘,
border: false,
items:
[
{
xtype: ‘textfield‘,
fieldLabel: ‘ Job‘,
labelStyle: ‘width:100px‘,
width: 80,
name: ‘Job‘,
allowBlank: false,
blankText: ‘请输入Job‘
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Mgr‘,
labelStyle: ‘width:100px‘,
width: 80,
name: ‘Mgr‘,
allowBlank: false,
blankText: ‘请输入Mgr‘
}
]
}
]
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Hiredate‘,
labelStyle: ‘width:100px‘,
width: 150,
name: ‘Hiredate‘,
allowBlank: false,
blankText: ‘请输入Hiredate‘
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Sal‘,
labelStyle: ‘width:100px‘,
width: 80,
name: ‘Sal‘,
allowBlank: false,
blankText: ‘请输入Sal‘
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Comm‘,
labelStyle: ‘width:100px‘,
width: 80,
name: ‘Comm‘,
allowBlank: false,
blankText: ‘请输入Comm‘
},
{
xtype: ‘textfield‘,
fieldLabel: ‘ Deptno‘,
labelStyle: ‘width:100px‘,
width: 80,
name: ‘Deptno‘,
allowBlank: false,
blankText: ‘请输入Deptno‘
}
],
buttons: [{
text: ‘提交‘,
handler: function () {
//如果验证合法
if (updateEmp.form.isValid()) {
//弹出效果
Ext.MessageBox.show
(
{
msg: ‘正在保存，请稍等...‘,
progressText: ‘Saving...‘,
width: 300,
wait: true,
waitConfig: { interval: 200 },
icon: ‘download‘,
animEl: ‘saving‘
}
);
setTimeout(function () { }, 10000);
//提交到服务器
updateEmp.form.submit
(
{
url: ‘/Ajax/EditEmpInfo.ashx‘, //提交的页面路径
method: ‘post‘,//提交方式为post
//提交成功的回调函数
success: function (form, action) {
var flage = action.result.success;
//如果服务器端传过来的数据为true则表示登录成功
if (flage == true) {
Ext.MessageBox.alert(‘恭喜‘, ‘修改成功!‘);
newWin.hide();
}
},
//提交失败的回调函数
failure: function () {
Ext.Msg.alert(‘错误‘, ‘服务器出现错误请稍后再试！‘);
}
}
);
}
}
}]
});
updateEmp.getForm().load({ url: ‘/Ajax/getEmpInfoById.ashx‘, method: ‘get‘, params: { empno: id } });
//定义窗体
newWin = new Ext.Window
(
{
layout: ‘fit‘,
width: 540,
height: 350,
collapsible: true, //允许缩放条
closeAction: ‘hide‘,
closable: true,
plain: true,
modal: ‘true‘,
title: ‘编辑Emp信息‘,
items: updateEmp
}
)
//显示窗体
newWin.show();
//Ext.Ajax.request({
// url: ‘/Ajax/delEmpInfo.ashx‘,
// params: { "action": "del", ids: ids },
// method: ‘POST‘,
// success: function (response, options) {
// Ext.MessageBox.alert(‘删除成功‘, response.responseText);
// storeMain.reload();
// },
// failure: function (response, options) {
// Ext.MessageBox.alert(‘删除失败‘, ‘请求超时或网络故障,错误编号：‘ + response.status);
// }
//});
} else {
Ext.Msg.alert(‘提示‘, ‘您还没有选中一行数，请选中在编辑！‘);
}
}
function formatterdate(val, row) {
if (val != null) {
var date = new Date(val);
return date.getFullYear() + ‘-‘ + (date.getMonth() + 1) + ‘-‘
+ date.getDate();
}
}
EditEmpInfo
相应在后端我写了相应的一般处理程序处理增删查改的逻辑:和之前的EasyUI的操作改动不大,这里就贴上pageEmpList.ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace myOracle.UI.Ajax
{
using myOracle.Bll;
using System.Data;
using myOracle.Utility;
/// <summary>
/// by YZR
/// </summary>
public class getEmpList : IHttpHandler
{
EmpBll bll = new EmpBll();
public void ProcessRequest(HttpContext context)
{
string pageSize = "20";
string pageIndex = "1";
DataTable dt =null;
int totalCount =0;
string JsonStr=string.Empty;
if ( context.Request.Form["msg"] != null)
{
string empno = context.Request.Form["msg"];
dt = DbHelper.GetDataTableFromIDataReader(bll.GetDataReaderByPage(" empno=‘" + empno+"‘", int.Parse(pageSize), int.Parse(pageIndex)));
totalCount = bll.GetCount(" empno="+empno);
JsonStr = JSonHelper.CreateJsonParameters(dt, true, totalCount, "data");
}
else
{
dt= DbHelper.GetDataTableFromIDataReader(bll.GetDataReaderByPage("", int.Parse(pageSize), int.Parse(pageIndex)));
totalCount = bll.GetCount(null);
JsonStr = JSonHelper.CreateJsonParameters(dt, true, totalCount, "data");
}
context.Response.Write(JsonStr);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
pageEmpList
本文可用于一起学习!
END
时间： 2024-10-13 00:34:20