[学习交流] 【上海校区】EasyUI 的应用

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">保存</a>
         <a href="javascript:void(0)" class="easyui-linkbutton">清空</a>
      </div>
</div>

不二晨 · 不二晨

奈斯，很赞

wuqiong · wuqiong

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】EasyUI 的应用

2 个回复