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. Java Inner class && nested class

    Java中,Inner Class(不被 static修饰)可以访问outer class 的所有成员(包括私有成员),同时,内部类 的创建必须经由外部类的实例! nested class 有stat ...

  2. UIWebView的缓存策略，清除cookie

    缓存策略 NSURLRequestCachePolicy NSURLRequestUseProtocolCachePolicy缓存策略定义在 web 协议实现中,用于请求特定的URL.是默认的URL缓 ...

  3. 强引用strong和弱引用weak的定义

    1.强引用表示从属关系,引用对象拥有被引用的对象.弱引用则暗示引用对象不拥有被引用的对象.一个对象的寿命是由它被强引用多少次来决定的.只要对象还存在强引用,就不会释放该对象. 注意:但是对象之间的引用 ...

  4. 2、C#基础整理（运算符、数据类型与转换、var关键字）

    ·运算符 数学运算符:+ - * / % 比较运算符:<   >   =   <=  >=   !=  返回bool值 逻辑运算符:&&并且.||或者,两者运行 ...

  5. 9、网页制作Dreamweaver（jQuery基础:事件）

    事件 定义 即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 触发 事件的触发有两种方法: 1.直接将事件click写在<javascrip ...

  6. cron用法

    cron用法说明 cron的用法老是记不住,索性写下来备忘.下文内容大部分是根据<Cron Help Guide>翻译而来,有些部分是自己加上的. 全文如下: cron来源于希腊单词chr ...

  7. ci总结

    1.创建模型,在模型中加载$this->load->database();2.在模型中写入想实现的功能方法3.在控制器中加载辅助函数和模型,$this->load->model ...

  8. angularjs 不同的controller之间值的传递

    Sharing data between controllers in AngularJS I wrote this article to show how it can possible to pa ...

  9. 使用ingress qdisc和ifb进行qos

    ifb   The Intermediate Functional Block device is the successor to the IMQ iptables module that was ...

  10. Qt之QCheckBox

    简述 QCheckBox继承自QAbstractButton,它提供了一个带文本标签的复选框. QCheckBox(复选框)和QRadioButton(单选框)都是选项按钮.这是因为它们都可以在开(选 ...