Spring+SpringMVC+mybatis+easyui整合实例-----easyUI界面部分

首先简单介绍下easyui的使用。 

我们从datagrid表格入手,先显示一个简单的表格来说明一下easyui的使用。后面再加一个功能完整的表格

首先方法写好,还是使用之前的例子,没看过之前博客的可以翻一下。 
StudentDaoIF.java

@Select("select * from student") 
@Results({ @Result(column = "id" , property = "id"), @Result(column = "name" , property = "name"), @Result(column =  "password" , property = "password") }) 
public List<Student> selectAllStudents();

StudentServiceImpl.java:

@Override
public List<Student> selectAllStudents() { 
return dao.selectAllStudents(); 
}

StudentController.java

 @RequestMapping("/ShowStudents.do")
 @ResponseBody 
 public Map showStudents() throws Exception{ 
 Map map=new HashMap(); 
 List<Student> students = dao.selectAllStudents();
 map.put("rows",students); 
 map.put("total", 20); 
 return map; 
  }

注:这里说明一下,easyui的datagrid使用必须要返回两个字段:rows和total,分别表示数据和总条数

页面datagird.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
datagird.html</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/demo/demo.css">
<script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src=="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){ $("#dg").datagrid({ 
url:"../ShowStudents.do", columns:[[ 
{field:'id',title:'id',width:100}, 
{field:'name',title:'name',width:100},
{field: 'password',title:'password',width:100}
]] }); }); 
</script>
</head>
<body>
<table id="dg"></table>
</body>
</html>

注:这几个css、js文件是使用easyui必须导入的。 
最后显示入下: 
这里写图片描述

当然这只是个最简单的表格,我们可以添加参数让表格更加完整些。像下面这样:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>datagird.html</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/demo/demo.css">
<script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.min.js"> </script>
<script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript"> $(function(){ $("#dg").datagrid({
url:"../ShowStudents.do", columns:[[ {field:'id',title:'id',width:100},
{field:'name',title:'name',width: 100}, 
{field:'password',title:'password',width:100} ]], 
toolbar:'#toolbar', //表格菜单 
loadMsg:'嗖 ----正在火速加载中 -------------', //加载提示
pagination:"true, //显示分页工具栏
rownumbers:true, //显示行号列 
singleSelect:true,//是允许选择一行
queryParams:{ //在请求数据是发送的额外参数,如果没有则不用谢
 name:'easyui', hhh:'aa'} }); }); </script>
 </head>
 <body>
 <table id=dg">
 </table>
 <div id="toolbar">
 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>
 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
 </div>
 </body>
 </html>

这里写图片描述

相关推荐
<p style="color:#424242;font-size:14px;"> 全程实战讲解,附<strong>源码 数据库脚本</strong>和<strong>项目素材</strong> </p> <p style="color:#424242;font-size:14px;"> <strong>核心技术</strong>:SpringBoot+SpringMvc+Spring+MyBatis+Mysql+Thymeleaf+Jquery+Ajax+HTML+CSS,使用Maven完成项目的构建! </p> <p style="color:#424242;font-size:14px;"> <br /></p> <p style="color:#424242;font-size:14px;"> <strong>项目前台点餐系统部分截图:</strong> </p> <p style="color:#424242;font-size:14px;"> <strong><img src="https://img-bss.csdn.net/202003021001262373.png" alt="" /><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><img src="https://img-bss.csdn.net/202003021001389462.png" alt="" /><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><img src="https://img-bss.csdn.net/202003021001535188.png" alt="" /><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><img src="https://img-bss.csdn.net/202003021002057197.png" alt="" /><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><span style="font-size:16px;">项目后台管理系统部分截图:</span><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><img src="https://img-bss.csdn.net/202003021002198435.png" alt="" /><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><img src="https://img-bss.csdn.net/202003021002335651.png" alt="" /><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><img src="https://img-bss.csdn.net/202003021002445054.png" alt="" /><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><img src="https://img-bss.csdn.net/202003021002548248.png" alt="" /><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><br /></strong> </p> <p style="color:#424242;font-size:14px;"> <strong><img src="https://img-bss.csdn.net/202003021003138072.png" alt="" /><br /></strong> </p>
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页