程序博客网 > 推理软件

【SSH网上商城项目实战06】基于DataGrid的数据显示

来源：互联网 发布：推理软件 编辑：程序博客网 时间：2024/05/22 03:31

目录(?)[+]

  1. 回顾一下第4节内容
  2. 创建DataGrid控件的几种方式
  3. DataGrid控件的属性
  4. DataGrid数据显示的效果

        EasyUI中DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

1. 回顾一下第4节内容

        在第4节中，我们使用EasyUI搭建好了左侧菜单栏，并且通过点击菜单选项在右边弹出对应的选项卡。这节我们来使用DataGrid把右边的选项卡部分做好。先看一下第4节中最后的aindex.jsp文件（也可参见第4节中的内容）：


2. 创建DataGrid控件的几种方式

        DataGrid显示数据是json格式的，所以我们首先要把从后台获取到的数据打包成Jason格式，然后传到前台来让DataGrid来显示，这一节我们先不从后台获取数据，先自己准备一个.json文件，里面有ison格式的数据，然后我们来让DataGird显示，先把显示功能做好，再请求后台数据。

        我们先从EasyUI的参考文档中看一下DataGrid显示的格式是什么样的，如下图所示：

       我们沿着参考文档往下看，我们发现DataGrid空间是通过<table>来创建的，有三种创建方式：

       第一种：从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。


        第二种：通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。 


        第三种：使用JavaScript去创建DataGrid控件。


        我们采取第三种，用js去创建DataGrid控件，首先我们得先准备一个存储了json格式数据的文件，在WebRoot/jQuery-easyui-1.3.5/demo/datagrid/下面有几个json文件，我们选择一个datagrid_data1.json，拷贝到WebRoot目录下，修改一下参数，等会我们要来显示这个json文件里的数据。如下：

[plain] view plain copy
print?在CODE上查看代码片派生到我的代码片
  1. {“total”:10,”rows”:[  
  2.     {“code”:”FI-SW-01”,”productname”:”Koi”,”price”:10.00},  
  3.     {“code”:”K9-DL-01”,”productname”:”Dalmation”,”price”:12.00},  
  4.     {“code”:”RP-SN-01”,”productname”:”Rattlesnake”,”price”:12.00},  
  5.     {“code”:”RP-LI-02”,”productname”:”Iguana”,”price”:12.00},  
  6.     {“code”:”FL-DSH-01”,”productname”:”Manx”,”price”:12.00},  
  7.     {“code”:”FL-DSH-01”,”productname”:”Manx”,”price”:12.00},  
  8.     {“code”:”FL-DLH-02”,”productname”:”Persian”,”price”:12.00},  
  9.     {“code”:”FL-DLH-02”,”productname”:”Persian”,”price”:12.00},  
  10.     {“code”:”AV-CB-01”,”productname”:”Amazon Parrot”,”price”:92.00},  
  11.     {“code”:”AV-CB-03”,”productname”:”Amazon Parrot”,”price”:92.00}  
  12. ]}  
{"total":10,"rows":[    {"code":"FI-SW-01","productname":"Koi","price":10.00},    {"code":"K9-DL-01","productname":"Dalmation","price":12.00},    {"code":"RP-SN-01","productname":"Rattlesnake","price":12.00},    {"code":"RP-LI-02","productname":"Iguana","price":12.00},    {"code":"FL-DSH-01","productname":"Manx","price":12.00},    {"code":"FL-DSH-01","productname":"Manx","price":12.00},    {"code":"FL-DLH-02","productname":"Persian","price":12.00},    {"code":"FL-DLH-02","productname":"Persian","price":12.00},    {"code":"AV-CB-01","productname":"Amazon Parrot","price":92.00},    {"code":"AV-CB-03","productname":"Amazon Parrot","price":92.00}]}
        我们可以看到，json数据格式是：”key1”: value1, “key2”:value2。每个value里面又可以是数组，数组中保存新的Jason数据。
        有了json文件，我们接下来就可以设计DataGrid控件了，整个DataGrid都是在query.jsp中设计的，因为要显示的内容就是query.jsp中的内容。我们来看看query.jsp页面：
[javascript] view plain copy
print?在CODE上查看代码片派生到我的代码片
  1. <%@ page language=“java” import=“java.util.*” pageEncoding=“UTF-8”%>  
  2. <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”>  
  3. <html>  
  4.   <head>  
  5.     <%@ include file=”/public/head.jspf” %>  
  6.     <script type=”text/javascript”>  
  7.         (<span class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(’#dg’).datagrid({     
  8.                 //请求数据的url地址，后面会改成请求我们自己的url  
  9.                 url:’datagrid_data.json’,  
  10.                 loadMsg:’Loading……’,  
  11.                 queryParams:{type:”},//参数  
  12.                 //width:300,  
  13.                 fitColumns:true,//水平自动展开，如果设置此属性，则不会有水平滚动条，演示冻结列时，该参数不要设置  
  14.                 //显示斑马线  
  15.                 striped:true,  
  16.                 //当数据多的时候不换行  
  17.                 nowrap:true,  
  18.                 singleSelect:true, //如果为真，只允许单行显示，全显功能失效  
  19.                 //设置分页  
  20.                 pagination:true,  
  21.                 rowStyler: function(index,row){  
  22.                     console.info(”index” + index + “,” + row)  
  23.                     if(index % 2 == 0) {  
  24.                         return ‘background-color:#fff;’;  
  25.                     } else {  
  26.                         return ‘background-color:#ff0;’;  
  27.                     }  
  28.                       
  29.                 },  
  30.                 //同列属性，但是这些列将会冻结在左侧,大小不会改变，当宽度大于250时，会显示滚动条，但是冻结的列不在滚动条内  
  31.                 frozenColumns:[[  
  32.                     {field:’checkbox’,checkbox:true},  
  33.                     {field:’code’,title:‘编号’,width:200}                   
  34.                 ]],  
  35.                 //配置datagrid的列字段   
  36.                 //field：列字段的名称，与json的key捆绑  
  37.                 //title：列标题，是显示给人看的  
  38.                 columns:[[                       
  39.                     {field:’productname’,title:‘类别名称’,width:100,  
  40.                         //用来格式化当前列的值，返回的是最终的数据  
  41.                         formatter: function(value,row,index){  
  42.                         return “<span title=” +　value + “>” + value + “</span>”;  
  43.                     }  
  44.                 },      
  45.                     {field:’price’,title:‘价格’,width:100,  
  46.                     styler: function(value,row,index){  
  47.                         //设置当前单元格的样式，返回的字符串直接交给 style属性  
  48.                         //console.info(“val:” + value + ”,row:” + row + ”,index:” + index)  
  49.                         if (value < 20){  
  50.                             return ‘color:red;’;  
  51.                         }  
  52.                     }     
  53.                     }  
  54.                 ]]      
  55.             });   
  56.         });  
  57.     </script>  
  58.   </head>  
  59.     
  60.   <body>  
  61.     <table id=”dg”></table>  
  62.   </body>  
  63. </html>  
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <%@ include file="/public/head.jspf" %>    <script type="text/javascript">        $(function(){            $('#dg').datagrid({                   //请求数据的url地址，后面会改成请求我们自己的url                url:'datagrid_data.json',                loadMsg:'Loading......',                queryParams:{type:''},//参数                //width:300,                fitColumns:true,//水平自动展开，如果设置此属性，则不会有水平滚动条，演示冻结列时，该参数不要设置                //显示斑马线                striped:true,                //当数据多的时候不换行                nowrap:true,                singleSelect:true, //如果为真，只允许单行显示，全显功能失效                //设置分页                pagination:true,                rowStyler: function(index,row){                    console.info("index" + index + "," + row)                    if(index % 2 == 0) {                        return 'background-color:#fff;';                    } else {                        return 'background-color:#ff0;';                    }                },                //同列属性，但是这些列将会冻结在左侧,大小不会改变，当宽度大于250时，会显示滚动条，但是冻结的列不在滚动条内                frozenColumns:[[                    {field:'checkbox',checkbox:true},                    {field:'code',title:'编号',width:200}                                 ]],                //配置datagrid的列字段                 //field：列字段的名称，与json的key捆绑                //title：列标题，是显示给人看的                columns:[[                                         {field:'productname',title:'类别名称',width:100,                        //用来格式化当前列的值，返回的是最终的数据                        formatter: function(value,row,index){                        return "<span title=" +　value + ">" + value + "</span>";                    }                },                        {field:'price',title:'价格',width:100,                    styler: function(value,row,index){                        //设置当前单元格的样式，返回的字符串直接交给 style属性                        //console.info("val:" + value + ",row:" + row + ",index:" + index)                        if (value < 20){                            return 'color:red;';                        }                    }                       }                ]]                });         });    </script>  </head>  <body>    <table id="dg"></table>  </body></html>

3. DataGrid控件的属性

        我们可以看到，使用js去创建DataGrid控件的话，只要一个<table>标签即可，主要都是在js中完成。DataGrid的控件很强大，这里我们主要做一下基本的显示，更多其他的功能可以参照EasyUI的开发文档。我们现在针对上面的query.jsp文件做一下分析：

        首先DataGrid控件有两种属性：一个是DataGrid属性，还有一个是列属性。顾名思义，DataGrid属性是给整个DataGrid控件添加的属性，而列属性是针对某一列的。每中属性有很多，这里只做了一些基本的常用的属性。

        DataGrid属性里最重要的是columns属性，它是一个数组，可以创建多列，见下面的截图：

        我们来看下columns属性中有哪些细节：


        列属性中，field表示字段名称，对应与json数据的key，然后title是要显示给用户看的标题，见query.jsp文件中，还有其他一些基本属性可以参照EasyUI文档。列属性中比较重要的也比较常用的两个属性是formatter和styler，分别是用来格式化当前列的值和设置单元格样式的，我们主要来看一下这两个属性：


        我们具体来分析一下上面query.jsp中的columns属性中，如何使用这两个列属性的：

[javascript] view plain copy
print?在CODE上查看代码片派生到我的代码片
  1. {field:‘productname’,title:‘类别名称’,width:100,  
  2.     //用来格式化当前列的值，返回的是最终的数据  
  3.     formatter: function(value,row,index){  
  4.         return “<span title=” +　value + “>” + value + “</span>”;//设置为鼠标放上去显示value值  
  5.     }  
  6. },      
  7. {field:’price’,title:‘价格’,width:100,  
  8.     styler: function(value,row,index){  
  9.         //设置当前单元格的样式，返回的字符串直接交给 style属性  
  10.             //console.info(“val:” + value + ”,row:” + row + ”,index:” + index)  
  11.         if (value < 20){ //如果value值小于20  
  12.             return ‘color:red;’; //将value值显示为红色  
  13.         }  
  14.     }     
  15. }  
{field:'productname',title:'类别名称',width:100,    //用来格式化当前列的值，返回的是最终的数据    formatter: function(value,row,index){        return "<span title=" +　value + ">" + value + "</span>";//设置为鼠标放上去显示value值    }},    {field:'price',title:'价格',width:100,    styler: function(value,row,index){        //设置当前单元格的样式，返回的字符串直接交给 style属性            //console.info("val:" + value + ",row:" + row + ",index:" + index)        if (value < 20){ //如果value值小于20            return 'color:red;'; //将value值显示为红色        }    }   }

        然后我们再看看DataGrid控件的一些属性：
        url表示要显示的数据来源，这里设置成datagrid_data.json表示数据来源是这个json文件，放在WebRoot目录下了；
        loadMsg表示加载数据过程中显示的信息；
        queryParams表示传给后台的参数，在这里用不到，因为我们目前还没有和后台关联上，只是显示一个json文件，后面会用到；
        fitColums设置为true后表示水平自动展开，自适应网格的宽度，如此设置，水平方向就不会有滚动条了，也不用设置宽度了；
        width是宽度，如果数据过长显示不下，水平方向就会出现滚动条；
        striped设置为true后表示显示斑马线，这是一个显示样式，试一下便知；
        nowrap设置为true后表示当数据多的时候不换行，否则某一行数据多的时候会换行，会比较难看；
        pagination设置为true后表示开启分页功能；
        singleSelect设置为true时，只允许勾选单行，全选功能失效，主要用于最前面一列的复选框；
        frozenColums是为了设置冻结列，在frozenColums中设置的列，不会改变大小。里面如果设置了{field:’checkbox’,checkbox:true},表示这是个复选框列，给用户勾选用的，如果设置了上面的singleSelect，那么只能选择一项，不能全选；
        rowStyler是设置所有行的样式的，两个参数为行索引和行，上面设置的是偶数行是白色，奇数行是黄色。
        等等……还有其他DataGrid控件的属性，可以参考EasyUI的技术文档，在这里就不一一解说了。
4. DataGrid数据显示的效果
        好了，完成了query.jsp后，我们重启tomcat，然后进入到后台，点击左侧菜单栏的类别管理，就会在右边出现一个类别管理的选项卡，然后就会显示我们指定的json数据，这个Jason数据是我们自己放在WebRoot目录下的，后面我们将会把json和struts整合，动态的获取从后台传过来的json数据。

       相关阅读：http://blog.csdn.net/column/details/str2hiberspring.html
        整个项目的源码下载地址：http://blog.csdn.NET/eson_15/article/details/51479994
_____________________________________________________________________________________________________________________________________________________
—–乐于分享，共同进步！
—–更多文章请看：http://blog.csdn.net/eson_15

       document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
    <div id="digg" articleid="51322262">        <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">             <dt>顶</dt>            <dd>10</dd>        </dl>        <dl id="btnBury" class="digg digg_enable" onclick="btnburya();">              <dt>踩</dt>            <dd>0</dd>                       </dl>    </div> <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div><div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&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('6228418','eson_15','foot','51322262');">●  框架技术<em>（45）</em></span>                            </label>                            <label class="">                                <span style="cursor:pointer" onclick="GetCategoryArticles('6229500','eson_15','foot','51322262');">------【EasyUI】<em>（4）</em></span>                            </label>                            <label class="">                                <span style="cursor:pointer" onclick="GetCategoryArticles('6228419','eson_15','foot','51322262');">●  项目实战<em>（29）</em></span>                            </label>                            <label class="">                                <span style="cursor:pointer" onclick="GetCategoryArticles('6214186','eson_15','foot','51322262');">------【SSH网上商城】<em>（29）</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" target="_blank">http://blog.csdn.net</a>                    <ul class="similar_list fl"><li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/52270046" id="foot_aritcle_52270046undefined4681906714567312" target="_blank" title="【MyBatis】MyBatis分页插件PageHelper的使用">【MyBatis】MyBatis分页插件PageHelper的使用</a><span>2016-08-21</span><label><i>阅读</i><b>4952</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51743514" id="foot_aritcle_51743514undefined6642660983203901" target="_blank" title="【SpringMVC学习10】SpringMVC对RESTfull的支持">【SpringMVC学习10】SpringMVC对RESTfull的支持</a><span>2016-06-26</span><label><i>阅读</i><b>6414</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51736495" id="foot_aritcle_51736495undefined8260677290670122" target="_blank" title="【SpringMVC学习08】SpringMVC中实现文件上传">【SpringMVC学习08】SpringMVC中实现文件上传</a><span>2016-06-24</span><label><i>阅读</i><b>6064</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51725470" id="foot_aritcle_51725470undefined7873993021133228" target="_blank" title="【SpringMVC学习06】SpringMVC中的数据校验">【SpringMVC学习06】SpringMVC中的数据校验</a><span>2016-06-22</span><label><i>阅读</i><b>11339</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51700519" id="foot_aritcle_51700519undefined4059135774587539" target="_blank" title="【SpringMVC学习04】Spring、MyBatis和SpringMVC的整合">【SpringMVC学习04】Spring、MyBatis和SpringMVC的整合</a><span>2016-06-20</span><label><i>阅读</i><b>10295</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51694684" id="foot_aritcle_51694684undefined3689524650805607" target="_blank" title="【MyBatis学习15】MyBatis的逆向工程生成代码">【MyBatis学习15】MyBatis的逆向工程生成代码</a><span>2016-06-17</span><label><i>阅读</i><b>6096</b></label></li> </ul>                    <ul class="similar_list fr"><li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51749880" id="foot_aritcle_51749880undefined08755750446243504" target="_blank" title="【SpringMVC学习11】SpringMVC中的拦截器">【SpringMVC学习11】SpringMVC中的拦截器</a><span>2016-06-28</span><label><i>阅读</i><b>6498</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51742864" id="foot_aritcle_51742864undefined6268514462571333" target="_blank" title="【SpringMVC学习09】SpringMVC与前台的json数据交互">【SpringMVC学习09】SpringMVC与前台的json数据交互</a><span>2016-06-25</span><label><i>阅读</i><b>7613</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51731567" id="foot_aritcle_51731567undefined6559107814361611" target="_blank" title="【SpringMVC学习07】SpringMVC中的统一异常处理">【SpringMVC学习07】SpringMVC中的统一异常处理</a><span>2016-06-23</span><label><i>阅读</i><b>13709</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51718633" id="foot_aritcle_51718633undefined9477425429741433" target="_blank" title="【SpringMVC学习05】SpringMVC中的参数绑定总结">【SpringMVC学习05】SpringMVC中的参数绑定总结</a><span>2016-06-21</span><label><i>阅读</i><b>10912</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/eson_15/article/details/51699103" id="foot_aritcle_51699103undefined17827722765106224" target="_blank" title="【SpringMVC学习03】SpringMVC中注解和非注解方式下的映射器和适配器总结">【SpringMVC学习03】SpringMVC中注解和非注解方式下的映射器和适配器总结</a><span>2016-06-19</span><label><i>阅读</i><b>7781</b></label></li> </ul>                <a href="http://blog.csdn.net/eson_15/article/category/6228418" class="MoreArticle">更多文章</a></div>            </div>        </div>    <script type="text/javascript">    $(function () {        GetCategoryArticles('6228418', 'eson_15','foot','51322262');    });</script>
                                                     
        0        0           
	
				
		









 推理软件
    		推理软件



原创粉丝点击



		

热门IT博客


开淘宝店需要什么费用开淘宝店需要什么费用




java自行车 知乎java自行车 知乎




广州大数据培训




长歌是大腿的淘宝店铺




java重载返回值教程




淘宝直通车浏览怎么做




java经典企业笔试题




淘宝贷款逾期会怎么样




网络21是什么




李光耀的书 知乎




nginx 图片验证




淘宝开店押金怎么退




java获取自身对象




三公子 知乎




软件开发工程量清单




网络老虎机的累计奖池




新世界 知乎




视频编辑软件安卓版




百度seo软件




如何恢复桌面数据



		

热门问题
    老师的惩罚
    人脸识别
    我在镇武司摸鱼那些年
    重生之率土为王
    我在大康的咸鱼生活
    盘龙之生命进化
    天生仙种
    凡人之先天五行
    春回大明朝
    姑娘不必设防，我是瞎子
    宿迁沭阳
    宿迁泗洪
    宿迁泗阳
    宿迁干部
    宿迁市
    宿迁人才
    江苏宿迁
    宿迁学院
    宿迁零距离
    宿迁房价
    宿迁论坛
    宿迁火车站
    宿迁哪个省
    宿迁高铁
    宿迁12345
    网上宿迁
    宿迁邮编
    宿迁城市吧
    宿迁站
    宿迁二手房
    宿迁特产
    宿迁房产
    宿迁景点
    宿迁招聘
    宿迁高铁站
    宿迁欢乐岛
    宿迁区号
    徐州到宿迁
    宿迁哪里
    宿迁掼蛋
    宿迁在哪
    宿迁到盐城
    宿迁市在哪
    宿迁吧
    宿迁西楚网
    宿迁是哪里
    宿迁怎么样
    宿迁在哪里
    宿迁美食
    宿迁论坛网
    宿迁中学


	










程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里