EasyUI组件使用

EasyUI是基于jQuery的UI插件集合体，目标就是帮助web开发者更加轻松的打造出功能丰富并且美观的界面，重点是不需要编写复杂的JavaScript代码，不需要对css有深入的了解，只需要一些简单的html标签或者jQuery代码。

使用

  • 环境搭建
    导入响应的css和js
    <link rel="stylesheet" type="text/css" href="/ee_Day23easyui/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/ee_Day23easyui/css/icon.css">
    <link rel="stylesheet" type="text/css" href="/ee_Day23easyui/css/demo.css">
    <script type="text/javascript" src="/ee_Day23easyui/js/jquery.min.js"></script>
    <script type="text/javascript" src="/ee_Day23easyui/js/jquery.easyui.min.js"></script>
  • 布局设计
    采用Layout布局，嵌套accordion分类,和tree的菜单结果，Tabs选项卡，以及dataGrid数据表格显示查询数据。
  • 过程
    需求：点击菜单栏中的“商品分类”，在右侧显示出查询到的商品，并且可以自定义每页显示的个数。
<span><a href="Javascript:void(0)" onclick="addTab()">商品分类</a></span>
<script type="text/javascript">
    //点击查询添加选项卡
    function addTab(){
        //判断选项卡是否存在
        var flag=$("#tt").tabs('exists','showProduct');
        if(flag){
            //存在则显示
            $("#tt").tabs('select','showProduct');
        }else{
            //不存在则天剑
            $("#tt").tabs('add',{
                title:'showProduct',
                selected:true,
                closable:true,
                /* iframe是一个框架集进行加载任意路径 */
                content:"<iframe src='/ee_Day23easyui/productList.jsp' style='width:99%;height:99%;border:0px'>"
            })
        }
    }

</script>

Tab中显示的内容来自另外一个jsp，这个jsp是在一个table表格中动态向dataGrid添加数据。

<script type="text/javascript">
//通过js方式进行渲染
$(function(){
    $('#dg').datagrid({    
        url:'/ee_Day23easyui/ShowProductServlet',
        autoRowHeight:true,
        fit:true,
        fitColumns:true, 
        columns:[[    
            {field:'pid',title:'编号',width:100},    
            {field:'pname',title:'名称',width:100},    
            {field:'shop_price',title:'价格',width:100,align:'right'},    
            {field:'pimage',title:'pimage',formatter:function(value){
                return "<img src="+value+" style='width:60px' >";
            }}    
        ]],
        toolbar: [{
            iconCls: 'icon-edit',
            handler: function(){alert('编辑按钮')}
        },'-',{
            iconCls: 'icon-help',
            handler: function(){alert('帮助按钮')}
        }],
        pagination:true,//显示工具栏
        pageNumber:1, //设置默认显示的页数
        pageSize:5,//初始化时显示的个数5
        pageList:[5,10,15,20]
    });  
});
<body>
<table id="dg"></table>  
</body>

dataGrid中数据是通过请求一个servlet，查询数据库中的商品数据。由于服务器和客户端都是通过json数据传递的，所以从servlet得到的数据要进行转换。

  • JSON转换
String jsonStr = JSONArray.fromObject(list).toString();
或者
String jsonStr =  JSONObject.fromObject(map).toString();
  • 利用Gson包
    可以将所有类型的数据进行转换
Gson gson = new Gson();
String json = gson.toJson(pageBean);

这样就可以轻松的查询到数据啦，并且在不需要很多css设计的情况下拥有了美观的界面。

BootStrap和EasyUI

提到了EasyUI,不得不说Bootsrap，他们都是基于jQuery的，但各有不同的特点和功能，我们一起来看一下吧。

  • BootStrap主要用于响应式开发，兼容不同设备的浏览器，但没有ajax组件，ajax开发依赖程序员纯手写。
    BootStrap一般用于互联网项目的用户可见模块的开发，例如主页、商品页面等
    优点：BootStrap主要应用移动互联网。
    缺点：BootStrap 没有ajax组件。需要手写.get，.post，$.ajax();
  • EasyUI主要用于Ajax的数据交互的效果开发，虽然样式上不如BootStrap绚丽，但EasyUI有着丰富的ajax功能组件，我们只需要调用组件就能完成丰富的ajax效果。EasyUI一般用于项目后台管理员相关模块的开发，例如：商品管理，订单管理等JAVAEE级别。
  • 如果着重展示效果，对ajax没有特殊要求，使用BootStrap。如果频繁使用AJAX进行数据交互，那么使用EasyUI更加方便。总之各有各的特点，用对地方就是好的。