Extjs4---grid的搜索、修改、删除功能---结合struts2、hibernate

欢迎光临我的小站，共同学习交流技术：http://www.luchg.com

直接上代码

这是源码下载地址：

http://www.luchg.com/resource/showResource_4.html

代码太多，其他的没有粘过来，想看的可以去下载源码

页面代码与上面几篇文章相同，只是导入的js文件不同

editgrid.js

//下面两行代码必须要，不然会报404错误
Ext.Loader.setConfig({enabled:true});
//我的searchGrid和ext4在同一目录下，所以引用时要到根目录去"../"
Ext.Loader.setPath('Ext.ux','../ext4_example_editgrid/ext4/examples/ux');

//预加载
Ext.require(
		[
		 	'Ext.grid.*',
		 	'Ext.toolbar.Paging',
		 	'Ext.util.*',
		 	'Ext.data.*',
		 	'Ext.state.*',
		 	'Ext.form.*',
		 	//注意引用
		 	'Ext.ux.form.SearchField',
		 	//Checkbox需要引用
		 	'Ext.selection.CheckboxModel' ,
		 	'Ext.selection.CellModel', 
		 	'Ext.ux.CheckColumn'
		 ]
);

Ext.onReady(
		function(){
			
			var isEdit = false; 
			//创建Model
			Ext.define(
					'User',
					{
						extend:'Ext.data.Model',
						fields:[
						        {name:'id',mapping:'id'},
						        {name:'name',mapping:'name'},
						        {name:'sex',mapping:'sex'},
						        {name:'age',mapping:'age'},
						        {name:'birthdate',mapping:'birthdate',type:'date',dataFormat:'Y-m-d'}
						]
					}
			)
			
			//创建本地数据源
			var sexStore = Ext.create(
					'Ext.data.Store',
					{
						fields:['id','name'],
						data:[
						      {"id":"1","name":"男"},
						      {"id":"2","name":"女"}
						]
					}
			);
			
			//创建数据源
			var store = Ext.create(
					'Ext.data.Store',
					{
						model:'User',
						
						//设置分页大小
						pageSize:5,
						proxy: {
					        type: 'ajax',
					        url : 'user_get',
					        reader: {
								//数据格式为json
					            type: 'json',
					            root: 'users',
					            //获取数据总数
					            totalProperty: 'totalCount'
					        }
					    },
						autoLoad:true
					}
			);
			
			//创建多选框
			 var checkBox = Ext.create('Ext.selection.CheckboxModel'); 
			var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',
					{
						//表示“双击”才可以修改内容（取值只能为“1”或“2”）
						clicksToEdit:2
					}
			
			);
			
			//创建grid
			var grid = Ext.create('Ext.grid.Panel',{
				
					tbar:[
						{
							xtype:'button',
							text:'添加',
							handler:'addUser'
						},{
							xtype:'button',
							text:'修改',
							handler:updateUser
						},{
							xtype:'button',
							text:'删除',
							handler:deleteUser
						}
					],
					
					store:store,
					//添加到grid
					selModel:checkBox,
					//表示可以选择行
					disableSelection: false,
					columnLines: true, 
					loadMask: true, 
					//添加修改功能
					plugins: [cellEditing] ,
					columns:[
					         {
					        	id:'id',
					        	//表头
					        	header:'编号',
					        	width:40,
					        	//内容
					        	dataIndex:'id',
					        	sortable:true,
					         	editor:{
					         		xtype:'textfield',
					         		allowBlank:false
					         	}
					         
					         },{
					        	 id:'name',
					        	 header:'姓名',
					        	 
					        	 width:100,
					        	 dataIndex:'name',
					        	 sortable:false,
					        	 editor:{
					        	 		xtype:'combobox',
					        	 		allowBlank:false
					         	 }
					        
					         	},{
					         		id:'sex',
					         		header:'性别',
					         		width:100,
					         		dataIndex:'sex',
					         		editor:{
					         			xtype:'combobox',
					         			store:sexStore,
					         			displayField:'name',
					         			valueField:'name',
					         			listeners:{     
	         			                    select : function(combo, record,index){ 
	         			                        isEdit = true; 
	         			                    } 
	         			                } 
					         		}
					         	},{
					         		id:'age',
						        	//表头
						        	header:'年龄',
						        	width:40,
						        	//内容
						        	dataIndex:'age',
						        	sortable:true,
						         	editor:{
						         		xtype:'numberfield',
						         		allowBlank:false,
						         		minValue:0,
						         		maxValue:100
						         	}
					         	},{
					         		id:'birthdate',
					         		header:'出生日期',
					         		width:100,
					         		dataIndex:'birthdate',
					         		//lazyRender: true,
					         					         		
					         		renderer: function(value){ 
										        return value ? Ext.Date.dateFormat(value, 'Y-m-d') : ''; 
											},
					         		
					         		editor:{
					         			xtype:'datefield',
					         			format:'Y-m-d',
					         			//minValue: '01/01/06' 
					         		}
					         		
					         		
					         	}
					],
					height:300, 
			        width:480, 
			        x:20, 
			        y:40, 
			        title: 'ExtJS4 可编辑Grid示例', 
			        renderTo: 'grid', 
			       
			        dockedItems:[
			                     //多选框控件
			                     {
			                    	 dock:'top',
			                    	 xtype:'toolbar',
			                    	 items:[
			                    	        {
			                    	        	itemId:'Button',
			                    	        	text:'显示所选',
			                    	        	//tooltip:'Add a new row',
			                    	        	//iconCls:'add',
			                    	        	handler:function(){
			                    	        		//得到选中的行
			                    	        		var record = grid.getSelectionModel().getSelection(); 
			                    	        		if(record.length==0){
			                    	        			 Ext.MessageBox.show({ 
    	        				                            title:"提示", 
    	        				                            msg:"请先选择您要操作的行!" 
    	        				                         })
    	        										return;
			                    	        		}else{
			                    	        			var ids = ""; 
        	        			                        for(var i = 0; i < record.length; i++){ 
        	        			                            ids += record[i].get("id") 
        	        			                            if(i<record.length-1){ 
        	        			                                ids = ids + ","; 
        	        			                            } 
        	        			                        }
        	        									Ext.MessageBox.show({ 
        	        				                            title:"所选ID列表", 
        	        				                            msg:ids 
        	        										}
        	        									)
			                    	        		}
			                    	        	}
			                    	        }
			                    	 ]
			                     },
			                     
			                     
			                     //添加搜索控件
			                     {
			                    	 dock: 'top', 
                    	             xtype: 'toolbar', 
                    	             items: { 
                    	                 width: 200, 
                    	                 fieldLabel: '搜索姓名', 
                    	                 labelWidth: 70, 
                    	                 xtype: 'searchfield', 
                    	                 store: store 
			                     	}
			                     },{ 
                    	             dock: 'bottom', 
                    	             xtype: 'pagingtoolbar', 
                    	             store: store, 
                    	             displayInfo: true, 
                    	             displayMsg: '显示 {0} - {1} 条，共计 {2} 条', 
                    	             emptyMsg: '没有数据' 
			                    }
			        ],
			        
				}
			)
			store.loadPage(1); 
			
			//更新用户
			function updateUser(){
				//获取修改的行的数据
				var records = store.getUpdatedRecords();
				//获取幻影行
				var phantoms = store.getNewRecords();
				//合并实际数据与幻影数据
				records = records.concat(phantoms);
				//判断是否有修改过的数据
				if(records.length == 0){
					Ext.Msg.alert(
							'提示',
							'没有任何数据被修改过！'
					);
				}else{
					Ext.Msg.confirm(
						"请确认",
						"是否真的要修改数据",
						function(button,text){
							if(button == "yes"){
								var datas = [];
								Ext.Array.each(records,function(record){
										datas.push(record.data);
										record.commit();
									}
								);
								//alert('datas'+datas.length);
								Ext.Ajax.request(
										{
											cache:false,
											//向服务器提交
											url:'user_update',
											method:'POST',
											params :{
												//参数名一定要与后台的一致
												//转为json数据
												updateUsers:Ext.encode(datas)
											},
										
											//success
											success : function(response){
												//把json数据转为对象
												//alert(res.responseText);
												var success = Ext.decode(response.responseText).success;
												
												//当后台更新成功时
												if(success){
													Ext.Array.each(records,
															function(record){
																//alert("修改成功！");
																//向store提交修改数据，页面效果
																record.commit();
															}	
													)
												}else{
													Ext.MessageBox.show(
															'提示！',
															'修改数据失败！'
													);
												}
											}
										}
								)
								
							}else{
								alert("未修改！");	
							}
						}
					);	
				}			
			}
			
			//删除用户
			function deleteUser(){
				//得到选中的行
				var data = grid.getSelectionModel().getSelection();
				
				if(data.length == 0) {
					Ext.MessageBox.show(
							'提示',
							'请选择您要操作的行！'
					);
				}else{
					Ext.Msg.confirm(
							'请确认',
							'是否真的要删除数据',
							function(button,text){
								if(button == "yes"){
									//用于存放所要删除的数据
									var ids = [];
									//遍历并放入ids中
									Ext.Array.each(
											data,
											function(record){
												ids.push(record.data);
											}
									);
									alert(ids.length);
									Ext.Ajax.request(
											
											{
												url:'user_delete',
												params:{
													//在后台接收deleteUsers为要删除的对象
													deleteUsers:Ext.encode(ids)
												},
												method:'POST',
												
												success:function (response){
													var success = Ext.decode(response.responseText).success;
													if(success){
														Ext.Array.each(data,function(record){
																//删除store中的数据，页面效果
																store.remove(record);
															}
																
														)
													}else{
														Ext.MessageBox.show(
																'提示',
																'删除失败'
														)
													}
												}
											}
									)
								}
							}
					);
					
					
				}
			}
		}
)

UserAction.java源码：

package action;

import java.util.ArrayList;
import java.util.List;

import net.sf.ezmorph.object.DateMorpher;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.util.JSONUtils;

import com.opensymphony.xwork2.ActionSupport;

import entity.User;

import biz.UserBiz;

public class UserAction extends ActionSupport {

	private UserBiz userBiz = new UserBiz();
	
	private String start;
	private String limit;
	private String query;
	//接收要修改的数据,一定要与前台一致,并添加get、set方法
	private String updateUsers;
	//接收要删除的数据，一定要与前台的一致
	private String deleteUsers;
	//必须要写get()、set()方法，否则在前台接收不到数据
	List<User> users;
	private long totalCount;
	//判断是否更新成功
	private boolean success;
	
	//得到所有数据
	public String get() {
		users =  userBiz.get(start, limit, query);
System.out.println(users.size());
		totalCount = userBiz.totalConnt();
System.out.println(totalCount);
		success = true;
		return SUCCESS;
	}
	
	//更新数据
	public String update(){
		JSONArray jsonArray = JSONArray.fromObject(updateUsers);
		List<User> updateUsers = new ArrayList<User>();
		for (int i = 0; i < jsonArray.size(); i++) {
			JSONObject jsonObject = jsonArray.getJSONObject(i);
			//这句话是对时间格式进行转换，否则会出现警告：
			//Can't transform property 'birthdate' from java.lang.String into java.util.Date. Will register a default Morpher
			JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(new String[] {"yyyy-MM-dd"}) );
			updateUsers.add((User)JSONObject.toBean(jsonObject, User.class));
		}
		userBiz.update(updateUsers);
		//users = userBiz.get(start, limit, query);
		//需要在dao中判断是否更新成功
		success = true;
		return SUCCESS;
	}
	
	//删除数据
	public String delete(){
		JSONArray jsonArray = JSONArray.fromObject(deleteUsers);
		List<User> deleteUsers = new ArrayList<User>();
		for (int i = 0; i < jsonArray.size(); i++) {
			JSONObject jsonObject = jsonArray.getJSONObject(i);
			//JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(new String[] {"yyyy-MM-dd"}) );
			deleteUsers.add((User)JSONObject.toBean(jsonObject, User.class));
		}
		userBiz.delete(deleteUsers);
		success = true;
		return SUCCESS;
	}
	
	//get、set方法
	public String getStart() {
		return start;
	}
	public void setStart(String start) {
		this.start = start;
	}
	public String getLimit() {
		return limit;
	}
	public void setLimit(String limit) {
		this.limit = limit;
	}
	public String getQuery() {
		return query;
	}
	public void setQuery(String query) {
		this.query = query;
	}
	public void setUsers(List<User> users) {
		this.users = users;
	}
	public List<User> getUsers() {
		return users;
	}
	public long getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(long totalCount) {
		this.totalCount = totalCount;
	}
	public String getUpdateUsers() {
		return updateUsers;
	}
	public void setUpdateUsers(String updateUsers) {
		this.updateUsers = updateUsers;
	}
	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}
	public String getDeleteUsers() {
		return deleteUsers;
	}
	public void setDeleteUsers(String deleteUsers) {
		this.deleteUsers = deleteUsers;
	}
}