三.EasyUI的集成
3.1 准备head.jsp
- 我们把所有公共的引入(css,js) 都放在head.jsp中
- 以后要使用easyui直接引入即可
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入easyui中的基本的CSS与JS--%>
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<%--图标样式--%>
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<%--支持风格的包--%>
<link rel="stylesheet" type="text/css" href="/easyui/themes/color.css">
<%-- 引入jQuery --%>
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<%--jQuery的扩展包 --%>
<script type="text/javascript" src="/easyui/plugin/jquery.jdirk.js"></script>
<%--easyui的核心文件--%>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<%--引入国际化的js--%>
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
3.2 employee的jsp代码
加入表格,以及工具栏。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--引入公共的jsp--%>
<%@ include file="/WEB-INF/views/head.jsp" %>
<%--引入当前模板对应的js--%>
<script src="/js/model/employee.js"></script>
</head>
<body>
<div id="toolbar">
<%--iconCls:图标 plain:简洁--%>
<a href="javascript:;" data-method="add" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
<a href="javascript:;" data-method="update" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
<a href="javascript:;" data-method="delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
<%--展示数据使用datagrid组件
url:请求路径(数据) fit:自适应父容器
fitColumns:列的自适应 singleSelect:是否单选
pagination:分页工具栏
ctrl+shift+delete
--%>
<table class="easyui-datagrid"
data-options="url:'/employee/page',fitColumns:true,singleSelect:true,fit:true,toolbar:'#toolbar',pagination:true">
<thead>
<tr>
<th data-options="field:'username',width:100">用户名</th>
<th data-options="field:'password',width:100">密码</th>
<th data-options="field:'age',width:100">年龄</th>
<th data-options="field:'email',width:100">邮箱</th>
</tr>
</thead>
</table>
<div id="toolbar" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a href="#" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="#" data-method="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="#" data-method="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
<form id="searchForm" method="post" >
用户名: <input name="username" class="easyui-textbox" style="width:80px">
邮件: <input name="email" class="easyui-textbox" style="width:80px">
<a href="#" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
</form>
</div>
</body>
</html>
3.2 employee.js
//入口函数:页面读取所有元素再执行
$(function () {
//只要有data-method属性的元素我都要为它注册事件
$("*[data-method]").on("click",function () {
//谁调用,this就指向谁(这个this是普通dom对象)
//$(dom对象) -> 变成jQuery对象,有很多jQuery特有的功能(更加强大)
//1.拿到当前按键的属性 add,update
//var methodName = $(this).data("method");
//2.执行对应的方法(动态调用)
// itsource.say() == itsource["say"]();
itsource[$(this).data("method")]();
})
//准备了相应的方法功能
itsource = {
add:function(){
alert("add")
},
update:function () {
alert("update")
},
delete:function () {
//获取选中的行
let row = datagrid.datagrid("getSelected");
//没有选中时,提示
if(!row){
$.messager.alert('提示','亲!请选中一行再删除','info');
return;
}
//让用户确认是否删除
$.messager.confirm('确认','您确认想要删除记录吗?',function(r){
if(r){
//要删除,发送ajax请求
$.get("/employee/delete",{id:row.id},function (result) {
if(result.success){
//成功,刷新页面
datagrid.datagrid("reload");
}else{
//失败提示
$.messager.alert('提示',`删除失败,原因是:${result.msg}`,"error");
}
});
}
});
},
//高级查询功能
search(){
//1.拿到查询的值
var params = searchForm.serializeObject();
//2.进行查询
datagrid.datagrid("load",params);
}
};
})