Now l have come to the crossroads in my life. I always knew what the right path was. Without exception, I knew, but l never took it. You know why? lt was too damn hard.
—— 《Scent of a Woman》
楔子
经常做web后台开发的朋友可能会遇到这样的问题，当我们独立完成一个比较简单的功能模块或者做demo时，不得不自己编写前端js代码以及UI。编写js代码可能问题还不大，但是后台开发的朋友如果自己调整CSS样式，做出来的页面效果常常会丑的超越想象力。。。因此我们经常借助一些比较成熟的、拥有一整套UI样式的工具来辅助我们完成前端开发工作。
EasyUI 简介
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
—— JQuery EasyUI中文网
类似功能的UI框架产品还有Twitter的Bootstrap、jQuery LigerUI以及jQuery MiniUI等等。
CRUD 应用示例
跟其他的UI框架产品一样，要是用EasyUI，我们需要先下载它，然后导入到我们的项目中。
EasyUI的下载地址如下：
http://www.jeasyui.net/download/
我们选择GPL版本下载之。官网上的使用示例是PHP的，但是现在开发web应用大部分还是用的java，因此我们以Spring Boot框架为例讲解如何创建一个简单的CRUD应用。
将解压出来的EasyUI文件夹改名为easyui，然后放置在src/main/resources文件夹下面的static文件夹中。然后在HTML页面中引入它们：
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css" th:href="@{easyui/themes/default/easyui.css}"/>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{easyui/themes/icon.css}"/>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/color.css" th:href="@{easyui/themes/color.css}"/>
<script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{easyui/jquery.min.js}"></script>
<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{easyui/jquery.easyui.min.js}"></script>
在body主体中添加datagrid用于存放查询出来的数据
<table id="dg" title="File List" class="easyui-datagrid" style="width:850px;height:250px"
url="/getJson"
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<th data-options="field:'id'" width="50">ID</th>
<th data-options="field:'name'" width="50">Name</th>
<th data-options="field:'filelist'" width="50">FileList</th>
<th data-options="field:'state'" width="50">State</th>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newFileList()">New FileList</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editFileList()">Edit FileList</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyFileList()">Remove FileList</a>
</div>
对主要的属性进行讲解：
url：表示datagrid中存放的数据，一般为一个List<Object>，且存放着JSON对象。
data-options：表示上面Object对象的属性值，例如 field:'name' 表示Object对象的name将会显示在此列。
singleSelect：表示是否可以被单列选中，类似的属性还有是否显示分页、是否显示行号等。
完整的controller内容
package com.example.filelist.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.example.filelist.entity.EUDataGridResult;
import com.example.filelist.entity.FileList;
import com.example.filelist.repository.filelistRepository;
@Controller
@RequestMapping(value="/")
public class filelistController {
@Autowired
private filelistRepository filelistRepository;
@RequestMapping(value = "/filelist",method = RequestMethod.GET)
public String getFilelist(Model model)
{
List<FileList> filelists = filelistRepository.findAll();
model.addAttribute("filelists", filelists);
return "filelist";
}
@ResponseBody
@RequestMapping(value = "/saveFileList",method = RequestMethod.POST)
public FileList saveFileList(int id,String name,String filelist,String state,Model model)
{
FileList newFileList = new FileList();
newFileList.setName(name);
newFileList.setFilelist(filelist);
newFileList.setState(state);
FileList saveFileList = filelistRepository.save(newFileList);
return saveFileList;
}
@ResponseBody
@RequestMapping(value = "/updateFileList",method = RequestMethod.POST)
public FileList updateFileList(int id,String name,String filelist,String state,Model model)
{
filelistRepository.updateById(name, filelist, state, id);
FileList updateFileList = filelistRepository.findById(id);
return updateFileList;
}
@ResponseBody
@RequestMapping(value = "/destroyFileList",method = RequestMethod.POST)
public List<FileList> destroyFileList(int id,Model model)
{
filelistRepository.deleteById(id);
List<FileList> destroyFileList = filelistRepository.findAll();
return destroyFileList;
}
@ResponseBody
@RequestMapping(value = "/getJson")
public List<FileList> getJson(Model model)
{
List<FileList> filelists = filelistRepository.findAll();
return filelists;
}
@RequestMapping(value = "/hello",method = RequestMethod.GET)
public String hello(Model model) {
model.addAttribute("name", "Niao");
return "hello";
}
}
完整的UI内容
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css" th:href="@{easyui/themes/default/easyui.css}"/>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{easyui/themes/icon.css}"/>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/color.css" th:href="@{easyui/themes/color.css}"/>
<script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{easyui/jquery.min.js}"></script>
<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{easyui/jquery.easyui.min.js}"></script>
</head>
<body>
<table id="dg" title="File List" class="easyui-datagrid" style="width:850px;height:250px"
url="/getJson"
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<th data-options="field:'id'" width="50">ID</th>
<th data-options="field:'name'" width="50">Name</th>
<th data-options="field:'filelist'" width="50">FileList</th>
<th data-options="field:'state'" width="50">State</th>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newFileList()">New FileList</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editFileList()">Edit FileList</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyFileList()">Remove FileList</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post">
<div class="fitem">
<label>Name:</label>
<input name="name" class="easyui-validatebox" required="true"></input>
</div>
<div class="fitem">
<label>FileList:</label>
<input name="filelist"></input>
</div>
<div class="fitem">
<label>State:</label>
<input name="state" class="easyui-validatebox" required="true"></input>
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveFileList()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<script type="text/javascript">
function newFileList(){
$('#dlg').dialog('open').dialog('setTitle','New FileList');
$('#fm').form('clear');
url = '/saveFileList';
}
function saveFileList(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function editFileList(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit FileList');
$('#fm').form('load',row);
url = '/updateFileList?id='+row.id;
}
}
function destroyFileList(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('/destroyFileList',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
/* $.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
}); */
$('#dg').datagrid('reload');
}
},'json');
}
});
}
}
</script>
</body>
</html>
