版权声明：作品为本人原创,如需转载,请注明出处 aa15237104245的博客 https://blog.csdn.net/aa15237104245/article/details/81537607
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类型,(字符串是不行的),否则不会执行回调函数,
效果
:
最终实现与官网上效果一样的功能