一、官网
二、easyui入门案例
模块拖拽
<!--引入jquery的js,EasyUI的执行需要依赖于jQuery -->
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<!--easyUI的js主文件 -->
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!--国际化的js文件 -->
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!--引入easyUI的样式 -->
<link rel="stylesheet" type="text/css"
href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<body>
<div class="easyui-draggable">拖动DIV</div>
<div class="easyui-draggable">测试div</div>
</body>
2.进度条的js代码
$(function(){
$("#b").click(function(){
onload();
})
/*采用递归的方法实现进度条刷新 */
var i = 0;
function onload(){
$('#p').progressbar({ value:i++});
if(i<=100){
setTimeout(function(){onload();},10)
}
}
})
<body>
<div id="p" class="easyui-progressbar" style="width:400px;"></div>
<input id="b" type="button" value="加载"/>
</body>
3.后台首页controller
@Controller
public class IndexController {
@RequestMapping("/index")
public String index(){
return "index";
}
}
4.商品列表展现
4.1页面url
4.2页面js
<table class="easyui-datagrid" id="itemList" title="商品列表" data-options="singleSelect:false,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
页面封装数据
由于EasyUI中使用表格进行数据展现时必须有特定的格式要求,必须使用total rows属性.所以封装为对象
编辑pojo
public class RasyUIItem{
private Integer total;
private List<Item> rows;
public Interger getTotal(){
return total;
}
public void setTotal(Integer total){
this.total=total;
}
public List<Item> getRows(){
return rows;
}
}
根据页面请求路径/item/query,
编辑controller
@RequestMapping("/query")
@ResponseBody
public EasyUIItem findItemByPage
(Integer page,Integer rows){
return itemService.findItemByPage(page,rows);
}
编辑service
@Override
public EasyUIItem findItemByPage(Integer page, Integer rows) {
//1.获取记录的总数
int total = itemMapper.findItemCount();
/**
select * from tb_item order by updated desc limit 0,20 第1页
select * from tb_item order by updated desc limit 20,20 第2页
select * from tb_item order by updated desc limit 40,20 第3页
*/
int start = (page - 1) * rows ; //起始页数
List<Item> itemList =
itemMapper.findItemBypage(start,rows);
EasyUIItem easyUIItem = new EasyUIItem();
easyUIItem.setTotal(total);
easyUIItem.setRows(itemList);
return easyUIItem;
}
编辑mapper
/**
* 说明:Mybatis中的接口不能实现多值传参.需要将
* 多值封装为单值.
* 1.封装为对象(user/item....)
* 2.封装为集合(array/list/set)
* 3.封装为Map<k,v>
* @Param("start")int start 将数据封装为map
* @param start
* @param rows
* @return
*/
//进行分页查询
List<Item> findItemBypage(@Param("start")int start,@Param("rows")Integer rows);
编辑映射文件 .xml
<select id="findItemCount" resultType="int">
select count(*) from tb_item
</select>
<!--
insert into item(id,name) values(?,?)
"1" "tom"
需求:
select * from item where age > 18
#号
特点:
1.可以进行对象或者参数的取值
2.在进行取值操作时会为数据添加一对""号
3.使用#号取值自动添加预编译的效果
总结:能用#号不用$
$符
特点:
1.以字段名称为参数时使用$
2.使用$符没有预编译的效果
-->
<select id="findItemBypage" resultType="Item">
select * from tb_item order by updated desc limit #{start},#{rows}
</select>