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