ssh,json,easyui,ajax前后台交互（只提供主要代码）

最新推荐文章于 2018-06-28 21:02:10 发布

爱吃炒饭的逗比小豆豆

最新推荐文章于 2018-06-28 21:02:10 发布

阅读量1.4k

点赞数 2

分类专栏： java 前台 json jquery easyui ssh

本文链接：https://blog.csdn.net/doudou0809/article/details/76112387

版权

java 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

前台

6 篇文章 0 订阅

订阅专栏

easyui

6 篇文章 0 订阅

订阅专栏

1.导入json架包（其他架包自行查找）

2.后台代码

public String execute() throws Exception { 
			ActionService actionservice=new ActionService();
			System.out.println("sssssss");
			User user=new User();
			/*user.setUser_id(101);*/
			HttpSession session = ServletActionContext.getRequest().getSession();
			user=(User)session.getAttribute("param");
			System.out.println(user.getUser_id());
			List<UserContent> lPerson=actionservice.findContent(user);
			JSONArray json = JSONArray.fromObject(lPerson); 
			Map<String, Object> jsonMap=new HashMap<String,Object>();
			jsonMap.put("total", lPerson.size());
			jsonMap.put("rows", lPerson);
			resultObj=JSONObject.fromObject(jsonMap);
			System.out.println(resultObj);
			return SUCCESS;
			
		}

3.Struts代码

<package name="json" extends="json-default" namespace="/">
		<action name="testaction" class="com.jit.ssh.test.action.TestAction">
			<result name="success" type="json">
				<param name="root">resultObj</param>
			</result>
		</action>
		<action name="saveRowAction" class="com.jit.ssh.test.action.SaveRowAction">
			<result name="success" type="json">
				<param name="root">resultObj</param>
			</result>
		</action>
		<action name="deleteRowAction" class="com.jit.ssh.test.action.DeleteRowAction">
			<result name="success" type="json">
				<param name="root">resultObj</param>
			</result>
		</action>
	</package>

4.前台代码

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
	href="jquery-easyui-1.3.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="jquery-easyui-1.3.6/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript"
	src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script>
	$(function() {
		$('#tt')
				.datagrid(
						{
							title : 'Editable DataGrid',
							url : 'testaction', // 用于加载数据的url ，建议更名为loadDataAction
							iconCls : 'icon-edit',
							width : 530,
							height : 250,
							singleSelect : true,
							columns : [ [
									{
										field : 'uc_id',
										title : '编号',
										width : 50
									/*, editor:'numberbox' */},
									{
										field : 'content',
										title : '评论',
										width : 200,
										editor : 'text'
									},
									{
										field : 'date_time',
										title : '时间',
										width : 150
									/* ,editor:'text' */},
									{
										field : 'action',
										title : '操作',
										width : 70,
										align : 'center',
										formatter : function(value, row, index) {
											if (row.editing) {
												var s = '<a href="#" οnclick="saverow('
														+ index + ')">保存</a> ';
												var c = '<a href="#" οnclick="cancelrow('
														+ index + ')">取消</a>';
												return s + c;
											} else {
												var e = '<a href="#" οnclick="editrow('
														+ index + ')">编辑</a> ';
												var d = '<a href="#" οnclick="deleterow('
														+ index + ')">删除</a>';
												return e + d;
											}
										}
									} ] ],
							toolbar : [ {
								text : '增加',
								iconCls : 'icon-add',
								handler : addrow
							} ],
							onBeforeEdit : function(index, row) {
								row.editing = true;
								$('#tt').datagrid('refreshRow', index);
								editcount++;
							},
							onAfterEdit : function(index, row) {
								row.editing = false;
								$('#tt').datagrid('refreshRow', index);
								editcount--;
							},
							onCancelEdit : function(index, row) {
								row.editing = false;
								$('#tt').datagrid('refreshRow', index);
								editcount--;
							}
						});
	});
	var editcount = 0;
	/**
	* editrow编辑一行数据
	* @param index 待编辑行的索引
	*/
	function editrow(index) {
		$('#tt').datagrid('beginEdit', index);
	}
	/**
	* editrow删除一行数据
	* @param index 待删除行的索引
	*/
	function deleterow(index) {
		$.messager.confirm('确认', '是否真的删除?', function(r) {
			if (r) {
				// 获取uc_id
				var uc_id = $('#tt').datagrid('getData').rows[index].uc_id;
				// 前台删除
				$('#tt').datagrid('deleteRow', index);
				// 发送到后台数据库中进行删除
				$.ajax({
					url:'deleteRowAction', // 用于保存数据url
					type:'POST',
					data:{
						uc_id:uc_id
					},
					success:function(resp) {
						// ...
					},
					error:function(resp) {
						console.log('delete row error');
						//处理错误，弹出提示 略
					}
				});
			}
		});
	}
	/**
	* saverow 保存编辑数据
	* @param index 待保存行的索引
	*/
	function saverow(index) {
		// 关闭编辑
		$('#tt').datagrid('endEdit', index);
		// 获得编辑的数据
		var content = $('#tt').datagrid('getData').rows[index].content;
		var uc_id = $('#tt').datagrid('getData').rows[index].uc_id;
		// 发送给后台
		$.ajax({
			url:'saveRowAction', // 用于保存数据url
			type:'POST',
			data:{
				content:content,
				uc_id:uc_id?uc_id:null
			},
			success:function(resp) {
				// 更新datagrid数据
				$('#tt').datagrid('reload');
			},
			error:function(resp) {
				console.log('error');
				//处理错误，弹出提示 略
			}
		});
	}
	/**
	* saverow 取消当前行编辑
	* @param index 待保存行的索引
	*/
	function cancelrow(index) {
		$('#tt').datagrid('cancelEdit', index);
	}
	function addrow() {
		if (editcount > 0) {
			$.messager.alert('警告', '当前还有' + editcount + '记录正在编辑，不能增加记录。');
			return;
		}
		$('#tt').datagrid('appendRow', {
			uc_id : '',
			content : '',
			date_time : ''
		});
	}
</script>
<title>Insert title here</title>
</head>
<body>

	<table id="tt">
	</table>



</body>
</html>

5.效果图