EasyUI怎么应用？
author:songfuwfei
1.先在myeclipse搭好一个ssm的框架。
2.在mysql里面建好需求表。
3.创建好表，搭好框架写个index文件跑一下项目看框架好使不。
4.导入一些 css js 小图标 插件放到webRoot下面新创的文件夹下 3rd-party下面新创的easyUI下面。
5.往index页面导入这些css js 样式的路径：
<title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd-party/easyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd-party/easyUI/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd-party/easyUI/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd-party/easyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd-party/easyUI/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script>
6.上面5步完成后我们在index页面取得了EasyUI的样式，表格中没有数据那么我们把后台写完整。
该写什么呢？无非就是列表增删改。。。
7.写完后台操作 用EasyUI展示列表。
8.index页面代码如下使用javascript去创建DataGrid控件（API里有一些列子和属性可以引用）：
<body>
<table id="dg"></table>
</body>
9.如下代码写在webRoot下新建一个文件在新建一个js页面
$(function(){
$('#dg').datagrid({
url:'goods/Goodslist.do',//------>后台列表路径
// -----------------------------------------------------------------------------------------
columns:[[
{field:'gid',title:'商品编号',width:100},
{field:'gname',title:'商品名称',width:100},
{field:'gprice',title:'商品价格',width:100},
{field:'gcount',title:'商品库存',width:100},
{field:'gcontent',title:'商品简介',width:100},
{field:'gdate',title:'上架日期',width:100},
{field:'gphoto',title:'图片路径',width:100}
]] ,
title:"商品列表",
width:"700px",
height:"400px",
fitColumns:true，
pagination:true，//显示分页工具栏
pageSize:5,//分页默认每页5条数据
pageList:[5,10,15,20]， //设置分页每页条数
rownumbers:true,
toolbar: [{
text:'添加商品',
iconCls: 'icon-add',
handler: function(){
$('#ff').form('clear');
$("#dd").dialog({title:'添加商品'});
$('#dd').dialog('open');
}
},'-',{
text:'删除商品',
iconCls: 'icon-cut',
handler: function(){
var row = $("#dg").datagrid("getSelected");
if(row!=null){
$.ajax({
type:"post",
url:"goods/deleteGoods.action",
data:{gid:row.gid},
dataType:"json",
success:function (flag){
if(flag){
alert("成功！");
$('#dg').datagrid('reload');
}else{
alert("失败！");
}
}
});
}else{
alert("请选择一行数据！");
}
}
},'-',{
text:'修改商品',
iconCls: 'icon-edit',
handler: function(){
var row = $("#dg").datagrid("getSelected");
if(row==null){
alert("请选择一行数据！");
}else{
$("#dd").dialog({title:'修改商品'});
$("#ff").form("load",row);
$("#dd").dialog("open");
}
}
}],
singleSelect:true
});
$('#dd').dialog({
width: 400,
height: 280,
closed: true
});
});
function submitForm(){
$.ajax({
type:"post",
url:"goods/insertGoods.action",
data:$("#ff").serialize(),
dataType:"json",
success:function (flag){
if(flag){
alert("成功！");
$('#dd').dialog('close');
$('#dg').datagrid('reload');
}else{
alert("失败！");
}
}
});
}
});
});
10.写完以上东西 泡一下项目 在浏览器中运行一下如果出现乱码我们需要设置一下js页面的代码格式
点击顶端window，再点击最底端prefenerces，点进去你会看到Content Types点击它选择Text
里面你会看到两个javaScriptSource file 点击它底部有一个D开头的方框里改一下编码格式
写上utf-8 然后点击右边的update 再点击ok 两个都需要改哦。
11.改好上面的代码再次运行tomcat泡一下项目在浏览器中运行完成EasyUI简单列表展示.
EasyUI分页
12.在上面列表的基础上添加分页。
13.查看API文档 里面有个分页工具栏属性pagination 把它设置在上面第9步的属性里 如上 但是经过本人亲自验证发现有个小bug 就是
当你设置完如上pagination:true代码时泡一下项目发现在浏览器中取不到底部分页工具导向 这是为什么呢 是因为mysql中表中数据
太少你要写大于十条数据（这是当时我的bug）。
14.如果想让数据和分页工具栏同步 那么 传输给页面的数据，必须按照easyUI分页工具栏能解析的格式进行传递
easyUI分页工具栏需要2组数据：
1.total:总条数
2.rows:分页之后的数据集合
15.明白上面的道理接下来我们就来写controller等等分层里面的代码：
16.controller层代码如下：
@Controller
@RequestMapping("goods")
public class GoodsController {
@Autowired
private GoodsService goodsService;
@RequestMapping("Goodslist")
@ResponseBody
public Map<String,Object> Goodslist(int page,int rows){
int count =goodsService.Goodscount();
List list =goodsService.Goodslist(page,rows);
//select * from 表 limit （页数-1）*每页条数,每页条数
//页数（page） 每页多少条(rows) 索引
//1 5 0=0*5
//2 5 5=1*5
//3 5 10=2*5
//索引=（页数-1）*每页条数
Map<String,Object> map = new HashMap<String,Object>();
map.put("total", count);
map.put("rows", list);
return map;
}
}
service层代码如下：
@Service
public class GoodsService {
@Autowired
private GoodsDao goodsDao;
public List Goodslist(int page, int rows) {
Map<String, Integer> map = new HashMap<String, Integer>();
map.put("index", (page-1)*rows);
map.put("rows", rows);
return goodsDao.Goodslist(map);
}
public int Goodscount() {
return goodsDao.Goodscount();
}
}
dao层我就不写了。。。。。。。
Mapper层：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.baidu.dao.GoodsDao">
<select id="Goodslist" resultType="Goods" parameterType="map" >
select * from tb_goods limit #{index},#{rows}
</select>
<select id="Goodscount" resultType="Integer">
select count(gid) from tb_goods
</select>
</mapper>
17.写完跑一下项目在浏览器中运行 完成列表分页功能了。
EasyUI增删改
EasyUI删除功能讲解：
当作删除时我们要选中一天数据删除
controller层代码如下：
@RequestMapping("deleteGoods")
@ResponseBody
public Boolean deleteGoods(Goods goods){
int i = goodsService.deleteGoods(goods);
if(i>0){
return true;
}else{
return false;
}
}
Mapper层：
<delete id="deleteGoods" parameterType="Goods" >
delete from tb_goods where gid=#{gid}
</delete>
EasyUI 添加和修改
做一种简单的方法 让添加和修改做一个后台那么我们就得判断：
@RequestMapping("addGoods")
@ResponseBody
public Boolean addGoods(Goods goods){
int i = 0;
if(goods.getGid()==null){//当id等于null 时做添加
i = goodsService.addGoods(goods);
}else{
i = goodsService.updateGoods(goods);//当id不等于null 时做修改
}
if(i>0){
return true;
}else{
return false;
}
}
如果添加双表联查的话下拉框 写活 找到相应得表：
<tr>
<td>商品类型:</td>
<td>
<input class="easyui-combobox" name="gtid" data-options="url:'../goods/getGoodsTypeList.action',method:'get',valueField:'gtid',textField:'gtname',multiple:false,panelHeight:'auto'">
</td>
</tr>
EasyUI 东西南北样式：
api样式
from表单样式
<div id="dd">
<form id="ff" method="post">
<table cellpadding="5">
<tr>
<td> :<input type="hidden" name="id"/></td>
<td><input class="easyui-textbox" type="text" name="sid" data-options="required:true" style="width: 230px;"></input></td>
</tr>
<tr>
<td> :</td>
<td>
<input class="easyui-combobox" name="cid" data-options="url:'student/Typelist.do',method:'get',valueField:'cid',textField:'cname',multiple:false,panelHeight:'auto'">
</td>
</tr>
<tr>
<td> :</td>
<td><input class="easyui-textbox" type="text" name="shtime" data-options="required:true" style="width: 230px;"></input></td>
</tr>
<tr>
<td> :</td>
<td><input class="easyui-textbox" type="text" name="flag" data-options="multiline:true" style="height:60px; width: 230px;"></input></td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清空</a>
</div>
</div>