EasyUI中DataGrid以报表方式展现数据信息，并出示了丰富多彩的挑选、排列、排序和编写数据信息的作用适用。DataGrid的设计方案用以减少开发设计時间，而且使开发设计工作人员不用具有特殊的专业知识。它是轻量的且作用丰富多彩。模块格合拼、两列题目、冻洁列和页脚仅仅在其中的一小一部分作用。

1. 回望一下第四节內容

在第四节中，大家应用EasyUI构建好啦左边莱单栏，而且根据点一下莱单选择项在右侧弹出来相匹配的选择项卡。这节大家来应用DataGrid把右侧的选择项卡一部分搞好。首先看一下第四节中最终的aindex.jsp文档（也可参照第四节中的內容）：

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文档里的数据信息。以下：

JavaScript编码 { 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网页页面：

XML/HTML编码 %@ page language= java  import= java.util.*  pageEncoding= UTF-8 %   !DOCTYPE HTML PUBLIC  -//W3C//DTD HTML 4.01 Transitional//EN   html     head     %@ include file= /f  %     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){  &( 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特性   //( 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文本文档。列特性中较为关键的也较为常见的2个特性是formatter和styler，各自是用于文件格式化当今列的值和设定模块格款式的，大家关键看来一下这2个特性：

大家实际来剖析一下上边query.jsp中的columns特性中，怎样应用这2个列特性的：

JavaScript编码 {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特性   //( 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是设定全部行的款式的，2个主要参数为行数据库索引和行，上边设定的是偶数行是乳白色，单数行是淡黄色。

这些 也有别的DataGrid控制的特性，能够参照EasyUI的技术性文本文档，在这里里也不逐一讲解了。

4. DataGrid数据信息显示信息的实际效果

好啦，进行了query.jsp后，大家重新启动tomcat，随后进到到后台管理，点一下左边莱单栏的类型管理方法，便会在右侧出現一个类型管理方法的选择项卡，随后便会显示信息大家特定的json数据信息，这一Jason数据信息就是我们自身放到WebRoot文件目录下的，后边大家可能把json和struts融合，动态性的获得从后台管理传回来的json数据信息。

SSH电子商务新项目实战演练之五：进行数据信息库的联级查寻和分页查询 (:38)

SSH电子商务新项目实战演练之四：EasyUI莱单的完成 (:59)

SSH电子商务新项目实战演练之三：应用EasyUI构建后台管理网页页面架构 (:9)

SSH电子商务新项目实战演练之二：基本删改查改、Service和Action的提取及其应用注释更换xml (:14)

SSH电子商务新项目实战演练之一：融合Struts2、Hibernate和Spring (:3)

Hibernate下openSession和getCurrentSession获得的联接与事务管理的关联 (:56)

深层次浅出SINGLETON单例设计方案方式 (:50)

怎样处理Chrome中网页页面的运行内存泄漏难题 (:15)

20个十分有效的JAVA程序片断 (:14)

Hibernate下知名的延迟时间载入难题和1:N难题 (:38)

网页链接(选填)

认证(*)

文章正文(*)(留言板留言最多篇幅:1000)

记牢我,下一次回应时无需再次键入本人信息内容