EasyUI组件使用

最新推荐文章于 2023-04-17 18:31:47 发布

努力和时间做朋友

最新推荐文章于 2023-04-17 18:31:47 发布

阅读量1.3k

点赞数 1

分类专栏：【JAVA积累】文章标签： javascript jquery

本文链接：https://blog.csdn.net/lfh15732626246/article/details/58324587

版权

【JAVA积累】专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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更加方便。总之各有各的特点，用对地方就是好的。

努力和时间做朋友

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
8
评论
EasyUI组件使用

EasyUI组件使用EasyUI是基于jQuery的UI插件集合体，目标就是帮助web开发者更加轻松的打造出功能丰富并且美观的界面，重点是不需要编写复杂的JavaScript代码，不需要对css有深入的了解，只需要一些简单的html标签或者jQuery代码。使用环境搭建导入响应的css和js <link rel="stylesheet" type="text/css" href="/ee_D
复制链接

扫一扫