EasyUI入门

一、官网

http://www.jeasyui.net

二、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>