EasyUI（bootstrap主题）——信息系统

利用easyUI编写一个具有增删改查的信息系统

要点

• 要熟知各种控件参数的参数格式
• easyUI form表单的提交
• form的submit方法返回的数据为json字符串而不是json对象，需要转换成json对象

success:function (data) {
data=JSON.parse(data);
$.messager.alert('message',data.msg,'info');
}

• Datagrid 数据网格往回台传的数据有page和rows，其中page是表示当前页数，rows是表示每页的数据条数。后台数据库查询时要用到这2个参数，否则无分页效果

int start=Integer.parseInt(request.getParameter("page"));
int size=Integer.parseInt(request.getParameter("rows"));

• Datagrid 数据网格数据回显需要的数据为一个json对象包括这些数据量，total和rows。total表示数据库当前查询结果数（实际当前页面有的数据，因为并不是每页都是满数据），rows表示对象列表

int count;
if(sqlpart.length()>0){
count=studentDao.count("select count(*) from stu_info where"+sqlpart);
}else{
count=studentDao.count("select count(*) from stu_info");
}
sql+=sqlpart;
List<Student> list=studentDao.getStudents(sql,(start-1)*size,size);
map.put("total",count);
map.put("students",list);

具体代码

树形菜单node

package com.yandan.model;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class Node {
private int id;
private String text;
private String state;
private boolean checked;
private String iconCls;
private Map<String,Object> attributes=new HashMap<String,Object>();
private List<Node> children;
private  int pid;

public Node(int id, String text, String state, boolean checked, String iconCls, Map<String, Object> attributes, List<Node> children,int pid) {
this.id = id;
this.text = text;
this.state = state;
this.checked = checked;
this.iconCls = iconCls;
this.attributes = attributes;
this.children = children;
this.pid=pid;
}
public Node(){}

public int getId() {
return id;
}

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

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}

public String getState() {
return state;
}

public void setState(String state) {
this.state = state;
}

public boolean isChecked() {
return checked;
}

public void setChecked(boolean checked) {
this.checked = checked;
}

public String getIconCls() {
return iconCls;
}

public void setIconCls(String iconCls) {
this.iconCls = iconCls;
}

public Map<String, Object> getAttributes() {
return attributes;
}

public void setAttributes(Map<String, Object> attributes) {
this.attributes = attributes;
}

public List<Node> getChildren() {
return children;
}

public void setChildren(List<Node> children) {
this.children = children;
}
public int getPid() {
return pid;
}

public void setPid(int pid) {
this.pid = pid;
}
}

Datagrid 数据网格回显数据对象类pageStu

package com.yandan.model;

import java.util.List;

public class PageStu {
private int total;
private List<Student> rows;

public PageStu(int total, List<Student> rows) {
this.total = total;
this.rows = rows;
}

public PageStu() {
}

public int getTotal() {
return total;
}

public void setTotal(int total) {
this.total = total;
}

public List<Student> getRows() {
return rows;
}

public void setRows(List<Student> rows) {
this.rows = rows;
}
}

信息对象类Student

package com.yandan.model;

public class Student {
private int id;
private  String name;
private String sex;
private String stuID;

public Student(int id, String name, String sex, String stuID) {
this.id = id;
this.name = name;
this.sex = sex;
this.stuID = stuID;
}

public Student() {
}

public int getId() {
return id;
}

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

public String getName() {
return name;
}

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

public String getSex() {
return sex;
}

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

public String getStuID() {
return stuID;
}

public void setStuID(String stuID) {
this.stuID = stuID;
}
}

NodeDao

package com.yandan.dao;

import com.yandan.model.Node;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;

@Repository
public class NodeDao {
@Autowired
private JdbcTemplate jdbcTemplate;

private final RowMapper<Node> rowMapper=new RowMapper<Node>() {
@Override
public Node mapRow(ResultSet resultSet, int i) throws SQLException {
Node node=new Node();
node.setId(resultSet.getInt("id"));
node.setText(resultSet.getString("text"));
node.getAttributes().put("href",resultSet.getString("href"));
node.setPid(resultSet.getInt("pid"));
return node;
}
};
public List<Node> getNodes(@PathVariable("pid") int pid){
return jdbcTemplate.query("select * from node where pid=?",rowMapper,pid);
}
public List<Node> getAll(){
return jdbcTemplate.query("select * from node",rowMapper);
}
}

PageStuDao

package com.yandan.dao;

import com.yandan.model.PageStu;
import com.yandan.model.Student;
import com.yandan.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import javax.servlet.http.HttpServletRequest;
import java.io.UnsupportedEncodingException;
import java.util.List;
import java.util.Map;

@Repository
public class PageStuDao {
@Autowired
private StudentService studentService;

public PageStu getPage(HttpServletRequest request) throws UnsupportedEncodingException {
Map<String,Object> map=studentService.getPage(request);
PageStu pageStu=new PageStu();
pageStu.setRows((List<Student>) map.get("students"));
pageStu.setTotal((int)map.get("total"));
return pageStu;
}
}

StudentDao

package com.yandan.dao;

import com.yandan.model.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

@Repository
public class StudentDao {
@Autowired
private JdbcTemplate jdbcTemplate;

private final RowMapper<Student> rowMapper=new RowMapper<Student>() {
@Override
public Student mapRow(ResultSet resultSet, int i) throws SQLException {
Student student=new Student();
student.setId(resultSet.getInt("id"));
student.setName(resultSet.getString("name"));
student.setSex(resultSet.getString("sex"));
student.setStuID(resultSet.getString("stuID"));
return student;
}
};
public List<Student> getStudents(String sql) {

return jdbcTemplate.query( sql,rowMapper);
}
public List<Student> getStudents(String sql,int start,int size) {

return jdbcTemplate.query(sql+" limit ?,?", rowMapper,start,size);
}
public int delete(String stuIDs){
String sql="delete from stu_info where stuID in ("+stuIDs+")";
int result= jdbcTemplate.update(sql);
return result;
}

public int insert(String stuID,String sex,String name){
if(  jdbcTemplate.query("select * from stu_info where stuID=?",rowMapper,stuID).size()>0){
return 0;
}
return jdbcTemplate.update("insert into stu_info set name=?,sex=?,stuID=?",name,sex,stuID);
}
public int count(String sql){
return jdbcTemplate.queryForObject(sql,Integer.class);
}
public int update(String stuID,String sex,String name){
return jdbcTemplate.update("update stu_info set name=?,sex=? where stuID=?",name,sex,stuID);
}
public Student getStudent(String stuID){
return jdbcTemplate.queryForObject("select * from stu_info where stuID=?",rowMapper,stuID);
}
}

StudentService

package com.yandan.service;

import com.yandan.dao.StudentDao;
import com.yandan.model.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import javax.servlet.http.HttpServletRequest;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class StudentService {
@Autowired
private StudentDao studentDao;
public Map<String,Object> getPage(HttpServletRequest request) throws UnsupportedEncodingException {
//根据查询条件生成sql语句
Map<String,Object> map=new HashMap<String,Object>();
int page;
String sql;
String name=null;
String sex=null;
String stuID=null;
int start=Integer.parseInt(request.getParameter("page"));
int size=Integer.parseInt(request.getParameter("rows"));
name=request.getParameter("name");
stuID=request.getParameter("stuID");
sex=request.getParameter("sex");
if(("undefined".equals(name)&&"undefined".equals(sex)&&"undefined".equals(stuID))||"".equals(name)&&"".equals(sex)&&"".equals(stuID)){
sql="select * from stu_info";
}else{
sql="select * from stu_info where ";
}
String sqlpart="";
sqlpart+="undefined".equals(name)||"".equals(name)? "":"and name like \"%"+name+"%\" ";
sqlpart+="undefined".equals(sex)||"".equals(sex)? "":"and sex =\""+sex+"\" ";
sqlpart+="undefined".equals(stuID)||"".equals(stuID)? "":"and stuID like \"%"+stuID+"%\" ";
if(sqlpart.length()>0){
sqlpart=sqlpart.substring(3,sqlpart.length());
}
int count;
if(sqlpart.length()>0){
count=studentDao.count("select count(*) from stu_info where"+sqlpart);
}else{
count=studentDao.count("select count(*) from stu_info");
}
sql+=sqlpart;
List<Student> list=studentDao.getStudents(sql,(start-1)*size,size);
map.put("total",count);
map.put("students",list);
return map;
}
@Transactional(propagation = Propagation.REQUIRED)
public int insert(HttpServletRequest request){
String stuID=request.getParameter("stuID");
String name=request.getParameter("name");
String sex=request.getParameter("sex");
return studentDao.insert(stuID,sex,name);
}
@Transactional(propagation = Propagation.REQUIRED)
public int delete(String stuID){

return studentDao.delete(stuID);
}
@Transactional(propagation = Propagation.REQUIRED)
public int update(HttpServletRequest request){
String stuID=request.getParameter("stuID");
String sex=request.getParameter("sex");
String name=request.getParameter("name");
return studentDao.update(stuID,sex,name);
}
public  Student getStudent(String stuID){
return  studentDao.getStudent(stuID);
}
}

JSP
UI.jsp
树形菜单和标签页进行分页显示不同的页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>easyUI</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/icon.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
<h1>信息管理系统(陈敏)</h1>
</div>
<div data-options="region:'west',title:'导航栏',split:true" style="width:100px;">
<ul id="mytree" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div id="tabs" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true">
</div>
</div>
</body>
<script>
$(function () {

$('#mytree').tree({
url:'tree/node/0',
onClick:function (node) {
//加载子节点
$.get('tree/node/'+node.id,{},function (data) {

var children=$('#mytree').tree('getChildren',node.target);
if(children!=null&&children.length>0){
for(var i=0;i<children.length;i++){
$('#mytree').tree('remove',children[i].target);
}
}
$('#mytree').tree('append',{
parent:node.target,
data:data
});
var href=node.attributes.href;
if(href!=null&&href.length>0){
if($('#tabs').tabs('exists',node.text)){
$('#tabs').tabs('select',node.text);
}else{
$('#tabs').tabs('add',{
title:node.text,
select:true,
closable:true,
href:'<%=request.getContextPath()%>'+href
});
}
}
},'json');
}

});

});

</script>
</html>

student.jsp
通过弹窗显示增加，修改，删除页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title >students</title >
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css">
<script src="../js/jquery-1.9.1.js"></script>
<script src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
<table align="center">
<td>学号</td><td><input name="stuID" id="stuID" type="text"></td>
<td>姓名</td><td><input name="name"  id="name" type="text"></td>
<td>性别</td><td><select id="sex">
<option value="">请选择</option>
<option value="男"> 男</option>
<option value="女">女</option>
</select></td>
<td><button οnclick="search()">查找</button></td>
</table>
<table  id="stutable" class="easyui-datagrid" style="width:400px;height:250px">

</table>
<div id="mytb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit-yandan' ,plain:true"  οnclick="update()"></a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove-yandan', plain:true" οnclick="deleteRows()"></a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add-yandan', plain:true" οnclick="insert()"></a>
</div>
<div id="mydialog"></div>
<div id="bb">
<a href="#" class="easyui-linkbutton" οnclick="submit()">Save</a>
<a href="#" class="easyui-linkbutton" οnclick="mclose()">Close</a>
</div>
<script>
var flag;
$(function () {
reload();

});
function search() {

reload();
};
function insert() {
flag=true;
$('#mydialog').dialog({
title:'添加学生',
href: 'student_add.jsp',
width:300,
height:200,
resizable:true,
buttons:$('#bb'),
closed:true
});
$('#mydialog').dialog('open');

}
function submit() {
//true: insert;  false: update
if(flag){
$('#stuForm').form('submit',{
url: 'student/insert',
success:function (data) {
data=JSON.parse(data);
$.messager.alert('message',data.msg,'info');
}
});
}else{
$('#stuForm').form('submit',{
url: 'student/update',
success:function (data) {
data=JSON.parse(data);
$.messager.alert('message',data.msg,'info');
}
});
}
reload();
}
function mclose() {
$('#stuForm').form('clear');
$('#mydialog').dialog('close');
}
function deleteRows() {
if($('#stutable').datagrid('getChecked').length>0){
var rows= $('#stutable').datagrid('getChecked');
var ids='';
for(var i=0;i<rows.length;i++){
var stu=rows[i];
ids+=',\''+stu.stuID+'\'';
}
ids=ids.substring(1,ids.length);
$.get('student/delete',{
stuID:ids
},function (data) {
$.messager.alert('message',data.msg,'info');
},'json');
reload();
}
}

function reload() {
$('#stutable').datagrid({
url:'student/get',
queryParams:{
name:$('#name').val(),
stuID:$('#stuID').val(),
sex:$('#sex').val()
},
toolbar:'#mytb',
contentType:'charset=utf-8',
pagination:true,
pagePosition: 'top',
fitColumns:true,
fit:true,
striped:true,
selectOnCheck:false,
singleSelect:true,
columns:[[
{field:'ck' ,checkbox: true},//复选框
{field:'id',title:'序号',width:100,align:'center'},
{field:'stuID',title:'学号',width:100,align:'center'},
{field:'name',title:'姓名',width:100,align:'center'},
{field:'sex',title:'性别',width:100,align:'center'}
]]

});
}
function update() {
flag=false;
if($('#stutable').datagrid('getSelected')==null){
$.messager.alert('警告','请选择一条数据','warning');
}else if($('#stutable').datagrid('getChecked').length>1){
$.messager.alert('警告','不能选择多条数据','warning');
}else{

$('#mydialog').dialog({
title:'修改信息',
href: 'student_update.jsp',
width:300,
height:200,
resizable:true,
buttons:$('#bb'),
closed:true
});
$('#mydialog').dialog('open');
$.get('student/get/'+$('#stutable').datagrid('getSelected').stuID,{},function (data) {
$('#stuForm').form('load',data);
},'json');

}
}
</script>
</body>
</html>

student_add.jsp
利用easyUI的form和input样式

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>insert</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css">
<script src="../js/jquery-1.9.1.js"></script>
<script src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
<form id="stuForm" method="post" style="align-content: center; text-align: center">
<div>
<label for="stuID">学号</label>
<input type="text" class="easyui-numberbox"  id="stuID" name="stuID"  data-options="min:0,precision:0">
</div>
<p></p>
<div>
<label for="name">姓名</label>
<input class="easyui-validatebox" type="text" name="name" id="name"   height="28px"/>
</div>
<p></p>
<div style="margin-bottom:20px">
<label for="sex">性别</label>
<input  id="sex" class="easyui-radiobutton" name="sex" value="男" label="男"  labelPosition="after" labelWidth="60px">
<input class="easyui-radiobutton" name="sex" value="女" label="女" labelPosition="after" labelWidth="60px">
</div>
<p></p>
</form>

<script>

</script>
</body>
</html>

student_delete.jsp

<%--
Created by IntelliJ IDEA.
User: YanDan
Date: 2020/4/24
Time: 22:15
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>delete</title>
<script src="js/jquery-1.9.1.js"></script>
</head>
<body>
<table align="center">
<td>学号</td><td><input id="stuID" type="text"></td><td><button id="detete" οnclick="delete_a()" value="删除">删除</button> </td>
</table>
<table id="stutable"  align="center" border="1px"></table>
<script>
function delete_a() {
$.get('student/delete',{stuID:$('#stuID').val},function(data){
$('#stutable').empty();
$('#stutable').append(getTableHeadHtml());
$('#stutable').append(getTableBodyHtml(data));
},'json');
}
function getTableHeadHtml(){
var html="<td>序号</td> <td>学号</td> <td>姓名</td> <td>性别</td>";
return html;
}
function getTableBodyHtml(data) {
var html='';

for (var i=0;i<data.length;i++){
html=html+'<tr>';
html=html+'<td>'
+data[i].id+'</td><td>'
+data[i].stu_id+'</td><td>'
+data[i].name+'</td><td>'
+data[i].sex+'</td>';
html=html+'</tr>';
}
return html;
}
</script>
</body>
</html>

student_update.jsp

<%--
Created by IntelliJ IDEA.
User: YanDan
Date: 2020/5/1
Time: 9:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>update</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css">
<script src="../js/jquery-1.9.1.js"></script>
<script src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
<form id="stuForm" method="post" style="align-content: center; text-align: center">
<div>
<label for="stuID">学号</label>
<input class="easyui-validatebox" type="text" name="stuID" id="stuID"   height="28px" readonly="true"/>
</div>
<p></p>
<div>
<label for="name">姓名</label>
<input class="easyui-validatebox" type="text" name="name" id="name"   height="28px"/>
</div>
<p></p>
<div style="margin-bottom:20px">
<label for="sex">性别</label>
<input  id="sex" class="easyui-radiobutton" name="sex" value="男" label="男"  labelPosition="after" labelWidth="60px">
<input class="easyui-radiobutton" name="sex" value="女" label="女" labelPosition="after" labelWidth="60px">
</div>
<p></p>
</form>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceRequestEncoding</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>forceResponseEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:SpringMVC-servlet.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>

SpringMVC.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--自动扫描注解-->
<context:component-scan base-package="com.yandan.controller"/>

<mvc:annotation-driven/>
<!-- 增加静态文件加载-->
<mvc:resources location="/image/" mapping="/image/**"/>
<mvc:resources location="/js/" mapping="/js/**"/>
<mvc:resources location="/css/" mapping="/css/**"/>
<mvc:resources location="/jquery-easyui-1.7.0/" mapping="/jquery-easyui-1.7.0/**"/>
</beans>

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
https://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.yandan"/>
<context:property-placeholder location="classpath:jdbc.properties"/>
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
</bean>
<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="${driver}"/>
<property name="url" value="${url}"/>
<property name="username" value="${user}"/>
<property name="password" value="${password}"/>
</bean>
<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
<property name="dataSource"  ref="dataSource"/>
</bean>
</beans>