白底图制作_修图软件哪个比较好用_网页抠图_p图_公众号图片制作
当前位置:建站首页 > 新闻资讯 > 最新签约 >

SSH电子商务新项目实战演练之六:根据DataGrid的数

发表日期:2021-02-14 04:37文章编辑:jianzhan浏览次数: 标签:    

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)

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

返回列表
相关新闻

广州凡科互联网科技股份有限公司招聘电子商务

招聘人数:30职位信息1、负责电商专业学生的教学工作;2、能够承担电商基础、电商运营管理...

日期:2021-01-09 浏览次数:88

华为云微验证 云上构建电子商务网站

了解我国的买东西节“双11”,也了解淘宝,京东等电子商务网络平台,你了解吗?实际上电子...

日期:2020-10-16 浏览次数:146

汇总:今年合适电子商务建造站的10个完全免费

今年10个最佳的完全免费WordPress主题风格...

日期:2020-08-23 浏览次数:156