http://blog.csdn.net/liovey/article/details/9173931

背景介绍：

原 先项目采用普通的jsp页面来做为前端显示,用户体验差,并且为了实现某一种效果需要编写大量的js代码。因此寻找可以逐步替代前端显示的框架，逐渐转变 为富客户端开发。通过上网查阅资料，并结合业务需要，发现extjs过于庞大，而easyui小巧并且功能也很强大。于是采用EasyUI的方式尝试在一 个功能上使用。功能如下：

用户点击提交时，弹出模态窗口，该模态窗口内容支持异步获取表格内容，同时支持某个表格的单元格进行编辑。并且支持复选，最后将选择的内容提交到后台。

一、引入EasyUI框架

Easyui的引入非常简单。只需要在页面中加入如下js便可以工作。

[javascript] view plaincopy
  1. <span style="font-family:SimHei;font-size:18px;"><script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.js"></script>jquery包
  2. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> easyui开发包
  3. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>解决中文乱码包，不同的语言只要加入local下对应的js
  4. <link  rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/themes/default/easyui.css"> 全局easyui css样式包
  5. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/themes/icon.css">全局easyui 图标样式包</span>

二、使用dialog实现模态弹出框

        代码如下:

  1. <div id="dlg" <span style="color:#ff0000;">class="easyui-dialog"</span> title="详细信息" style="width:730px;height:340px;padding:10px"
  2. data-options="
  3. buttons: [{
  4. text:'提交',
  5. iconCls:'icon-ok',
  6. handler:function(){
  7. alert('ok');
  8. }
  9. },{
  10. text:'取消',
  11. handler:function(){
  12. $('#dlg').dialog('close');
  13. }
  14. }]
  15. ">
  16. </div>

请大家注意上述代码红色部分,一定要写成easyui-dialog，easyui会根据该标识初始化一个dialog对象 。

效果如下:

三、采用Datagrid实现表格数据绑定

       代码如下:

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.js"></script>
  9. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  10. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
  11. <link  rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/themes/default/easyui.css">
  12. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/themes/icon.css">
  13. </head>
  14. <body>
  15. <div id="dlg" <span style="color:#ff0000;">class="easyui-dialog"</span> title="详细信息" style="width:740px;height:350px;padding:10px"
  16. data-options="
  17. buttons: [{
  18. text:'提交',
  19. iconCls:'icon-ok',
  20. handler:function(){
  21. alert('ok');
  22. }
  23. },{
  24. text:'取消',
  25. handler:function(){
  26. $('#dlg').dialog('close');
  27. }
  28. }]
  29. ">
  30. <table id="dg" class="easyui-datagrid" title="数据" style="width:700px;height:250px"
  31. data-options="
  32. rownumbers:true,
  33. singleSelect:false,
  34. url:'<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/demo/datagrid/datagrid_data1.json'
  35. ">
  36. <thead>
  37. <tr>
  38. <th data-options="field:'ck',checkbox:true"></th>
  39. <th data-options="field:'itemid',width:80">Item ID</th>
  40. <th data-options="field:'productid',width:100">Product</th>
  41. <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
  42. <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
  43. <th data-options="field:'attr1',width:220">Attribute</th>
  44. <th data-options="field:'status',width:60,align:'center'">Status</th>
  45. </tr>
  46. </thead>
  47. </table>
  48. </div>
  49. </body>
  50. </html>

请大家注意上面代码红色部分,告诉easyui初始化一个datagrid对象。

效果如下:

四、实现编辑Product列

         使用easyui内置formatter函数，在表示datagrid表格对应product列头增加如下代码:

[javascript] view plaincopy
  1. <span style="font-size:18px;"><th data-options="field:'productid',width:100, formatter:formatProduct">Product</th></span>

编写formatProduct回调函数，代码如下：

[javascript] view plaincopy
  1. <span style="font-size:18px;">function formatProduct(val,row,index){
  2. return "<input type='text' id='ch'"+row.itemid+" value='0' ></input>"</span>
[javascript] view plaincopy
  1. <span style="font-size:18px;">}</span>

效果如下：

五、为DataGrid添加footer

        该footer相当于表格底部信息，一般做统计信息,需要给datagrid的data-options增加一个显示footer的属 性，这里需要注意：由于datagrid绑定的是json数据，因此json格式需要包含footer信息。代码如下，注意红色部分和json数据（后面 会补充上）：

  1. <span style="font-size:18px;"><table id="dg" class="easyui-datagrid" title="数据" style="width:700px;height:250px"
  2. data-options="
  3. rownumbers:true,
  4. singleSelect:false,
  5. <span style="color:#ff0000;">showFooter: true,</span>
  6. url:'<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/demo/datagrid/datagrid_data2.json'
  7. ">
  8. <thead>
  9. <tr>
  10. <th data-options="field:'ck',checkbox:true"></th>
  11. <th data-options="field:'itemid',width:80">Item ID</th>
  12. <th data-options="field:'productid',width:150, formatter:formatProduct">Product</th>
  13. <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
  14. <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
  15. <th data-options="field:'attr1',width:170">Attribute</th>
  16. <th data-options="field:'status',width:60,align:'center'">Status</th>
  17. </tr>
  18. </thead>
  19. </table></span>

效果如下：

大家可以看到多出来了footer但是好像不是很美观，我们稍微作下处理，将formatProduct函数内容改写下，代码如下：

[javascript] view plaincopy
  1. <span style="font-size:18px;">function formatProduct(val,row,index){
  2. if(<span style="color:#ff0000;">"undefined" != typeof(row.productid)</span>){
  3. return "<input type='text' id='ch'"+row.itemid+" value='0' ></input>";
  4. }
  5. }</span>

请注意红色部分,由于footer中没有productid，所以判断当数据定义了productid格式化为编辑框，否则不格式化为编辑框。

效果如下：

总结

      本实例中省略了一些内容,包括提交,取消,选择checkbox时，进行product的求和，同后台的交互（完全jquery异步请求）。做为EasyUI入门的因子，希望对初学的人能有所帮助。

有footer的json数据如下，这个也很重要，如果json数据格式不正确将无法出现上述效果:

  1. {"total":28,"rows":[
  2. {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
  3. {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
  4. {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
  5. {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
  6. {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
  7. {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
  8. {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
  9. {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
  10. {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
  11. {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
  12. ],"footer":[
  13. {"unitcost":19.80,"listprice":60.40,"itemid":"Average:"},
  14. {"unitcost":198.00,"listprice":604.00,"itemid":"Total:"}
  15. ]}

另外大家可以去EasyUI的官网学习：http://www.jeasyui.com/,最新的api提供了更简便的操作。

偶尔会出现官网上不去的情况，请参看国内的网址，缺点是api不是最新：http://www.phptogether.com/juidoc/

后续会补充上datagrid的分页，datagrid掌握后并有jquery的基础可以说easyui就会用了，期待学习EasyUI的朋友能够发掘更多实用的技术。

EasyUI之DataGrid使用的更多相关文章

  1. easyUI 中datagrid 返回列隐藏方法

    easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...

  2. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  3. easyui的datagrid行的某一列添加链接

    通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...

  4. easyui的datagrid打印(转)

    在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...

  5. EasyUI的datagrid分页

    EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...

  6. easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题

    做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...

  7. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

  8. 修改easyui中datagrid表头和数据不能分开对齐的BUG。

    easyui的datagrid中表头和列只能同时全部向左对齐,全部向右对齐或者居中对齐. 有时候有需求,数据向左或向右,表头居中对齐. 在不修改源码的情况下.下面的代码可以实现该功能. 把下面代码放在 ...

  9. JQuery EasyUI的datagrid的使用方式总结

    JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...

  10. Easyui的datagrid结合hibernate实现数据分页

    最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...

随机推荐

  1. mysql批量写入

    MySQL批量写入语法是: INSERT INTO table (field1,field2,field3) VALUES (“a”,”b”,”c”), (“a1”,”b1”,”c1”),(“a2”, ...

  2. 2016 - 1- 19 GCD单例模式

    一:单例模式的作用: 1.可以保证在程序运行过程中,一个类只有一个实例,而且易于外界访问.2 2.从而方便的控制了实例的个数,节约系统资源. 二:单例模式的应用场景: 代码: 1.在一个需要实现单例模 ...

  3. 12-26 tableView的学习心得

    一:基础部分 UITableView的两种样式: 注意是只读的 1.UITableViewStytlePlain(不分组的) n 2.UITableViewStyleGrouped(分组的) 二:如何 ...

  4. iOS数据持久化

    在iOS中,实现数据持久化一般分为4大种: 1.属性列表 2.对象归档 3.SQLite 4.Core Data 一.属性列表 NSUserDefaults类的使用和NSKeyedArchiver有很 ...

  5. BZOJ 3531（树链剖分+线段树）

    Problem 旅行 (BZOJ 3531) 题目大意 给定一颗树,树上的每个点有两个权值(x,y). 要求维护4种操作: 操作1:更改某个点的权值x. 操作2:更改某个点的权值y. 操作3:求a-- ...

  6. WCF中DataContractAttribute 类

    一.这个类的作用 使用提供的数据协定,将类型实例序列化和反序列化为 XML 流或文档.无法继承此类,(DataContractSerializer 用于序列化和反序列化在 Windows Commun ...

  7. Windows Server 2008 R2: 创建任务计划

    task Scheduler 在业务复杂的应用程序中,有时候会要求一个或者多个任务在一定的时间或者一定的时间间隔内计划进行,比如定时备份或同步数据库,定时发送电子邮件等. 创建一个任务计划: 开始St ...

  8. C++学习笔记36:类模板

    类模板的目的 设计通用的类型式,以适应广泛的成员数据型式 类模板的定义格式 template<模板形式参数列表>class 类名称{...}; 原型:template<typenam ...

  9. Ubuntu下adb的安装

    1.adb简述: adb全称Android Debug Bridge,安卓调试桥接器.它是Android sdk里的一个工具,用这个工具可以直接操作管理android模拟器或者真实的andriod设备 ...

  10. Linux中“新旧”TCP/IP工具的对比

    如今很多系统管理员依然通过组合使用诸如ifconfig.route.arp和netstat等命令行工具(统称为net-tools)来配置网络功能.解决网络故障,net-tools起源于BSD的TCP/ ...