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); 980px; height: 65px"> <div id="myTime" style=" 237px; height: 19px; float:right; left: -11px; position: relative; top: 41px; font-size: 12px; color: #ffffff; z-index: 101;"> </div> <div id="UserName" style=" 187px; height: 18px; float:right; left: 152px; position: relative; top: 21px; font-size: 12px; color: #ffffff; z-index: 102;"> </div> <div id="logo" style=" 464px; height: 61px; background-image: url(Images/aa.gif);"> </div> </div> <div id="west" style=" 190px; height: 400px; float:left"> </div> <div id="center" style=" 579px; height: 400px; float:left"> </div> <div id="east" style=" 160px; height: 400px; float:left"> </div> </div> <div id="south" style=" 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, 613, title:'EMP详细信息', html:"<div id='grid'></div>"//动态生成一个div }, //左边,一般用来摆放菜单数据 { region:'west', split:true, margins:'0 0 0 0', layout:'accordion',//一种布局形式,很多js框架都提供这种布局,类似qq 190, el:'west', //填充指定id的区域内容到west区域 collapsible:true, title: 'EMP管理菜单', layoutConfig: { animate:true }, items: [ { title: '日常EMP管理', border:false, html:'<div id="tree1" style="overflow:auto;100%;height:100%"></div>' }, { title: 'EMP信息中心', border:false, html:'<div id="tree2" style="overflow:auto;100%;height:100%"></div>' } ] }, //右边 比较少用 { region:'east', 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 } ); } );
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", 100, dataIndex: 'JSON_empno' }, { header: "ename", 100, dataIndex: 'JSON_ename' }, { header: "job", 110, dataIndex: 'JSON_job' }, { header: "sal", 120, renderer: getColor, dataIndex: 'JSON_sal' }, { header: "mgr", 120, dataIndex: 'JSON_mgr' }, { header: "hiredate", 125, renderer: formatterdate, dataIndex: 'JSON_hiredate' }, { header: "comm", 120, dataIndex: 'JSON_comm' }, { header: "deptno", 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, 1005, cm:colModel, //行列 store:storeMain, //数据源 trackMouseOver:true, //鼠标特效 loadMask: true, autoShow : true, autoScroll: true, //头部 tbar: [ 'empNo查询', {xtype:'textfield',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} } ) }
左边为菜单栏,有三个子菜单分别演示用于对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: '80px', 150, name: 'Empno', allowBlank:false, blankText: '请输入Empno' //validator:CheckUserId,//指定验证的方法 //invalidText:'用户名已存在！' }, { xtype: 'textfield', fieldLabel: ' Ename', labelStyle: '80px', 150, name: 'Ename', allowBlank: false, blankText: '请输入Ename' //validator:CheckUserId,//指定验证的方法 //invalidText:'用户名已存在！' }, { xtype: 'textfield', fieldLabel: ' Job', labelStyle: '80px', 150, name: 'Job', allowBlank: false, blankText: '请输入Job' }, { xtype: 'textfield', fieldLabel: ' Mgr', labelStyle: '80px', 150, name: 'Mgr', allowBlank: false, blankText: '请输入Mgr' }, { xtype:'textfield', fieldLabel: ' Hiredate', labelStyle: '80px', 150, name: 'Hiredate', allowBlank:false, blankText: '请输入Hiredate' }, { xtype: 'textfield', fieldLabel: ' Sal', labelStyle: '80px', 150, name: 'Sal', allowBlank: false, blankText: '请输入Sal' }, { xtype: 'textfield', fieldLabel: ' Comm', labelStyle: '80px', 150, name: 'Comm', allowBlank: false, blankText: '请输入Comm' }, { xtype:'textfield', fieldLabel: ' Deptno', labelStyle: '80px', 150, name: 'Deptno', allowBlank:false, blankText: '请输入Deptno' } ], buttons: [ { id:'btnOk', text:'确 定', handler:function() { //如果验证合法 if (addUser.form.isValid()) { //弹出效果 Ext.MessageBox.show ( { msg: '正在保存，请稍等...', progressText: 'Saving...', 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', 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; //}
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('提示', '您还没有选中一行数，请选中在删除！'); } }
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', 280, reader: reader, items: [ { layout: 'column', border: false, items: [ { columnWidth: .5, layout: 'form', border: false, items: [ { xtype: 'textfield', fieldLabel: ' Empno', labelStyle: '100px', 80, name: 'Empno', allowBlank: false, blankText: '请输入Empno', hidden: true, hideLabel: true, }, { xtype: 'textfield', fieldLabel: ' Ename', labelStyle: '100px', 80, name: 'Ename', allowBlank: false, blankText: '请输入Ename' } ] }, { columnWidth: .5, layout: 'form', border: false, items: [ { xtype: 'textfield', fieldLabel: ' Job', labelStyle: '100px', 80, name: 'Job', allowBlank: false, blankText: '请输入Job' }, { xtype: 'textfield', fieldLabel: ' Mgr', labelStyle: '100px', 80, name: 'Mgr', allowBlank: false, blankText: '请输入Mgr' } ] } ] }, { xtype: 'textfield', fieldLabel: ' Hiredate', labelStyle: '100px', 150, name: 'Hiredate', allowBlank: false, blankText: '请输入Hiredate' }, { xtype: 'textfield', fieldLabel: ' Sal', labelStyle: '100px', 80, name: 'Sal', allowBlank: false, blankText: '请输入Sal' }, { xtype: 'textfield', fieldLabel: ' Comm', labelStyle: '100px', 80, name: 'Comm', allowBlank: false, blankText: '请输入Comm' }, { xtype: 'textfield', fieldLabel: ' Deptno', labelStyle: '100px', 80, name: 'Deptno', allowBlank: false, blankText: '请输入Deptno' } ], buttons: [{ text: '提交', handler: function () { //如果验证合法 if (updateEmp.form.isValid()) { //弹出效果 Ext.MessageBox.show ( { msg: '正在保存，请稍等...', progressText: 'Saving...', 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', 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(); } }
相应在后端我写了相应的一般处理程序处理增删查改的逻辑:和之前的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; } } } }
本文可用于一起学习!
END