jqueryeasyUI(0 建立CRUD應用)
阿新 • • 發佈：2018-11-03
easyUI是一套基於jquery的UI外掛,easyUI的目標就是幫主web開發者輕鬆點打造出豐富且美觀的UI介面,開發者不需要編寫複雜的js,也不需要對css樣式有深刻的瞭解,只需要連線一定的html標籤
優點
1 基於jquery使用者介面外掛的集合
2 為一些當前用於互動的JS應用提供必要的功能
3 easyUI支援兩種頁面渲染的方式 js方式 （如：$('#p').panel({...})） 和html標記方式（如：class="easyui-panel"）
4 支援H5(通過data-options屬性)
5 開發產品時可節省時間和資源
6 簡單,簡單但很強大
7 支援擴充套件,可根據自己的需求擴充套件控制元件
8 目前的不足之處正在通過版本跌迭代完善
準備工作
準備資料庫(提供資料來源與儲存)
準備一個SSM專案(提供後臺訪問)
完成的功能: 使用easyUI實現crud操作
jsp頁面
<%@ 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"> <title>easyUI 建立 DataGrid 來顯示使用者資訊</title> <!-- <link rel="stylesheet" type="text/css" href="css/easyui.css"> <link rel="stylesheet" type="text/css" href="css/icon.css"> <link rel="stylesheet" type="text/css" href="css/demo.css"> --> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/demo/demo.css"> <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> </head> <body> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript"> var url; function newUser(){ //開啟一個對話方塊 $('#dlg').dialog('open').dialog('setTitle','New User'); $('#fm').form('clear'); url = 'http://127.0.0.1:8080/SPR/insert.do'; } function editUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $('#dlg').dialog('open').dialog('setTitle','Edit User'); $('#fm').form('load',row); url = 'update.do?id='+row.id; }else{ alert("請選擇一個使用者操作") } } function saveUser(){ console.log(url) $('#fm').form('submit',{ url: url, onSubmit: function(){ return $(this).form('validate'); }, success: function(result){ //var result = eval('('+result+')'); //console.log(result) if (result=="success"){ $('#dlg').dialog('close'); // close the dialog $('#dg').datagrid('reload'); // reload the user data } else { $.messager.show({ title: 'Error', msg: "操作失敗" }); } } }); } function removeUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $.messager.confirm('刪除確認','確定要刪除這個使用者嗎?',function(r){ if (r){ console.log("刪除中..."); $.post('delete.do',{id:row.id},function(result){ console.log(result+"ssss") if (result){ $('#dg').datagrid('reload'); // reload the user data } else { $.messager.show({ // show error message title: 'Error', msg: "刪除失敗" }); } },'json'); } }); }else{ alert("請選擇一個使用者來操作") } } </script> <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" url="http://127.0.0.1:8080/SPR/query.do" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="id" width="50">id</th> <th field="sname" width="50">sname</th> <th field="name" width="50">name</th> </tr> </thead> </table> <div id="toolbar"> <a href="#" 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">Student</div> <form id="fm" method="post"> <div class="fitem"> <label>same:</label> <input name="sname" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label>name:</label> <input name="name"> </div> </form> </div> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a> </div> </body> </html>
controller 類
package com.penf.www.controller; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.penf.www.model.Student; import com.penf.www.service.StudentService; import com.penf.www.util.ResultSuccessInfo; @Controller public class StudentController { @Resource private StudentService stuService; @RequestMapping("query") public @ResponseBody Object query(){ //ResultSuccessInfo succinfo=new ResultSuccessInfo(); //succinfo.setResult(stuService.queryAll()); return stuService.queryAll(); } @RequestMapping("insert") public @ResponseBody Object insert(HttpServletRequest request){ Student stu=new Student(); String sname=request.getParameter("sname"); String name=request.getParameter("name"); if(name!=null || sname !=null){ stu.setName(name); stu.setSname(sname); // System.out.println(stu); stuService.insert(stu); return "success"; } return "error"; } @RequestMapping("update") public @ResponseBody Object update(HttpServletRequest request){ Student stu=new Student(); String id=request.getParameter("id"); String sname=request.getParameter("sname"); String name=request.getParameter("name"); if(name!=null || sname !=null){ stu.setName(name); stu.setSname(sname); stu.setId(Integer.parseInt(id)); // System.out.println(stu); stuService.update(stu); return "success"; } return "error"; } @RequestMapping("delete") public @ResponseBody Object delete(HttpServletRequest request){ String id=request.getParameter("id"); if(id!=null ){ stuService.deleteById(Integer.parseInt(id)); return true; } return false; } }
這個例項是根據官i網中的頁面更改的(原網頁中是基於PHP的)
需要注意的是: 執行刪除操作的時候,使用的是$.post(url , {引數列表} , function(){} ),這個要求返回的是一個boolean型別,(字串是不行的),否則不會執行回撥函式,
效果
:
最終實現與官網上效果一樣的功能