Spring+SpringMVC+mybatis+easyui整合例項-----easyUI介面部分
阿新 • • 發佈：2019-02-04
首先簡單介紹下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>
