当前位置: 代码迷 >> Web前端 >> Ext增删节查
  详细解决方案

Ext增删节查

热度:172   发布时间:2012-10-09 10:21:45.0
Ext增删改查
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
</head>
<script type="text/javascript">
	Ext.onReady(function(){
		//定义数据集对象
		var typeStore = new Ext.data.Store({//配置分组数据集
			//autoLoad :true,
			reader: new Ext.data.XmlReader({
				totalRecords: "results",
				record: "Users",  
				id: "id"
			},   
			Ext.data.Record.create([
				{name: 'id'},
				{name: 'username'},      
				{name: 'password'}  
			])
			),
			proxy : new Ext.data.HttpProxy({
				url : 'usersext.do?method=getUsersList'
			})
		})
		//创建工具栏组件
		var toolbar = new Ext.Toolbar([
			{text : '新增用户',iconCls:'add',handler : showAddUsersType},
			'-',
			{text : '修改用户',iconCls:'option',handler : showModifyUsersType},
			'-',
			{text : '删除用户',iconCls:'remove',handler : showDeleteUsersType}
		]);
		//创建Grid表格组件
		var cb = new Ext.grid.CheckboxSelectionModel()
		var usersGrid = new Ext.grid.GridPanel({
			applyTo : 'grid-div',
			tbar : toolbar,
			frame:true,
			store: typeStore,
			viewConfig : {
				autoFill : true
			},
			sm : cb,
			columns: [//配置表格列
				new Ext.grid.RowNumberer({
					header : '行号',
					width : 40
				}),//表格行号组件
				cb,
				{header: "编号", width: 80, dataIndex: 'id', sortable: true,hidden:true},
				{header: "姓名", width: 180, dataIndex: 'username', sortable: true},
				{header: "密码", width: 280, dataIndex: 'password', sortable: true}
			],
			 bbar: new Ext.PagingToolbar({
		        pageSize: 15,  
		        store: typeStore,
		        displayInfo: true,
		        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
		        emptyMsg: "没有记录"
	    	})
	    });
			typeStore.load({params:{start:0, limit:15}});
		//创建新增或修改用户类型信息的form表单
		Ext.QuickTips.init();
		Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
		var usersForm = new Ext.FormPanel({
			labelSeparator : ":",
			frame:true,
			border:false,
			items : [
				{
					xtype:'textfield',
					width : 200,
					allowBlank : false,
					blankText : '类型名称不能为空',
					name : 'username',
					fieldLabel:'姓名'
				},{
					xtype:'textfield',
					width : 200,
					name : 'password',
					fieldLabel:'密码'
				},{
					xtype:'hidden',
					name : 'id'
				}
			],
			buttons:[
				{
					text : '关闭',
					handler : function(){
						win.hide();
					}
				},{
					text : '提交',
					handler : submitForm
				}
			]
		});
		//创建弹出窗口
		var win = new Ext.Window({
			layout:'fit',
		    width:380,
		    closeAction:'hide',
		    height:200,
			resizable : false,
			shadow : true,
			modal :true,
		    closable:true,
		    bodyStyle:'padding:5 5 5 5',
		    animCollapse:true,
			items:[usersForm]
		});
		//显示新建用户类型窗口
		function showAddUsersType(){
			usersForm.form.reset();
			usersForm.isAdd = true;
			win.setTitle("新增用户信息");
			win.show();
		}
		//显示修改用户类型窗口
		function showModifyUsersType(){
			var usersList = getUsersIdList();
			var num = usersList.length;
			if(num > 1){
				Ext.MessageBox.alert("提示","每次只能修改一条用户信息。")
			}else if(num == 1){
				usersForm.isAdd = false;
				win.setTitle("修改用户信息");
				win.show();
				var usersId = usersList[0];
				loadForm(usersId);
			}
		}
		//显示删除用户对话框
		function showDeleteUsersType(){
			var usersList = getUsersIdList();
			var num = usersList.length;
			if(num > 1){
				Ext.MessageBox.alert("提示","每次只能删除一条用户信息。")
			}else if(num == 1){
				Ext.MessageBox.confirm("提示","您确定要删除所选用户吗?",function(btnId){
					if(btnId == 'yes'){
						var usersId = usersList[0];
						deleteUsers(usersId);
					}
				})
			}
		}
		//删除用户类型
		function deleteUsers(usersId){
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在删除用户信息请稍后......'
			});
			Ext.Ajax.request({
				url : 'usersext.do?method=deleteUsers',
				params : {usersId : usersId},
				method : 'POST',
				success : function(response,options){
					msgTip.hide();
					var result = Ext.util.JSON.decode(response.responseText);
					if(result.success){
						//服务器端数据成功删除后,同步删除客户端列表中的数据
						var index = typeStore.find('id',usersId);
						if(index != -1){
							var rec = typeStore.getAt(index)
							typeStore.remove(rec);
						}
						Ext.Msg.alert('提示','删除用户信息成功。');
					}else{
						Ext.Msg.alert('提示','该用户已包含'+result.num+'本用户信息不能删除!');
					}
				},
				failure : function(response,options){
					msgTip.hide();
					Ext.Msg.alert('提示','删除用户类型请求失败!');
				}
			});
		}
		//加载表单数据
		function loadForm(usersId){
			usersForm.form.load({
				waitMsg : '正在加载数据请稍后',//提示信息
				waitTitle : '提示',//标题
				url : 'usersext.do?method=getUsersById',//请求的url地址
				params : {usersId:usersId},
				method:'GET',//请求方式
				success:function(form,action){//加载成功的处理函数
					//Ext.Msg.alert('提示','数据加载成功');
				},
				failure:function(form,action){//加载失败的处理函数
					Ext.Msg.alert('提示','数据加载失败');
				}
			});
		}
		//提交表单数据
		function submitForm(){
			//判断当前执行的提交操作,isAdd为true表示执行用户类型新增操作,false表示执行用户类型修改操作
			if(usersForm.isAdd){
				//新增用户信息
				usersForm.form.submit({
					clientValidation:true,//进行客户端验证
					waitMsg : '正在提交数据请稍后',//提示信息
					waitTitle : '提示',//标题
					url : 'usersext.do?method=addUsers',//请求的url地址
					method:'POST',//请求方式
					success:function(form,action){//加载成功的处理函数
						win.hide();
						updateUsersList(action.result.usersId);
						Ext.Msg.alert('提示','新增用户成功');
					},
					failure:function(form,action){//加载失败的处理函数
						Ext.Msg.alert('提示','新增用户失败');
					}
				});
			}else{
				//修改用户信息
				usersForm.form.submit({
					clientValidation:true,//进行客户端验证
					waitMsg : '正在提交数据请稍后',//提示信息
					waitTitle : '提示',//标题
					url : 'usersext.do?method=modifyUsers',//请求的url地址
					method:'POST',//请求方式
					success:function(form,action){//加载成功的处理函数
						win.hide();
						updateUsersList(action.result.UsersId);
						Ext.Msg.alert('提示','修改用户成功');
					},
					failure:function(form,action){//加载失败的处理函数
						Ext.Msg.alert('提示','修改用户失败');
					}
				});
			}
		}
		//明细数据修改后,同步更新用户列表信息
		function updateUsersList(usersId){
			var fields = getFormFieldsObj(usersId);
			var index = typeStore.find('id',fields.id);
			if(index != -1){
				var item = typeStore.getAt(index);
				for(var fieldName in fields){
					item.set(fieldName,fields[fieldName]);
				}
				typeStore.commitChanges();
			}else{
				var rec = new Ext.data.Record(fields);
				typeStore.add(rec);
			}
		}
		//取得表单数据
		function getFormFieldsObj(usersId){
			var fields = usersForm.items;
			var obj = {};
			for(var i = 0 ; i < fields.length ; i++){
				var item = 	fields.itemAt(i);
				var value = item.getValue();
				obj[item.name] = value;
			}
			if(Ext.isEmpty(obj['id'])){
				obj['id'] = usersId;
			}
			return obj;
		}
		//取得所选用户
		function getUsersIdList(){
			var recs = usersGrid.getSelectionModel().getSelections();
			var list = [];
			if(recs.length == 0){
				Ext.MessageBox.alert('提示','请选择要进行操作的用户!');
			}else{
				for(var i = 0 ; i < recs.length ; i++){
					var rec = recs[i];
					list.push(rec.get('id'))
				}
			}
			return list;
		}   
	});
</script>
<body>
<div id='grid-div' style="width:100%; height:100%;"/>
</body>
</html>

?

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=basePath%>/pagesExt/js/excel.js"></script>
<title>收入列表</title>
</head>
<script type="text/javascript">
	Ext.onReady(function(){
		//定义数据集对象
		var bookStore = new Ext.data.Store({
			//autoLoad :true,  
			reader: new Ext.data.XmlReader({
				totalRecords: "results",
				record: "Book",
				id: "id"
			},
			Ext.data.Record.create([
				{name: 'id'},
				{name: 'bookName'},
				{name: 'author'},
				{name: 'typeName'},
				{name: 'price'},
				{name: 'brief'}
			])
			),
			proxy : new Ext.data.HttpProxy({
				url : 'bookext.do?method=getBookList'
			})
		})
		//创建工具栏组件
		var toolbar = new Ext.Toolbar([
			{text : '新增收入',iconCls:'add',handler:showAddBook},
			 '-',
			{text : '修改收入',iconCls:'option',handler:showModifyBook},
			 '-',
			{text : '删除收入',iconCls:'remove',handler:showDeleteBooks},
			'-',
			{text : '总收入',iconCls:'tot',handler : showTotalPay},
			'-', 
			new Ext.Toolbar.TextItem('按时间查询:'), 
			{  
				xtype:'datefield',
				width : 150,
				allowBlank : false,
				blankText : '不能为空',
				id : 'times',
				name : 'times',
				emptyText:'请选择时间', 
				format:'Y-m-d'
             },
			{iconCls:'find',handler:onItemCheck },
			'-',
			{text : '导出数据',iconCls:'down',handler:downExcel}
		]);  
		
		
		//创建Grid表格组件
		var cb = new Ext.grid.CheckboxSelectionModel()
		var bookGrid = new Ext.grid.GridPanel({
			applyTo : 'grid-div',
			frame:true,
			tbar : toolbar,
			store: bookStore,
			stripeRows : true,
			autoScroll : true, 
			viewConfig : {
				autoFill : true
			},
			sm : cb,
			columns: [//配置表格列
				new Ext.grid.RowNumberer({
					header : '行号',
					width : 40
				}),//表格行号组件
				cb,
				{header: "收入编号", width: 1, dataIndex: 'id', sortable: true,hidden:true},
				{header: "收入名称", width: 80, dataIndex: 'bookName', sortable: true},
				{header: "作者", width: 80, dataIndex: 'author', sortable: true},
				{header: "类型", width: 80, dataIndex: 'typeName', sortable: true},
				{header: "金额", width: 80, dataIndex: 'price', sortable: true},
				{header: "简介", width: 80, dataIndex: 'brief', sortable: true}
			],
			 bbar: new Ext.PagingToolbar({
		        pageSize: 15,    
		        store: bookStore,
		        displayInfo: true,
		        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
		        emptyMsg: "没有记录"
	    	})

		});
		bookStore.load({params:{start:0, limit:15}});
		
		//按时间查询方法
         function onItemCheck(){
       		  var dd=Ext.get('times').getValue();  
       		  if(dd=='请选择时间'){
       		      dd = "";
       		  }
              bookStore.reload({params:{start:0,limit:15,dd:dd}}); 
       };
		//创建新增或修改收入信息的form表单
		Ext.QuickTips.init();
		Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
		var bookForm = new Ext.FormPanel({
			labelSeparator : ":",
			frame:true,
			border:false,
			items : [
				{
					xtype:'textfield',
					width : 200,
					allowBlank : false,
					blankText : '收入名称不能为空',
					name : 'bookName',
					fieldLabel:'收入名称'
				},{
					xtype:'textfield',
					width : 200,
					allowBlank : false,
					blankText : '收入作者不能为空',
					name : 'author',
					fieldLabel:'作者'
				},{
					xtype:'combo',
					width : 200,
					allowBlank : false,
					blankText : '必须选择收入类型',
					hiddenName : 'bookTypeId',
					name : 'typeName',
					store : new Ext.data.Store({
						autoLoad :true,
						reader: new Ext.data.XmlReader({
							totalRecords: "results",
							record: "BookType",
							id: "id"
						},
						Ext.data.Record.create([
							{name: 'id'},
							{name: 'title'},
							{name: 'detail'}
						])
						),
						proxy : new Ext.data.HttpProxy({
							url : 'bookext.do?method=getBookTypeList'
						})
					}),//设置数据源
					allQuery:'allbook',//查询全部信息的查询字符串
					triggerAction: 'all',//单击触发按钮显示全部数据
					editable : false,//禁止编辑
					loadingText : '正在加载收入类型信息',//加载数据时显示的提示信息
					displayField:'title',//定义要显示的字段
					valueField : 'id',
					emptyText :'请选择收入类型',
					mode: 'remote',//远程模式
					fieldLabel:'类型'
				},{
					xtype:'textfield',
					width : 200,
					name : 'price',
					fieldLabel:'金额'
				},{
					xtype:'textarea',
					width : 200,
					name : 'brief',
					fieldLabel:'简介'
				},{
					xtype:'hidden',
					name : 'id'
				}
			],
			buttons:[
				{
					text : '关闭',
					handler : function(){
						win.hide();
					}
				},{
					text : '提交',
					handler : submitForm
				}
			]
		});
		//创建弹出窗口
		var win = new Ext.Window({
			layout:'fit',
		    width:380,
		    closeAction:'hide',
		    height:280,
			resizable : false,
			shadow : true,
			modal :true,
		    closable:true,
		    bodyStyle:'padding:5 5 5 5',
		    animCollapse:true,
			items:[bookForm]
		});
		//显示新建收入窗口
		function showAddBook(){
			bookForm.form.reset();
			bookForm.isAdd = true;
			win.setTitle("新增收入信息");
			win.show();
		}
		//显示修改收入窗口
		function showModifyBook(){
			var bookList = getBookIdList();
			var num = bookList.length;
			if(num > 1){
				Ext.MessageBox.alert("提示","每次只能修改一条收入信息。")
			}else if(num == 1){
				bookForm.form.reset();
				bookForm.isAdd = false;
				win.setTitle("修改收入信息");
				win.show();
				var bookId = bookList[0];
				loadForm(bookId);
			}
		}
		//显示删除收入对话框
		function showDeleteBooks(){
			var bookList = getBookIdList();
			var num = bookList.length;
			if(num == 0){
				return;
			}
			Ext.MessageBox.confirm("提示","您确定要删除所选收入吗?",function(btnId){
				if(btnId == 'yes'){
					deleteBooks(bookList);
				}
			})
		}
		//删除收入
		function deleteBooks(bookList){
			var bookIds = bookList.join('-');
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在删除收入信息请稍后......'
			});
			Ext.Ajax.request({
				url : 'bookext.do?method=deleteBooks',
				params : {bookIds : bookIds},
				method : 'POST',
				success : function(response,options){
					msgTip.hide();
					var result = Ext.util.JSON.decode(response.responseText);
					if(result.success){
						//服务器端数据成功删除后,同步删除客户端列表中的数据
						for(var i = 0 ; i < bookList.length ; i++){
							var index = bookStore.find('id',bookList[i]);
							if(index != -1){
								var rec = bookStore.getAt(index)
								bookStore.remove(rec);
							}
						}
						Ext.Msg.alert('提示','删除收入信息成功。');
					}else{
						Ext.Msg.alert('提示','删除收入信息失败!');
					}
				},
				failure : function(response,options){
					msgTip.hide();
					Ext.Msg.alert('提示','删除收入信息请求失败!');
				}
			});
		}
		//加载表单数据
		function loadForm(bookId){
			bookForm.form.load({
			   
				waitMsg : '正在加载数据请稍后',//提示信息
				waitTitle : '提示',//标题
				url : 'bookext.do?method=getBookById',//请求的url地址
				params : {bookId:bookId},
				method:'GET',//请求方式
				success:function(form,action){//加载成功的处理函数
					//Ext.Msg.alert('提示','数据加载成功');
				},
				failure:function(form,action){//加载失败的处理函数
					Ext.Msg.alert('提示','数据加载失败');
				}
			});
		}
		//提交表单数据
		function submitForm(){
			//判断当前执行的提交操作,isAdd为true表示执行收入新增操作,false表示执行收入修改操作
			if(bookForm.isAdd){
				//新增收入信息
				bookForm.form.submit({
					clientValidation:true,//进行客户端验证
					waitMsg : '正在提交数据请稍后',//提示信息
					waitTitle : '提示',//标题
					url : 'bookext.do?method=addBook',//请求的url地址
					method:'POST',//请求方式
					success:function(form,action){//加载成功的处理函数
						win.hide();
						updateBookList(action.result.bookId);
						Ext.Msg.alert('提示','新增收入成功');
					},
					failure:function(form,action){//加载失败的处理函数
						Ext.Msg.alert('提示','新增收入失败');
					}
				});
			}else{
				//修改收入信息
				bookForm.form.submit({
					clientValidation:true,//进行客户端验证
					waitMsg : '正在提交数据请稍后',//提示信息
					waitTitle : '提示',//标题
					url : 'bookext.do?method=modifyBook',//请求的url地址
					method:'POST',//请求方式
					success:function(form,action){//加载成功的处理函数
						win.hide();
						updateBookList(action.result.bookId);
						Ext.Msg.alert('提示','修改收入成功');
					},
					failure:function(form,action){//加载失败的处理函数
						Ext.Msg.alert('提示','修改收入失败');
					}
				});
			}
		}
		//明细数据修改后,同步更新收入列表信息
		function updateBookList(bookId){
			var fields = getFormFieldsObj(bookId);
			var index = bookStore.find('id',fields.id);
			if(index != -1){
				var item = bookStore.getAt(index);
				for(var fieldName in fields){
					item.set(fieldName,fields[fieldName]);
				}
				bookStore.commitChanges();
			}else{
				var rec = new Ext.data.Record(fields);
				bookStore.add(rec);
			}
		}
		//取得表单数据
		function getFormFieldsObj(bookId){
			var fields = bookForm.items;
			var obj = {};
			for(var i = 0 ; i < fields.length ; i++){
				var item = 	fields.itemAt(i);
				var value = item.getValue();
				if(item.getXType() == 'combo'){
					var index = item.store.find('id',value);
					if(index != -1){
						var selItem = item.store.getAt(index);
					}
					value = selItem.get('title');
				}
				obj[item.name] = value;
			}
			if(Ext.isEmpty(obj['id'])){
				obj['id'] = bookId;
			}
			return obj;
		}
		//取得所选收入
		function getBookIdList(){
			var recs = bookGrid.getSelectionModel().getSelections();
			var list = [];
			if(recs.length == 0){
				Ext.MessageBox.alert('提示','请选择要进行操作的收入!');
			}else{
				for(var i = 0 ; i < recs.length ; i++){
					var rec = recs[i];
					list.push(rec.get('id'))
				}
			}
			return list;
		};
		
		//查看总支出
		function showTotalPay(){
			winP.setTitle("您的总支出信息");
			winP.show();
		};
		//导出excel
		function downExcel(){ 
		   Ext.Ajax.request({
				url : 'analysis.do?method=crateInExcel',
				params : {type : 'b'},
				method : 'POST',
				success : function(response,options){
				   	Ext.Msg.alert('成功提示','导出数据成功!保存在您的C盘下的文件名为: 收入数据.xls。');
					 
				},
				failure : function(response,options){
					Ext.Msg.alert('失败提示','导出数据失败!');
				}
			});
        };

		
		//弹出总收入信息
		var sumIncome = document.getElementById("sumIncome").value; 
		var sumIncomeY = document.getElementById("sumIncomeY").value; 
		var winIn = new Ext.Window({
			layout:'fit',
		    width:370,
		    closeAction:'hide',
		    height:280,
			resizable : false,
			shadow : true,
			modal :true,
		    closable:true,
		    bodyStyle:'padding:5 5 5 5',
		    animCollapse:true,
			items:{  
					title:"总收入",  
					collapsible:true,
					html : '<br><center><font size = 6>本月总收入为:</font><font size = 5 color= red>'+sumIncome+'元</font></center><br/><center><font size = 6>本年总收入为:</font><font size = 5 color= red>'+sumIncomeY+'元</font></center><br/>'
				  }
		});

		//查看总收入
		function showTotalPay(){
			winIn.setTitle("您的总收入信息");
			winIn.show();
		}

	});
</script>
<body>
<div id='grid-div' style="width:100%; height:100%;"/>
<input type="hidden" name="sumIncome" id="sumIncome" value="${sumIncome }"/>
<input type="hidden" name="sumIncomeY" id="sumIncomeY" value="${sumIncomeY }"/>
</body>
</html>

??

  相关解决方案