EasyUI中DataGrid以表格时局务署展示数据,并提供了充裕的选择、排序、分组和编辑数据的功能支持。DataGrid的陈设用于缩短开发时间,而且使开发人员不需要具备特定的知识。它是轻量级的且功能充裕。单位格吞并、众列标题、冻结列和页脚只是其中的一小限制功能。

  1. 追忆一下第4节实质

  正正在第4节中,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站运用EasyUI搭建好了左侧菜单栏,而且通过点击菜单选项正正在右边弹出对应的选项卡。这节银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站来运用DataGrid把右边的选项卡限制做好。先看一下第4节中着末的aindex.jsp文件(也可参睹第4节中的实质):

  2. 创建DataGrid控件的几种格事务署

   DataGrid显现数据是json格式的,以是银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站起首要把从后台获取到的数据打包成Jason格式,然后传到前台来让DataGrid来显现,这一节银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站先不从后台获取数据,先自己准备一个.json文件,里面有ison格式的数据,然后银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站来让DataGird显现,先把显现功能做好,再请求后台数据。

  银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站先从EasyUI的参考文档中看一下DataGrid显现的格式是什么样的,如下图所示:

   银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站沿着参考文档往下看,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站发现DataGrid空间是通过<table>来创建的,有三种创建格事务署:

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

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

  第三种:运用Javascript去创建DataGrid控件。

  银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站给与第三种,用js去创建DataGrid控件,起首银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站得先准备一个存储了json格式数据的文件,正正在WebRoot/jquery-easyui-1.3.5/demo/datagrid/下面有几个json文件,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站选择一个datagrid_data1.json,拷贝到WebRoot目录下,修改一下参数,等会银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站要来显现这个json文件里的数据。如下:

JavaScript代码
  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. ]}    

  银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站可以看到,json数据格式是:"key1": value1, "key2":value2。每个value里面又可以是数组,数组中保存新的Jason数据。

  有了json文件,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站接下来就可以陈设DataGrid控件了,整体DataGrid都是正正在query.jsp中陈设的,由于要显现的实质就是query.jsp中的实质。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站来看看query.jsp页面:

XML/HTML代码
  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.         $(function(){    
  8.             $('#dg').datagrid({       
  9.                 //请求数据的url地址,后面会改成请求银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站自己的url    
  10.                 url:'datagrid_data.json',    
  11.                 loadMsg:'Loading......',    
  12.                 queryParams:{type:''},//参数    
  13.                 //width:300,    
  14.                 fitColumns:true,//水平自动睁开,如果设置此属性,则不会有水平滚动条,演示冻结列时,该参数不要设置    
  15.                 //显现斑马线    
  16.                 striped:true,    
  17.                 //当数据众的时候不换行    
  18.                 nowrap:true,    
  19.                 singleSelect:true, //如果为真,只允许单行显现,全显功能失效    
  20.                 //设置分页    
  21.                 pagination:true,    
  22.                 rowStyler: function(index,row){    
  23.                     console.info("index" + index + "," + row)    
  24.                     if(index % 2 == 0) {    
  25.                         return 'background-color:#fff;';    
  26.                     } else {    
  27.                         return 'background-color:#ff0;';    
  28.                     }    
  29.                         
  30.                 },    
  31.                 //同列属性,可是这些列将会冻结正正在左侧,大小不会改变,当宽度大于250时,会显现滚动条,可是冻结的列不正正在滚动条内    
  32.                 frozenColumns:[[    
  33.                     {field:'checkbox',checkbox:true},    
  34.                     {field:'code',title:'编号',width:200}                     
  35.                 ]],    
  36.                 //装备datagrid的列字段     
  37.                 //field:列字段的名称,与json的key捆扎    
  38.                 //title:列标题,是显现给人看的    
  39.                 columns:[[                         
  40.                     {field:'productname',title:'种别名称',width:100,    
  41.                         //用来格式化当前列的值,返回的是最终的数据    
  42.                         formatter: function(value,row,index){    
  43.                         return "<span title=" + value + ">" + value + "</span>";    
  44.                     }    
  45.                 },        
  46.                     {field:'price',title:'价格',width:100,    
  47.                     styler: function(value,row,index){    
  48.                         //设置当前单位格的样式,返回的字符串直接交给 style属性    
  49.                         //console.info("val:" + value + ",row:" + row + ",index:" + index)    
  50.                         if (value < 20){    
  51.                             return 'color:red;';    
  52.                         }    
  53.                     }       
  54.                     }    
  55.                 ]]        
  56.             });     
  57.         });    
  58.     </script>    
  59.   </head>    
  60.       
  61.   <body>    
  62.     <table id="dg"></table>    
  63.   </body>    
  64. </html>    

  3. DataGrid控件的属性

   银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站可以看到,运用js去创建DataGrid控件的话,只要一个<table>标签即可,浸要都是正正在js中完成。DataGrid的控件很远大,这里银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站浸要做一下根蒂的显现,更众其他的功能可以参照EasyUI的开发文档。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站现正正在针对上面的query.jsp文件做一下分解:

  起首DataGrid控件有两种属性:一个是DataGrid属性,还有一个是列属性。顾名思义,DataGrid属性是给整体DataGrid控件添加的属性,而列属性是针对某一列的。每中属性有很众,这里只做了一些根蒂的常用的属性。

   DataGrid属性里最浸要的是columns属性,它是一个数组,可以创建众列,睹下面的截图:

  银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站来看下columns属性中有哪些细节:

  列属性中,field表示字段名称,对应与json数据的key,然后title是要显现给用户看的标题,睹query.jsp文件中,还有其他一些根蒂属性可以参照EasyUI文档。列属性中比拟浸要的也比拟常用的两个属性是formatter和styler,分别是用来格式化当前列的值和设置单位格样式的,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站浸要来看一下这两个属性:

  银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站举座来分解一下上面query.jsp中的columns属性中,怎样运用这两个列属性的:

JavaScript代码
  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. }    

  然后银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站再看看DataGrid控件的一些属性:

   url表示要显现的数据来源,这里设置成datagrid_data.json表示数据来源是这个json文件,放正正在WebRoot目录下了;

  loadMsg表示加载数据历程中显现的信歇;

  queryParams表示传给后台的参数,正正在这里用不到,由于银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站目前还没有和后台联系上,只是显现一个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后,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站浸启tomcat,然掉队入到后台,点击左侧菜单栏的种别牵制,就会正正在右边显现一个种别牵制的选项卡,然后就会显现银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站指定的json数据,这个Jason数据是银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站自己放正正在WebRoot目录下的,后面银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站将会把json和struts整合,动态的获取从后台传过来的json数据。

除非特别注明,鸡啄米文章均为原创
转载请标明本文地址:http://www.sygjbus.cn/software/765.html
2017年9月19日
作家:鸡啄米 分类:软件开发 浏览: 评论:3