etxjs+ssh的CURD(2)

接着是用户管理.不过,这里的Ext代码还没有用到面向对象的思想,

因为看论坛里有朋友说不喜欢看完整一大堆代码,所以我这里只贴一部分,如果有朋友需要完整的请下载附件,

我自己也还在学习阶段,如果朋友有好的建议请留留言,谢谢!!

 

前台部分代码:

 

一个grid是必要的

var grid = new Ext.grid.GridPanel({
   loadMask:{msg:'正在加载数据,请稍后'},//加载时显示的信息
   store:store,//加载名为store的数据集
   columns:[//要显示的列
       new Ext.grid.RowNumberer,//获得行号
      {header:'ID',dataIndex:'userid',sortable:true},
      {header:'用户名',dataIndex:'username'}//dataIndex对应store的fields中的字段
   ],
   bbar:new Ext.PagingToolbar({//定义分页工具栏
	store:store,//同样要指定对哪个store进行分页
	pageSize:5,//每页数据数
	displayInfo:true,//true时显示displayMsg,emptyMsg等提示信息
	displayMsg:'第{0}条到{1}条,一共{2}条', 
	emptyMsg:'没有记录'
   }),
   tbar:[{
      text:"新增用户",
      handler:addUser
   },"-",{//"-"到页面显示成"|"分隔符状

   }]
});

 这个grid加载的store我在外面定义,在grid中定义也行的

var store = new Ext.data.JsonStore({
   reader:new Ext.data.JsonReader(),//用于将一个json对象转换为元数据对象
   autoLoad:{params:{start:0,limit:5}},//如果有值传入，那么store的load会自动调用,加载时会将params中的属性发送到后台
   root:'result',//指定包含所有行对象的数组名
   totalProperty:'totalProperty',//总记录数
   proxy:new Ext.data.HttpProxy({ //用访问数据对象,用于访问某个url的
      url:'admin!queryAllUser.action'
   }),
   fields:["userid","username","password","sex","age"]//从后台接受的字段
});

 

新增用户和更新用户代码差不多,我就说更新用户的,但是radiogroup加载不到,我在网上暂时找不到合适的解决方法,如果有朋友知道麻烦留言指点一下

 

 

function updateUser(){
   var record = grid.getSelectionModel().getSelected();//获得当前选中的行的全部数据
   if(!record){//说明没选中任何一行
	 Ext.Msg.alert("提示","请选择一条记录");
   }
   if(!win){//如果win存在,就不用创建,配合closeAction使用
	var win = new Ext.Window({
	closeAction:"hide",//表示关闭窗口时将窗口隐藏,因为新建一个窗口将消耗不小的资源,速度也慢
	items:[{
		xtype:"form",//定义window中有一个form组件,用于提交数据
           	method:"post",
		items:[{
			xtype:"panel",
			layout:"column",
			labelWidth:50,
			border:false,
			items:[{
                           xtype:"panel",
                           layout:"form",
                           border:false,
		           items:[{
				xtype:"hidden",//不允许
				name:"userid"
			   },{
				xtype:"textfield",
				fieldLabel:"用户名",
				name:"username"
			  }]
		      },{
			xtype:"panel",
			layout:"form",
			border:false,
			items:[{
				xtype:"textfield",
				fieldLabel:"密码",
				name:"password",
				inputType:"password"
			}]
		   }]
		},{
			xtype:"panel",
			border:false,
			layout:"form",
			items:[{
				xtype:"radiogroup", 
			        fieldLabel : "类型", 
			        columns:1, //三个空心圆排成一竖列
			        items : [{
			             name : "sex",  
			             inputValue : "男",  //选中后sex的值是"男"
			             boxLabel : "男"
			         },{  
			             name : "sex",  
			             inputValue : "女",  
			             boxLabel : "女"
			         },{  
			              name : "sex",  
			              inputValue : "未知",  
			              boxLabel : "未知"
			        },]
			},{
				xtype:"panel",
                                layout:"form",
				border:false,
				items:[{
					xtype:"numberfield",
					fieldLabel:"年龄",
					name:"age"
				}]
			}]
		}]
	}]	,
	buttons:[{
		text:"保存",
		handler:function(){
			win.getComponent(0).getForm().submit({//getComponent(0)表示获得win的第一个组件,即form,再调用getForm()方法获得basicform对象,操作表单数据都要通过这个对象
				url:"admin!updateUser.action",
				success:function(){
				   Ext.Msg.alert("提示","更新用户成功");
				   win.close();
				   store.reload();
				}
			});
		}
	},{
		text:"重置",
		handler:function(){
			win.getComponent(0).getForm().reset();
		}
	},{
		text:"取消",
		handler:function(){
			win.close();
		}
	}]						
     });
     win.getComponent(0).getForm().loadRecord(record);//加载这一行的数据,但是radiogroup加载不到,我在网上暂时找不到合适的解决方法,如果有朋友知道麻烦留言指点一下
     win.show();
   }
}

 最后还有删除用户:

 部分代码如下

function deleteUser(){
   var record  =  //同上
   Ext.Msg.confirm("提示","是否确定删除?",function(b){//参数是响应的值
	if(b == "yes"){
		var userId = record.get("userid");//record获得方法同上,get方法获得该字段的值
		Ext.Ajax.request({//向后台发送请求
			url:"admin!deleteUser.action",
			params:{userId:userId},//将userId传到后台
			success:function(){
				Ext.Msg.alert("提示","删除成功!");
				store.reload();
			}
		});
	}
   });
}

 

更新用户的后台部分代码:

public String updateUser() throws IOException{
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType( "text/html;charset=utf-8");
		
		int userid = Integer.parseInt(request.getParameter( "userid"));//这样就可以获得前台传过来的字段
		String username = request.getParameter("username");
		if("".equals(username)){//对于数据库中非空的字段,需要进行判断
			response.getWriter().write( "{\"success\":false,\"errors\":{\"username\":\"用户名不能为空!\"}}");
			return null;
		}
		
		User user = new User();
		user.setUserid(userid);
		user.setUsername(username);
		
		as.updateUser(user);
		response.getWriter().write( "{success:true}");
		return null;
	}

 删除用户的后台:

通过 request.getParameter("userId")就可以进行操作了

 

 

不好意思,还少了加载store时查询用户的后台:

DAO中:

public List<User> queryAllUser(final String start,final String limit){
		final String sql = "select new map" 
			+	"(u.userid as userid,u.username as username,u.password as password,u.sex as sex,u.age as age)"
            + " from User u order by u.userid";//将查询到得数据转换成map再放进list中,并且指定根据userid排序
	
		return ht.executeFind(new HibernateCallback(){
			public Object doInHibernate(Session session){
				Query query = session.createQuery(sql);
				return query.setFirstResult(Integer.parseInt(start)).setMaxResults(Integer.parseInt(limit)).list();
			}
		});
	}

 service中:

public String queryAllUser(String start,String limit){
		List<User> listUser = ad.queryAllUser(start,limit);
		JSONArray json = JSONArray.fromObject(listUser);//将DAO传过来的list转化为json数组的形式
		String jsonMsg = "{\"totalProperty\":" + ad.queryUserSize() + ",\"result\":" + json.toString() + "}";//拼装传向前台的json数据
		return jsonMsg;
	}

 action中:

private String start;//其实定义为int的就行了
private String limit;//这里我设计得不好
	
public String queryAllUser() throws IOException{
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType( "text/html;charset=gb2312");
		response.getWriter().write( as.queryAllUser(getStart(),getLimit()));//往前台传送json数据
		System.out.println(as.queryAllUser(getStart(),getLimit()));//通过get方法即可获得前台autoLoad中传的属性
		return null;
	}