EasyUI入门

清北_

于 2019-11-07 15:37:33 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/programmer188/article/details/102955301

版权

一、官网

http://www.jeasyui.net

二、easyui入门案例

模块拖拽

src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>

src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>

src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>

href="/js/jquery-easyui-1.4.1/themes/icon.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>

</body>

3.后台首页controller

@Controller

public class IndexController {

@RequestMapping("/index")

public String index(){

return "index";

}

4.商品列表展现

4.1页面url

4.2页面js

页面封装数据

由于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 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 * from tb_item order by updated desc limit #{start},#{rows}

</select>

清北_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI入门

一、官网http://www.jeasyui.net二、easyui入门案例模块拖拽<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script&gt...
复制链接

扫一扫