`
沙舟狼客
  • 浏览: 161274 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs+struts（JSON）对表格的增删查改

StrutsjsonEXTJavaScriptCSS 
阅读更多

html代码：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link rel="stylesheet" href="ext/resources/css/ext-all.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/edit.js"></script>
</head>
<body>

</body>
</html>

 edit.js代码：

	function editRecord() {
	}
	
	function deleteRecord() {
		var grid = Ext.getCmp("table");
		var sm = grid.getSelectionModel();
		var sel = sm.getSelections();
		if(sm.hasSelection()){
			Ext.MessageBox.show({
				title:"删除用户记录",
				buttons:Ext.MessageBox.YESNOCANCEL,
				msg:"您确定要删除"+sel.length+"个用户吗?",
				fn:function(btn){
					if(btn=="yes"){
			
						var ids = "[";
						for(var i=0;i<sel.length;i++){
							var record = sel[i];
							ids+=record.get("id")+",";
						}
						ids = ids.substring(0,ids.length-1)+"]";
						alert(ids);
						var conn = new Ext.data.Connection();
						conn.request({
							url:"http://localhost:8686/myjob1/delete",
							params:{
								action:"delete",
								ids:ids
							},
							success:function(resp,opt){
								for(var i=0;i<sel.length;i++){
									var record = sel[i];
									grid.getStore().remove(record);
								}
							},
							failure:function(resp,opt){
								Ext.MessageBox.alert("错误","不能删除用户信息！");
							}
						});
					}
				}
			});
		}
		//grid.getStore().reload(null);
	}
	
	function addRecord() {
		var ds_model = Ext.data.Record.create([
			"id",
			"name",
			"password",
			"sex",
			"age"
		]);
		var grid = Ext.getCmp("table");
		var page = grid.getBottomToolbar();
		//pageCount = getRowSize()/getPageSize() + ((getRowSize()%getPageSize())==0?0:1);
		var store = grid.getStore();
		var row = store.getTotalCount();
		var pageSize = store.getCount();
		var pageCount = Math.ceil(row/pageSize);
		alert(row+"--"+pageSize+"--"+pageCount);
		page.changePage(pageCount);
		var conn = new Ext.data.Connection();
		conn.request({
			url:"http://localhost:8686/myjob1/add",
			method:"post",
			params:{
				name:"NewUser"
			},
			success:function(resp,opt){
				var insert_id = Ext.util.JSON.decode(resp.responseText).id;
				grid.getStore().insert(0,new ds_model({
					id:insert_id,
					name:"NewUser",
					password:"",
					sex:"true",
					age:0
				}));
				grid.startEditing(0,0);
			},
			failure:function(resp,opt){
				alert(resp+">>>>>>>>"+opt);
				Ext.MessageBox.alert("","不能插入新用户！");
			}
		});
		//grid.getStore().reload(null);
	}
	
	function rendererSex(val) {
		if (val == true) 
			return "<h4 style='color:green'>男</h4>";
		else 
			return "<h4 style='color:red'>女</h4>";
			
	}
	function selectAll(){
		var sm = Ext.getCmp("table").getSelectionModel();
		sm.selectAll();
	}
	function disSelect(){
		//Ext.MessageBox.alert("","你点击了编辑");
		var grid = Ext.getCmp("table");
		var sm = Ext.getCmp("table").getSelectionModel();
		for(var i=grid.getView().getRows().length-1;i>=0;i--){
	       if(sm.isSelected(i)){
	    	   sm.deselectRow(i);
	       }else{
	    	   sm.selectRows([i],true);   // rsm.selectRow(i,true); 也可以
	       }
		}
	}
	function saveRecord(){
		alert("save");
		var grid = Ext.getCmp("table");
		
	}
Ext.onReady(function(){
	var idEditor = new Ext.form.TextField();
	var nameEditor = new Ext.form.TextField();
	var passwordEditor = new Ext.form.TextField();
	var sexEditor = new Ext.form.TextField();
	var ageEditor = new Ext.form.TextField();
	var sm = new Ext.grid.CheckboxSelectionModel();
	var cm = new Ext.grid.ColumnModel([
		new Ext.grid.RowNumberer(),
		sm,
		{header:"id", dataIndex:"id", width: 120,sortable: true,editor:idEditor},
		{header:"用户名", dataIndex:"name", width: 120,sortable: true,editor:nameEditor},
		{header:"口令", dataIndex:"password", width: 120,sortable: true,editor:passwordEditor},
		{header:"性别", dataIndex:"sex", width: 80,editor:sexEditor},
		{header:"年龄", dataIndex:"age", width: 120,sortable: true,editor:ageEditor}
	]);
	
	var store = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({url:"http://localhost:8686/myjob1/list"}),
		reader: new Ext.data.JsonReader({totalProperty:'total', root:'list'}, [
		{name: 'id'},
		{name: 'name'},
		{name: 'password'},
		{name: 'sex'},
		{name: 'age'}
		])
	});
	store.load({params:{start:0, limit:20}});
	
	var grid = new Ext.grid.EditorGridPanel({
		renderTo:Ext.getBody(),
		title:"user info",
		height:650,
		id:"table",
		store:store,
		autoSizeColumns: true,
		cm:cm,
		sm:sm,
		tbar: new Ext.Toolbar({
						items:[
								{id:'selectAll',text:'全选', handler:selectAll},
								{id:'disSelect',text:'反选', handler:disSelect},
								{id:'delete',text:'删除', handler:deleteRecord},
								{id:'add',text:"添加",handler:addRecord},
								{id:'edit',text:"保存",handler:saveRecord}
							]
				}),
		bbar: new Ext.PagingToolbar({
			pageSize: 20,
			store: store,
			displayInfo: true,
			displayMsg: '显示第{0}条到第{1}记录，一共{2}条',
			emptyMsg: '没有记录'
		}),
		listeners:{
			afteredit:function(e){
				alert(e.record.get("id"));
				var conn = new Ext.data.Connection();
				conn.request({
					url:"update",
					params:{
						id:e.record.get("id"),
						field:e.field,
						value:e.value
					},
					success:function(resp,opt){
						e.record.commit();
					},
					failure:function(resp,opt){
						e.record.reject();
					}
				});
					
			}
		}
	});
	
});

 struts.xml代码：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
	<constant name="struts.objectFactory" value="spring" />
	<constant name="struts.i18n.encoding" value="UTF-8" />
	<package name="user" namespace="/" extends="json-default">
		<action name="login" class="userAction" method="login">
			<result name="login">
				/login.jsp
			</result>
			<result name="success" type="redirect">
				/welcome.jsp
			</result>
		</action>
		<action name="loginJSON" class="userAction" method="loginJSON">
			<result type="json"/>
		</action>
		<action name="list" class="userAction" method="list">
			<result type="json"/>
		</action>
		<action name="delete" class="userAction" method="delete">
			<result type="json"/>
		</action>
		<action name="add" class="userAction" method="add">
			<result type="json"/>
		</action>
		<action name="update" class="userAction" method="update">
			<result type="json"/>
		</action>
	</package>
</struts>

 UserAction.java代码

package action;

import java.util.Arrays;
import java.util.List;

import org.apache.struts2.json.annotations.JSON;

import service.UserService;
import util.Pager;
import mode.User;

import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport{
	private User user;
	private UserService service;
	private List<User> list;
	private int limit;
	private int start;
	private int total;
	private boolean success = true;
	private String ids;
	
	private String id;
	private String name;
	private String password;
	private boolean sex;
	private int age;
	
	private String field;
	private String value;
	
	
	public String getField() {
		return field;
	}

	public void setField(String field) {
		this.field = field;
	}

	public String getValue() {
		return value;
	}

	public void setValue(String value) {
		this.value = value;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public boolean isSex() {
		return sex;
	}

	public void setSex(boolean sex) {
		this.sex = sex;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}

	@JSON(serialize=false)
	public String getIds() {
		return ids;
	}

	public void setIds(String ids) {
		this.ids = ids;
	}

	public int getTotal() {
		return total;
	}

	public void setTotal(int total) {
		this.total = total;
	}
	@JSON(serialize=false)
	public int getLimit() {
		return limit;
	}

	public void setLimit(int limit) {
		this.limit = limit;
	}
	@JSON(serialize=false)
	public int getStart() {
		return start;
	}

	public void setStart(int start) {
		this.start = start;
	}
	public List<User> getList() {
		return list;
	}

	public void setList(List<User> list) {
		this.list = list;
	}
	@JSON(serialize=false)
	public UserService getService() {
		return service;
	}

	public void setService(UserService service) {
		this.service = service;
	}
	@JSON(serialize=false)
	public User getUser() {
		return user;
	}
	
	public void setUser(User user) {
		this.user = user;
	}
	public String login(){
		if(service.login(user.getName(), user.getPassword())){
			return SUCCESS;
		}
		return LOGIN;
	}
	public String loginJSON(){
		if(service.login(name, password)){
			success = true;
		}else {
			success = false;
		}
		return SUCCESS;
	}
	/*
	 * 1	1	5
	 * 2	6	10
	 * size*pagenow-pagesize+1=start
	 * pagenow = start+pagesize-1/size
	 */
	public String list(){
		System.out.println(start+" ------------------------    "+limit);
		/*0 20
		 * 
		 */
		int now = (start+1+limit-1)/limit;
		System.out.println(now);
		Pager pager = new Pager(limit, -1,now);
		list = service.list(pager);
		total = pager.getRowSize();
		return SUCCESS;
	}
	public String delete(){
		System.out.println(ids);
		String[] idArr = ids.substring(1,ids.length()-1).split(",");
		System.out.println(Arrays.toString(idArr)+"  "+idArr.length);
		service.deleteUserByIdArray(idArr);
		
		success=true;
		return SUCCESS;
	}
	public String add(){
		if(user==null){
			user = new User();
			user.setName(name);
			user.setAge(age);
			user.setPassword(password);
			user.setSex(sex);
			id = service.regsiter(user);
			success=true;
			System.out.println("add user-----");
		}
		
		return SUCCESS;
	}
	public String update(){
		if(id.startsWith("ext")){
			User user = new User();
			if(field.equals("name")){
				user.setName(value);
			}else if(field.equals("password")) {
				user.setPassword(value);
			}else if(field.equals("sex")){
				user.setSex(Boolean.parseBoolean(value));
			}else if(field.equals("age")){
				user.setAge(Integer.parseInt(value));
			}else{
				
			}
			service.regsiter(user);
		}else{
			System.out.println("id:"+id+";field:"+field+";value:"+value);
			User user = service.getUserById(id);
			if(field.equals("name")){
				user.setName(value);
			}else if(field.equals("password")) {
				user.setPassword(value);
			}else if(field.equals("sex")){
				user.setSex(Boolean.parseBoolean(value));
			}else if(field.equals("age")){
				user.setAge(Integer.parseInt(value));
			}else{
				
			}
			service.updateUserById(user);
		}
		success=true;
		return SUCCESS;
	}
}
 
分享到：
| spring2.5注解切面类出错，为什么？在线等
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXTJS4+STRUTS2+JAVA增删改查

    在EXTJS4中，可以通过配置Grid Panel的编辑器实现对表格数据的在线编辑，点击行操作按钮触发Ajax请求到STRUTS2 Action。STRUTS2接收到请求后，调用相应的JAVA服务方法进行数据库操作。对于“增加”操作，ACTION会...

    ExtJs + Struts2 + JSON 程序总结

    ExtJs + Struts2 + JSON 是一种常见的前端与后端数据交互的技术组合，常用于构建富客户端应用。这里我们详细探讨一下这三个技术组件以及它们如何协同工作。 首先，ExtJs 是一个JavaScript库，用于创建复杂的、用户...

    spring3+ibaits3+struts2.18+Extjs3整合增删查改

    "Spring3+iBatis3+Struts2.18+ExtJS3整合增删查改"是一个典型的Java Web开发组合，用于实现高效的数据管理和用户界面交互。下面我们将深入探讨这个组合中的每个组件及其在整体架构中的作用。 **Spring3**： Spring...

    extjs+struts2+hibernate+json登录程序

    ExtJS + Struts2 + Hibernate + JSON 登录程序是一个典型的Web开发示例，结合了前端JavaScript框架、MVC框架、持久层框架以及数据传输格式，实现了用户登录功能的前后端交互。下面将详细阐述这些技术及其在登录程序...

    Extjs+Struts2实现异步文件上传

    网上有些这样的例子，但是下了几个都没有跑起来，哎，希望那些发文章的人要发就发全的，别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传，没法上传图片无法看到效果，直接上源码吧。

    ExtJS+Struts2

    在"ExtJS+Struts2"的组合中，前端使用ExtJS进行界面设计和用户交互处理。例如，"简单增删改"功能通常会涉及到ExtJS的Grid Panel组件，它能展示数据表格，支持行操作，如添加新记录、删除现有记录以及编辑单元格内容...

    ExtJS4+Struts2.1的Grid 增删改查

    本文将深入探讨如何使用这两种技术实现Grid的增删改查功能，帮助新手理解ExtJS4与Struts2.1的交互机制。 首先，我们来看ExtJS4中的Grid组件。Grid是ExtJS中用于展示和管理数据的一种视图，它提供了一种灵活且可定制...

    @@@extjs+struts2+json plugin的例子

    综上所述，`@@@extjs+struts2+json plugin的例子`是一个综合运用`ExtJS`前端框架、`Struts2`后端框架以及`JSON`数据交换格式的Web应用示例。这样的组合可以构建出高性能、用户体验良好的企业级应用，同时利用`Struts...

    extjs+struts案例

    extjs+struts案例 extjs+struts案例

    Extjs+Struts整合入门实例

    总的来说，ExtJS+Struts的整合实例展示了如何利用这两者的优势，实现前后端分离的Web应用开发模式。前端利用ExtJS构建动态、交互性强的用户界面，后端利用Struts处理业务逻辑和数据操作。这种架构有利于提升用户体验...

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能实例

    在本例中，Struts2将与ExtJS交互，接收前端的Ajax请求，调用后端服务，执行CRUD操作，并将结果以JSON或其他格式返回给前端。Struts2的拦截器机制也使得我们可以方便地添加自定义的业务逻辑或验证规则。 最后，ExtJS...

    能运行的ExtJs+Struts2文件上传

    标题"能运行的ExtJs+Struts2文件上传"表明这是一个实现了文件上传功能的示例项目。在ExtJs中，可以利用其提供的FileInput组件创建一个文件选择器，用户可以选择文件并提交到服务器。Struts2则在服务器端处理文件上传...

    ExtJS+struts2+json登陆实例--源码

    这是一个基于ExtJS、Struts2和JSON的登录实例，适合初学者学习Web应用程序开发。这个实例演示了如何将前端的JavaScript框架ExtJS与后端的Java MVC框架Struts2结合，通过JSON进行数据交换实现用户登录功能。下面将...

    Extjs Tree + JSON + Struts2 例子

    在本文中，我们将探讨如何结合 ExtJS、JSON 和 Struts2 实现一个动态加载的树形菜单。ExtJS 是一个流行的 JavaScript 框架，用于构建富客户端应用，它支持多种数据源，包括 JSON。Struts2 是一个 Java Web 开发框架...

    extjs+struts1图书管理系统

    在"extjs+struts1图书管理系统"中，开发者可能会遇到一些关键技术点，例如如何利用ExtJS组件构建动态表格，如何使用Struts1的ActionForm和ActionMapping进行数据处理，以及如何通过Ajax技术实现前后端异步通信等。...

    Extjs+Struts2+JDBC

    在本例中，ExtJS可能被用来设计用户界面，如表格用于展示数据，按钮用于执行增删改查操作。 Struts2是一个基于MVC（Model-View-Controller）设计模式的Java Web框架，它简化了Java Servlet和JSP的开发。Struts2负责...

    extjs 跟 struts+json

    标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合，通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库，用于构建富客户端Web应用程序，而Struts是Java Web开发中的一个MVC...

    Extjs Tree + JSON + Struts2

    ExtJS Tree + JSON + Struts2 是一个常见的前端与后端交互技术组合，常用于构建动态的、数据驱动的树形结构界面。在这个项目中，`index.html` 是主页面，`tree.js` 包含了 ExtJS 的树组件相关的 JavaScript 代码，`...

    Extjs Tree + JSON + Struts2 示例源代码

    在我的随笔Extjs Tree + JSON + Struts2中我介绍了如何异步加载一个Extjs的树，但是很多网友留言说不能成功操作。现在我自己做了一个所有源代码的包，供大家下载。 有几点事项请大家注意 1、blogjava的文件上载要求...

Magicbox
Global site tag (gtag.js) - Google Analytics