天天看点
返回

ExtJS4.2学习(五)表格渲染与复选框

 前几章做的例子，你有没有发现太单调啦？呵呵，相信聪明的你一定知道，光显示文字，那这功能太弱爆了吧，现在我们来看下ExtJs给我们带来的表格渲染和复选框等功能。

有的人问我了，为什么你们的默认表格样式和我做的效果图不一样呢，呵呵，那是因为我引入了ExtJS4.2的其他样式，并非默认的样式，换样式很简单，只需要更改Link引入的文件就可以很轻松的换各种样式，哇~是不是很给力啊，你敢信？

好了，不扯远了，下面看这章要做的效果图：

怎么样，是不是很丰富？

先来说文字的颜色怎么变吧，详细你学过HTML+CSS一定知道怎么变，同理，在EXTJS里只需要用到renderer即可轻松做成HTML的效果，看下面的代码：

JavaScript Code复制内容到剪贴板

  1. {header:'状态',dataIndex:'status',width:80,renderer:function(value){  
  2.             if(value=='可用'){  
  3.                 return "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";  
  4.             } else {  
  5.                 return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";  
  6.             }  
  7.         }}  

只需要在columns定义的时候将列的返回值更改为HTML即可。

名称列的颜色值变色也是同样的方法，这里为了方便，我就自定义了一个方法，在renderer里引入即可，如下代码：

  1. //改变列颜色自定义renderner方法  
  2. function renderMotif(data, cell, record, rowIndex, columnIndex, store){  
  3.     var value = record.get('name');  
  4.     cell.style="background-color:"+value;  
  5.     return data;  
  6. }  

列中引用：

  1. {header:'名称',dataIndex:'name',width:80, renderer:renderMotif},  

那上面的查询详细信息是什么呢？看下图：

弹出这个单元格里的详细信息，主要代码如下：

  1. //自定义renderner方法  
  2. function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){  
  3.     var str="<input type='button' value='查询详细信息' onclick='alert(""+  
  4.         "这个单元格的值是："+value +"n"+  
  5.         "这个单元格的配置是:{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+  
  6.         "这个单元格对应行的record是："+record +",一行的数据都在里面n"+  
  7.         "这是第"+rowIndex+"行n"+  
  8.         "这是第"+columnIndex +"列n"+  
  9.         "这个表格对应的Ext.data.Store在这里:"+ store +",随便用吧。"+"")' />";  
  10.     return str;  

列定义：

  1. {header:'描述',dataIndex:'descn',width:112,renderer:renderDescn}  

我们可以在渲染函数里得到多个参数，如下所示：

  1. value：将要显示到单元格里的值；
  2. cellmeta：单元格的相关属性，主要有id和CSS；
  3. record：这行的数据对象，如果需要获取其他列的值，可以通过record.data["id"]的方式得到，这个属性很重要，我们经常会用到；
  4. rowIndex：行号，这里的行号指的是当前页中所有记录的顺序；
  5. columnIndex：当前列的列号；
  6. store：构造表格时传递的ds。表格里的所有数据都可以通过store获得。

自动显示行号和复选框都是renderer的延伸。先来说自动显示行号，在列模型columns中加入RowNumber对象即可，如下代码：

  1. new Ext.grid.RowNumberer(), //自动显示行号  

同样，复选框还是要修改columns模型加入SelectionModel对象：

  1. //加入复选框组件，{checkOnly:true}会解决在操作中不慎选中了某一行就会变成选中一行的情况，只允许用户通过复选框执行选中  
  2.     var sm = new Ext.selection.CheckboxModel({checkOnly:true});  
  3.     //创建表格  
  4.     var grid = new Ext.grid.GridPanel({  
  5.         renderTo:'grid', //渲染位置  
  6.         width:550,  
  7.         height:250,  
  8.         selModel:sm,  
  9.         store:store, //转换后的数据  
  10.         columns:columns, //显示列  
  11.         stripeRows:true, //斑马线效果  
  12.         //enableColumnMove: false, //禁止拖放列  
  13.         //enableColumnResize: false, //禁止改变列宽度  
  14.         loadMask:true //显示遮罩和提示功能,即加载Loading……  
  15.         //forceFit:true //自动填满表格  
  16.     });  

注：{checkOnly:true}会解决在操作中不慎选中了某一行就会变成选中一行的情况，只允许用户通过复选框执行选中。

下面给出完整示例代码，代码中还说到了Ext.grid.GridView，大家注意看下。

XML/HTML Code复制内容到剪贴板

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6. <title>Hello Extjs4.2</title>  
  7. <link href="../ExtJS4.2/resources/css/ext-all-neptune.css" rel="stylesheet">  
  8. <script src="../ExtJS4.2/ext-all.js"></script>  
  9. <script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>  
  10. <script type="text/javascript">  
  11. //表格数据最起码有列、数据、转换原始数据这3项  
  12. Ext.onReady(function(){  
  13.     //定义列  
  14.     var columns = [  
  15.         {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序  
  16.         {header:'名称',dataIndex:'name',width:80},  
  17.         {header:'描述',dataIndex:'descn',width:112},  
  18.         {header:'状态',dataIndex:'status',width:80,renderer:function(value){  
  25.       ];  
  26.     //定义数据  
  27.     var data =[  
  28.         ['1','小王','描述01','可用'],  
  29.         ['2','李四','描述02','禁用'],  
  30.         ['3','张三','描述03','可用'],  
  31.         ['4',' 束洋洋 ',' 思考者日记网 ','可用'],  
  32.         ['5','高飞','描述05','禁用']  
  33.     ];  
  34.     //转换原始数据为EXT可以显示的数据  
  35.     var store = new Ext.data.ArrayStore({  
  36.         data:data,  
  37.         fields:[  
  38.            {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置  
  39.            {name:'name'},  
  40.            {name:'descn'},  
  41.            {name:'status'}  
  42.         ]  
  44.     //加载数据  
  45.     store.load();  
  46.     //表格控件默认使用RowModel，按住shift或者ctrl键单击鼠标就可以选择多行，如果希望只选择一行，可以使用singleSelect:true  
  47.     //我发现我在写的时候，不用的情况下，我试了发现默认就是不可多选的  
  48.     //var sm = new Ext.grid.RowModel({singleSelect:true});  
  52.         width:450,  
  53.         height:150,  
  54.         //selModel:sm,  
  60.         loadMask:true, //显示遮罩和提示功能,即加载Loading……  
  62.         viewConfig:{  
  63.             columnsText:'显示的列',  
  64.             scrollOffset:30, //表格右侧为滚动条预留的宽度,默认为20  
  65.             sortAscText:'正序',  
  66.             sortDescText:'倒序',  
  67.             forceFit:true //表格会自动延展每列的长度，使内容填满整个表格  
  68.         }  
  70. });  
  71. </script>  
  72. </head>  
  73. <body>  
  74. <h1>我的ExtJS4.2学习之路</h1>  
  75. <hr />  
  76. 作者：
  77. 开始日期：2013年11月10日 22:34:26  
  78. <h2>深入浅出ExtJS之表格视图--Ext.grid.GridView</h2>  
  79. <div id="grid"></div>  
  80. </body>  
  81. </html>  
javascript 前端开发 java 数据格式 xml extjs学习表格 extjs表格 javascript前端开发css javascript前端开发head extjs表格后台
上一篇: Struts2常用标签总结
下一篇: ExtJs读取servlet传送数据

继续阅读