標籤：easyui springmvc json crud
接一篇文章，今天上午實現了增加資料。下面是Jsp，裡面主要是看newUser()和saveUser().注意這函數裡的url，newUser()裡面去掉url屬性。還要注意的一個問題
<div id="toolbar"><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a></div>這裡面,<a href="#" >的#要改為javvascript:void(0); 這樣才不會出現建立使用者時找不到頁面的情況。
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!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"><base href="<%=basePath%>"><meta name="description" content="easyui help you build your web page easily!"><title>jQuery EasyUI CRUD Demo</title><link rel="stylesheet" type="text/css" href="css/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="css/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="css/easyui/demo.css"><script type="text/javascript" src="js/jquery-easyui-1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery-easyui-1.4.2/jquery.easyui.min.js"></script><style type="text/css">#fm{margin:0;padding:10px 30px;}.ftitle{font-size:14px;font-weight:bold;color:#666;padding:5px 0;margin-bottom:10px;border-bottom:1px solid #ccc;}.fitem{margin-bottom:5px;}.fitem label{display:inline-block;width:80px;}</style><script type="text/javascript">var url;function newUser(){$('#dlg').dialog('open').dialog('setTitle','New User');$('#fm').form('clear');//url = 'user/addUser';}function editUser(){var row = $('#dg').datagrid('getSelected');if (row){$('#dlg').dialog('open').dialog('setTitle','Edit User');$('#fm').form('load',row);url = 'update_user.php?id='+row.id;}}function saveUser(){$('#fm').form('submit',{url:'user/addUser',onSubmit: function(){return $(this).form('validate');},success: function(result){var result = eval('('+result+')');if (result.success){$.messager.show({title:'Info',msg:result.msg,showType:'fade',style:{right:'',bottom:''}});$('#dlg').dialog('close');// close the dialog$('#dg').datagrid('reload');// reload the user data} else {$.messager.show({title: 'Error',msg: result.msg});}}});}function removeUser(){var row = $('#dg').datagrid('getSelected');if (row){$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){if (r){$.post('remove_user.php',{id:row.id},function(result){if (result.success){$('#dg').datagrid('reload');// reload the user data} else {$.messager.show({// show error messagetitle: 'Error',msg: result.msg});}},'json');}});}}</script></head><body><h2>Basic CRUD Application</h2><div class="demo-info" style="margin-bottom:10px"><div class="demo-tip icon-tip"> </div><div>Click the buttons on datagrid toolbar to do crud actions.</div></div><table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"url="user/listUsers"toolbar="#toolbar" pagination="true"rownumbers="true" fitColumns="true" singleSelect="true"><thead><tr><th field="userId" width="50">UserId</th><th field="userName" width="50">UserName</th><th field=passWord width="50">PassWord</th><th field="enable" width="50">Enable</th></tr></thead></table><div id="toolbar"><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a></div><div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"closed="true" buttons="#dlg-buttons"><div class="ftitle">User Information</div><form id="fm" method="post" novalidate><div class="fitem"><label>UserId:</label><input name="UserId" class="easyui-validatebox" required="true"></div><div class="fitem"><label>UserName:</label><input name="UserName" class="easyui-validatebox" required="true"></div><div class="fitem"><label>PassWord:</label><input name="PassWord"></div><div class="fitem"><label>Enable:</label><input name="Enable" class="easyui-validatebox" ></div></form></div><div id="dlg-buttons"><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a></div></body></html>
package com.yang.bishe.controller;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;import com.yang.bishe.entity.Json;import com.yang.bishe.entity.User;import com.yang.bishe.service.interfaces.IUserService;@Controller@RequestMapping("/user")public class UserController extends BaseController {@Autowiredprivate IUserService userService;@RequestMapping("/list") public ModelAndView goList(){ return new ModelAndView("user/list"); }@RequestMapping("/listUsers") public String listUser(HttpServletRequest request,HttpServletResponse response) throws Exception { // return "/views/index";String hql="from User";List<User>users=userService.find(hql);//String result=userService.find(hql);writeJson(users,response);return null; }@RequestMapping("/addUser") public String addUser(User user,HttpServletRequest request,HttpServletResponse response) throws Exception{Json json = new Json();//用於向前端發送訊息if(userService.getById(user.getUserId())!=null){json.setMsg("建立使用者失敗，使用者已存在！");}else{userService.save(user);json.setMsg("建立使用者成功！");json.setSuccess(true);}writeJson(json,response);return null;}}
writeJson(json,response)這裡是把訊息傳給前端頁面，在script裡面的函數裡success:funciont(result);的result就存有controller裡的json訊息。
SpringMVC+easyUI CRUD 增加資料C
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
