zoukankan      html  css  js  c++  java

  • EasyUI之DataGrid使用

    <h1>
    <span class="link_title"><a href="/liovey/article/details/9173931">
    EasyUI之DataGrid使用            
    </a></span>
</h1>

        <div class="article_manage clearfix">
    <div class="article_r">
        <span class="link_postdate">2013-06-25 22:28</span>
        <span class="link_view" title="阅读次数">6438人阅读</span>
        <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(4)</span>
        <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('EasyUI%e4%b9%8bDataGrid%e4%bd%bf%e7%94%a8','9173931');return false;" title="收藏">收藏</a></span>
         <span class="link_report"> <a href="#report" onclick="javascript:report(9173931,2);return false;" title="举报">举报</a></span>

    </div>
</div>
<div class="embody" style="display:none" id="embody">
    <span class="embody_t">本文章已收录于：</span>
    <div class="embody_c" id="lib" value="{&quot;err&quot;:0,&quot;msg&quot;:&quot;ok&quot;,&quot;data&quot;:[]}"></div>
</div>
<style type="text/css">        
        .embody{
            padding:10px 10px 10px;
            margin:0 -20px;
            border-bottom:solid 1px #ededed;                
        }
        .embody_b{
            margin:0 ;
            padding:10px 0;
        }
        .embody .embody_t,.embody .embody_c{
            display: inline-block;
            margin-right:10px;
        }
        .embody_t{
            font-size: 12px;
            color:#999;
        }
        .embody_c{
            font-size: 12px;
        }
        .embody_c img,.embody_c em{
            display: inline-block;
            vertical-align: middle;               
        }
         .embody_c img{               
            30px;
            height:30px;
        }
        .embody_c em{
            margin: 0 20px 0 10px;
            color:#333;
            font-style: normal;
        }
</style>
<script type="text/javascript">
    $(function () {
        try
        {
            var lib = eval("("+$("#lib").attr("value")+")");
            var html = "";
            if (lib.err == 0) {
                $.each(lib.data, function (i) {
                    var obj = lib.data[i];
                    //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";
                    html += ' <a href="' + obj.url + '" target="_blank">';
                    html += ' <img src="' + obj.logo + '">';
                    html += ' <em><b>' + obj.name + '</b></em>';
                    html += ' </a>';
                });
                if (html != "") {
                    setTimeout(function () {
                        $("#lib").html(html);                      
                        $("#embody").show();
                    }, 100);
                }
            }      
        } catch (err)
        { }
        
    });
</script>
  <div class="category clearfix">
    <div class="category_l">
       <img src="http://static.blog.csdn.net/images/category_icon.jpg">
        <span>分类：</span>
    </div>
    <div class="category_r">
                <label onclick="GetCategoryArticles('888239','lb85858585','top','9173931');">
                    <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">前台技术<em>（5）</em></span>
                  <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
                  <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
                    <div class="subItem">
                        <div class="subItem_t"><a href="http://blog.csdn.net/lb85858585/article/category/888239" target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                        <ul class="subItem_l" id="top_888239">                            
                        </ul>
                    </div>
                </label>                    
    </div>
</div>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/category.js"></script>  
    <div class="bog_copyright">         
        <p class="copyright_p">版权声明：本文为博主原创文章，未经博主允许不得转载。</p>
    </div>

    背景介绍：

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

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

    一、引入EasyUI框架

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

                 

    [javascript] view plain copy
     print?
    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实现模态弹出框

            代码如下:

    [html] view plain copy
     print?
    1. <div id="dlg" <span style="color:#ff0000;">class="easyui-dialog"</span> title="详细信息" style="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实现表格数据绑定

           代码如下:

                 

    [html] view plain copy
     print?
    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.       
    16.      <div id="dlg" <span style="color:#ff0000;">class="easyui-dialog"</span> title="详细信息" style="740px;height:350px;padding:10px"  
    17.             data-options="  
    18.                 buttons: [{  
    19.                     text:'提交',  
    20.                     iconCls:'icon-ok',  
    21.                     handler:function(){  
    22.                         alert('ok');  
    23.                     }  
    24.                 },{  
    25.                     text:'取消',  
    26.                     handler:function(){  
    27.                         $('#dlg').dialog('close');  
    28.                     }  
    29.                 }]  
    30.             ">  
    31.         <table id="dg" class="easyui-datagrid" title="数据" style="700px;height:250px"  
    32.             data-options="  
    33.             rownumbers:true,  
    34.             singleSelect:false,  
    35.             url:'<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/demo/datagrid/datagrid_data1.json'  
    36.             ">  
    37.             <thead>  
    38.                 <tr>  
    39.                     <th data-options="field:'ck',checkbox:true"></th>  
    40.                     <th data-options="field:'itemid',80">Item ID</th>  
    41.                     <th data-options="field:'productid',100">Product</th>  
    42.                     <th data-options="field:'listprice',80,align:'right'">List Price</th>  
    43.                     <th data-options="field:'unitcost',80,align:'right'">Unit Cost</th>  
    44.                     <th data-options="field:'attr1',220">Attribute</th>  
    45.                     <th data-options="field:'status',60,align:'center'">Status</th>  
    46.                 </tr>  
    47.             </thead>  
    48.         </table>  
    49.     </div>  
    50. </body>  
    51. </html>  

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

    效果如下:

                           

    四、实现编辑Product列

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

    [javascript] view plain copy
     print?
    1. <span style="font-size:18px;"><th data-options="field:'productid',100, formatter:formatProduct">Product</th></span>  
                     编写formatProduct回调函数，代码如下：

    [javascript] view plain copy
     print?
    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 plain copy
     print?
    1. <span style="font-size:18px;">}</span>  
                  效果如下：

                           

    五、为DataGrid添加footer

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

    [html] view plain copy
     print?
    1. <span style="font-size:18px;"><table id="dg" class="easyui-datagrid" title="数据" style="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',80">Item ID</th>  
    12.                     <th data-options="field:'productid',150, formatter:formatProduct">Product</th>  
    13.                     <th data-options="field:'listprice',80,align:'right'">List Price</th>  
    14.                     <th data-options="field:'unitcost',80,align:'right'">Unit Cost</th>  
    15.                     <th data-options="field:'attr1',170">Attribute</th>  
    16.                     <th data-options="field:'status',60,align:'center'">Status</th>  
    17.                 </tr>  
    18.             </thead>  
    19.         </table></span>  

    效果如下：


                               

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

    [javascript] view plain copy
     print?
    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数据格式不正确将无法出现上述效果:

    [plain] view plain copy
     print?
    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的朋友能够发掘更多实用的技术。


        <div id="digg" articleid="9173931">
        <dl id="btnDigg" class="digg digg_disable" onclick="btndigga();">
           
             <dt>顶</dt>
            <dd>4</dd>
        </dl>
       
          
        <dl id="btnBury" class="digg digg_disable" onclick="btnburya();">
          
              <dt>踩</dt>
            <dd>0</dd>               
        </dl>
        
    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);">&nbsp;</a></div>
<script type="text/javascript">
            function btndigga() {
                $(".tracking-ad[data-mod='popu_222'] a").click();
            }
            function btnburya() {
                $(".tracking-ad[data-mod='popu_223'] a").click();
            }
        </script>

    <div style="clear:both; height:10px;"></div>


    <div class="similar_article" style="">
            <h4>我的同类文章</h4>
            <div class="similar_c" style="margin:20px 0px 0px 0px">
                <div class="similar_c_t">
                            <label class="similar_cur">
                                <span style="cursor:pointer" onclick="GetCategoryArticles('888239','lb85858585','foot','9173931');">前台技术<em>（5）</em></span>
                            </label>
                </div>
               
                <div class="similar_wrap tracking-ad" data-mod="popu_141" style="max-height:195px;">
                    <a href="http://blog.csdn.net" style="display:none">http://blog.csdn.net</a>
                    <ul class="similar_list fl"><li><em>•</em><a href="http://blog.csdn.net/lb85858585/article/details/8708500" id="foot_aritcle_8708500undefined4157357865907829" target="_blank" title="Html表格常用技巧">Html表格常用技巧</a><span>2013-03-22</span><label><i>阅读</i><b>1984</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/lb85858585/article/details/7099535" id="foot_aritcle_7099535undefined9747324246315385" target="_blank" title="JS小知识">JS小知识</a><span>2011-12-24</span><label><i>阅读</i><b>451</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/lb85858585/article/details/6970715" id="foot_aritcle_6970715undefined2291203593817095" target="_blank" title="Flex多个组件使用时序问题">Flex多个组件使用时序问题</a><span>2011-11-15</span><label><i>阅读</i><b>520</b></label></li> </ul>

                    <ul class="similar_list fr"><li><em>•</em><a href="http://blog.csdn.net/lb85858585/article/details/7555520" id="foot_aritcle_7555520undefined923645085672913" target="_blank" title="WAP和Servlet交互">WAP和Servlet交互</a><span>2012-05-10</span><label><i>阅读</i><b>1166</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/lb85858585/article/details/7083659" id="foot_aritcle_7083659undefined4802890257205421" target="_blank" title="Flex中使用trim">Flex中使用trim</a><span>2011-12-19</span><label><i>阅读</i><b>648</b></label></li> </ul>
                </div>
            </div>
        </div>    
<script type="text/javascript">
    $(function () {
        GetCategoryArticles('888239', 'lb85858585','foot','9173931');
    });
</script>
  • 相关阅读:
    vijos p1782——借教室（noip2012提高组第2题）
    vijos p1781——同余方程（noip2012提高组第1题）
    vijos p1905——生活大爆炸版 石头剪刀布（noip2014提高组第一题）
    URAL_1018 二叉苹果树
    b_lc_统计同构子字符串的数目（找规律 / dp）
    a_lc_完成所有工作的最短时间（暴搜 / 状压）
    lc_b_栈和队列设计（都需要不断踢出非法元素的过程）
    a_lc_缺失的第一个整数 I~II（暴力 / 不断放到正确位置）
    b_lc_最短无序连续子数组（暴力 / ）
    b_lc_把二叉搜索树转换为累加树（逆中序遍历 / 迭代）
  • 原文地址：https://www.cnblogs.com/jpfss/p/6812607.html
Copyright © 2011-2022 走看看