Easyui05前端显示Dategrid(通用分页+数据表格+对数据操作)
发布日期:2021-05-04 01:05:52 浏览次数:8 分类:技术文章

本文共 13032 字,大约阅读时间需要 43 分钟。

Dategrid动态数据表格

1.创建项目搭好框架及需要的包-类

在这里插入图片描述

2.StudentDao

package com.zking.test.dao;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;import com.zking.test.entity.Student;import com.zking.test.util.DBAccess;import com.zking.test.util.PageBean;import com.zking.test.util.StringUtils;public class StudentDao extends BaseDAO
   
     {Connection conn = null;PreparedStatement stmt = null;ResultSet rs = null;public void addStu(Student student) {
    
if(StringUtils.isBlank(student.getId())) {
String maxid = maxId();
student.setId(maxid);
}
String sql="INSERT INTO student(sid,sname,sage,ssex)VALUES(?,?,?,?)";
try {
conn = DBAccess.getConnection();
stmt = conn.prepareCall(sql);
stmt.setString(1, student.getId());
stmt.setString(2, student.getSname());
stmt.setDate(3, student.getSage());
stmt.setString(4, student.getSsex());
stmt.executeUpdate();
} catch (Exception e) {
throw new RuntimeException(e);
}finally {
DBAccess.close(conn, stmt, rs);
}}public void updeStu(Student student) {
String sql="update student set sname=?,sage=?,ssex=? where sid=?";
try {
conn = DBAccess.getConnection();
stmt = conn.prepareCall(sql);
stmt.setString(1, student.getSname());
stmt.setDate(2, student.getSage());
stmt.setString(3, student.getSsex());
stmt.setString(4, student.getId());
stmt.executeUpdate();
} catch (Exception e) {
throw new RuntimeException(e);
}finally {
DBAccess.close(conn, stmt, rs);
}
}public void deleStu(Student student) {
String sql="delete from student where sid=?";
try {
conn = DBAccess.getConnection();
stmt = conn.prepareCall(sql);
stmt.setString(1, student.getId());
stmt.executeUpdate();
} catch (Exception e) {
throw new RuntimeException(e);
}finally {
DBAccess.close(conn, stmt, rs);
}}public Student Student(Student student) {
Student s=null;
String sql="select * from  student where sid=?";
try {
conn = DBAccess.getConnection();
stmt = conn.prepareCall(sql);
stmt.setString(1, student.getId());
rs = stmt.executeQuery();
if(rs.next()) {
s=new Student();
s.setId(rs.getString(1));
s.setSname(rs.getString(2));
s.setSage(rs.getDate(3));
s.setSsex(rs.getString(4));
}
return s;
} catch (Exception e) {
throw new RuntimeException(e);
}finally {
DBAccess.close(conn, stmt, rs);
}
}public List  listStu(Student student,PageBean pageBean) {
String sql="select * from  student where 1=1";
if(StringUtils.isNotBlank(student.getSname())) {
sql+=" and sname like '%" + student.getSname().trim() + "%'";
}
sql+=" order by sid desc";//每次增加完新数据显示新数据(使用倒序)
return this.executeQuery(sql, pageBean, new Callback () {
@Override
public List  foreach(ResultSet rs)
throws SQLException {
List  list =new ArrayList ();
Student s= null;
while(rs.next()) {
s=new Student();
s.setId(rs.getString("sid"));
s.setSname(rs.getString("sname"));
s.setSage(rs.getDate("sage"));
s.setSsex(rs.getString("ssex"));
list.add(s);
}
return list;
}
});
}public String maxId() {
String id="";
try {
conn=DBAccess.getConnection();
String sql="select max(sid+1) from student";
stmt=conn.prepareStatement(sql);
rs=stmt.executeQuery();
if(rs.next()) {
id=rs.getString(1);
}
} catch (Exception e) {
throw new RuntimeException(e);
}finally {
DBAccess.close(conn, stmt, rs);
}
return id;}}

3.StudentAction extends(继承) DispatcgerAction implements(接口) ModelDriver的解释

package com.zking.test.action;import java.io.IOException;import java.io.PrintWriter;import java.sql.ResultSet;import java.sql.SQLException;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.databind.ObjectMapper;import com.zking.mvc.framework.DispatcherAction;import com.zking.mvc.framework.ModelDriver;import com.zking.test.dao.StudentDao;import com.zking.test.dao.BaseDAO.Callback;import com.zking.test.entity.Student;import com.zking.test.util.PageBean;import com.zking.test.util.StringUtils;//解化参数public class StudentAction extends DispatcherAction implements ModelDriver
   
     {public Student student = new Student();public StudentDao studentdao = new StudentDao();public StudentAction() {}@Overridepublic Student getModel() {
    
return student;}public String dolist(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//1.获取分页数据
PageBean pageBean = new PageBean();
//对pageBean初始化
//去pageBean方法取Page,Rows
pageBean.setRequest(req);
//2.根据查询条件得到查询出来的结果集
List  liststu = studentdao.listStu(student, pageBean);
//3.通过Map对象来构建Json数据
Map  map = new HashMap ();
map.put("total", pageBean.getTotal());//得到中记录数
map.put("rows", liststu);//(以前)页大小--(json)返回的结果集
//4.转换Map为json数据并发送给客户端
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(map);
//5.使用io流
PrintWriter out = resp.getWriter();
//输出到前端
out.println(json);
//一定要返回null,不然页面不能无刷新得不到json数据
return null;}public String doMeger(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
Integer code = 0;
String message = "";
if(StringUtils.isNotBlank(student.getId())) {//id不为空就是修改方法
studentdao.updeStu(student);
message = "学生修改成功";
}else {//增加方法
studentdao.addStu(student);
message = "学生增加成功";
}
Map  data = new HashMap ();
data.put("code", 0);//结果码 如果0为真  非0为假
data.put("message", message);//(以前)页大小-- (json)返回的结果集
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(data);
//5.使用io流
PrintWriter out = resp.getWriter();
//输出到前端
out.println(json);
return null;}public String doDelete(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
studentdao.deleStu(student);
Map  map = new HashMap ();
map.put("code", 0);//结果码 如果0为真  非0为假
map.put("message", "id为['"+student.getId()+"']的学生以被您删除");//(以前)页大小--(json)返回的结果集
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(map);
//5.使用io流
PrintWriter out = resp.getWriter();
//输出到前端
out.println(json);
return null;}}

4.配置config.xml- - -studentAction.action

在这里插入图片描述

5.使用postman进行测试opt值调用liststu方法

在这里插入图片描述

6.创建ListStudent.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%><%@include file="/common/head.jsp"%> ListStudent
      
姓名: 
查询
增加学生    

7.创建-WebContent/js/Liststu.js

$(function() {var url = ctx + "/studentAction.action?opt=dolist";$('#dg')
.datagrid(
{
// 表格单选
singleSelect : true,
// 设置为true时,选项卡的大小将铺满它所在的容器。
fit : true,
url : url,
columns : [ [
{
field : 'id',
title : '学号',
width : "20%",
align : 'center'
},
{
field : 'sname',
title : '姓名',
width : "20%",
align : 'center'
},
{
field : 'sage',
title : '年龄',
width : "20%",
align : 'center'
},
{
field : 'ssex',
title : '性别',
width : "20%",
align : 'center'
},
{
field : 'operate',
title : '操作',
width : "20%",
align : 'center',
formatter : function(value , row , index) {//
console.log(row);
var str = ' ';
str += ' '
return str;
}
} ] ],
pagination : true,
pageSize : 20,
pageList : [ 10, 20, 50, 100 ],
toolbar : "#tb",
//datagrid加载成功事件
onLoadSuccess : function(data) {
$("a[name='update']").linkbutton({
text : '修改',
plain : true,
iconCls : 'icon-page-white-paintbrush'
}).click(function(){
var sid = $(this).data("sid");
if(sid){
 var row=$("#dg").datagrid("selectRecord",sid).datagrid("getSelected");
console.log(row);
}
$("#ff").form("load",row);
//修改dlg容器标题----然后打开容器
$('#dlg').dialog('setTitle',"修改").dialog("open"); 
 
});
$("a[name='delete']").linkbutton({
text : '删除',
plain : true,//删除icon-bug-delete
iconCls : 'icon-bug-delete'
}).click(function(){
//获取当前列id
var id = $(this).data('sid');
$.messager.confirm("确认","您确认想要删除记录吗?",function(r){//异步对话框---做当前事情还能继续做别的事情
if (r){
var url = ctx+"/studentAction.action?opt=doDelete";
$.ajax({
   type:"POST",
   url: url,
   id : id,
   dataType:"json",
   success: function(map){
 if(0==map.code){
 $.messager.alert("成功",map.message,"info");   
 doReload();
 }else{
 $.messager.alert("删除失败","暂时不能继续删除","question");   
 }
   }
});
}
});  
});
}
});// console.log('ok');// 新增学生$("#addBtn").click(function() {
$('#dlg').dialog('open');  
$('#dlg').dialog('open');  });// 新增学生$("#mergebtn").click(function() {
var url = ctx+"/studentAction.action?opt=doMeger";
var id = $("input[name='id']").val();
var dataStr = $("#ff").serialize();
$.ajax({
type:"post",
dataType:'json',
url:url,
data:dataStr,
success:function(data){
data = eval(data);
console.log(data);
if(0 == data.code){
$.messager.alert("消息",data.message,"info");
if(!id){//增加
$("#ff").form("clear");
doload();
}else{//修改
doReload();
}
}else{
$.messager.alert("错误","操作失误","error");
}
}
});  });// 查询$("#queryBtn").click(function() {
var sname = $("#name").val();
// 加载和显示第一页的所有行。如果指定了'param',它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询,通过调用这个方法从服务器加载新数据。
doload({
// 发送给后台的姓名
sname : sname
});});//加载和显示第一页的行function doload(param){
$('#dg').datagrid('load', param);
console.log("doload.......");}//重载行。等同于'load'方法,但是它将保持在当前页。function doReload(param){
$('#dg').datagrid('reload', param);
console.log("doReload.......");}//删除function doDelete(pagam){
$('#dg').datagrid('reload', pagam);}//先给对话框初始化赋值onClose方法点击关闭清空文本框$('#dlg').dialog({
onClose: function(){
$("#ff").form("clear");
}});});

8.配置WebContent/common/head.jsp

<%@page import="java.io.PrintWriter"%><%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%><% 
String ctx=request.getContextPath();
request.setAttribute("ctx", ctx);
out.println("");
%>



9.分页样式 转换中文字体WebContent/js/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js

if ($.fn.pagination){
$.fn.pagination.defaults.beforePageText = '第';
$.fn.pagination.defaults.afterPageText = '共{pages}页';
$.fn.pagination.defaults.displayMsg = '显示{from}到{to},共{total}记录';}if ($.fn.datagrid){
$.fn.datagrid.defaults.loadMsg = '正在处理,请稍待。。。';}if ($.fn.treegrid && $.fn.datagrid){
$.fn.treegrid.defaults.loadMsg = $.fn.datagrid.defaults.loadMsg;}if ($.messager){
$.messager.defaults.ok = '确定';
$.messager.defaults.cancel = '取消';}$.map(['validatebox','textbox','passwordbox','filebox','searchbox',
'combo','combobox','combogrid','combotree',
'datebox','datetimebox','numberbox',
'spinner','numberspinner','timespinner','datetimespinner'], function(plugin){
if ($.fn[plugin]){
$.fn[plugin].defaults.missingMessage = '该输入项为必输项';
}});if ($.fn.validatebox){
$.fn.validatebox.defaults.rules.email.message = '请输入有效的电子邮件地址';
$.fn.validatebox.defaults.rules.url.message = '请输入有效的URL地址';
$.fn.validatebox.defaults.rules.length.message = '输入内容长度必须介于{0}和{1}之间';
$.fn.validatebox.defaults.rules.remote.message = '请修正该字段';}if ($.fn.calendar){
$.fn.calendar.defaults.weeks = ['日','一','二','三','四','五','六'];
$.fn.calendar.defaults.months = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];}if ($.fn.datebox){
$.fn.datebox.defaults.currentText = '今天';
$.fn.datebox.defaults.closeText = '关闭';
$.fn.datebox.defaults.okText = '确定';
$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
};
$.fn.datebox.defaults.parser = function(s){
if (!s) return new Date();
var ss = s.split('-');
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
};}if ($.fn.datetimebox && $.fn.datebox){
$.extend($.fn.datetimebox.defaults,{
currentText: $.fn.datebox.defaults.currentText,
closeText: $.fn.datebox.defaults.closeText,
okText: $.fn.datebox.defaults.okText
});}if ($.fn.datetimespinner){
$.fn.datetimespinner.defaults.selections = [[0,4],[5,7],[8,10],[11,13],[14,16],[17,19]]}

10.完成所有动态前端数据表格功能

在这里插入图片描述

转载地址:https://blog.csdn.net/weixin_45067120/article/details/104565051 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:一个数10年工作经验的微服务架构老师的简历
下一篇:Easyui04完整前端布局及增删改查

发表评论

最新留言

初次前来,多多关照!
[***.90.177.211]2022年08月15日 09时26分40秒