Ext JS 深入浅出---案例 表格 (Grid)
2018-06-28 14:31
113 查看
注意:所需要的ExtJs请在:点击打开链接 处下载,将文件中的Ext 文件拷贝到项目中即可。
1、制作简单表格
在这里,我们创建一个 3 列的表格,第一列试编号(id),第二列是名称(name),第三列是描述(descn),在VS中新建一个 PanelGrid.js 文件,实现代码如下所示:
var column = [ { header: '编号', dataIndex: 'id'}, { header: '名称', dataIndex: 'name' { header: '描述', dataIndex: 'descn'}, ];表格的列信息包含首部显示文本(header)、列对应记录集字段(dataIndex)、表格列是否排序(sortable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等,此处只是用了 header 与 dataIndex,其他属性的将在随后逐渐深入进行介绍。
有了表格的结构后就需要对表格进行数据填充,数据结构设置代码如下:
var data = [ ['1', 'name1','descn1'], ['2', 'name2','descn2'], ['3', 'name3','descn3'], ['4', 'name4','descn4'] ];有了数据结构,就可以实现表的显示设置,代码如下:[code]var store = new Ext.data.ArrayStore({ data: data, fields: [ { name: 'id' }, { name: 'name' }, { name: 'descn' }] }); store.load(); 其中, var store=... 为了创建数据的存储对象,表格的必须配置属性。那么表格将会被渲染到页面的什么地方呢?所以,这里需要个的<div id ="grid"></div>与之对应,div 的 id 与 renderTo 属性对应,如下所示:
var grid = new Ext.grid.GridPanel( { autoHeight: true, width: 382, renderTo: 'grid', loadMask: true,//加载缓冲图标 //forceFit:true,//自动列宽,可以不用在设置clumn的宽度 store: store, columns: column, });整个 PanelGrid.js 如下所示:
var column = [ { header: '编号', dataIndex: 'id'}, { header: '名称', dataIndex: 'name' { header: '描述', dataIndex: 'descn'}, ] var data = [
['1', 'name1','descn1'], ['2', 'name2','descn2'], ['3', 'name3','descn3'], ['4', 'name4','descn4'] ];var store = new Ext.data.ArrayStore({ data: data, fields: [ { name: 'id' }, { name: 'name' }, { name: 'descn' }]});store.load();
var grid = new Ext.grid.GridPanel(
{ autoHeight: true, width: 382, renderTo: 'grid', loadMask: true,//加载缓冲图标 //forceFit:true,//自动列宽,可以不用在设置clumn的宽度 store: store, columns: column, });Html 端代码如下所示:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" /> <title></title> //引入Ext文件下的三个文件<link href="Ext/resources/css/ext-all.css" rel="stylesheet" /> <script src="Ext/ext-all.js"></script> <script src="Ext/ext-lang-zh_CN.js"></script></head><body> <div id="grid" style="width:600px;background-color:aqua"> </div> <script src="scripts/PanelGrid.js"></script></body></html>效果如下所示:
2、自定义表格列宽、列渲染效果、列排序、日期数据格式显示等
其中列渲染效果:我们添加性别,男红色,女绿色显示
整个PanelGrid.js 如下所示:
//width:60 设置列宽,不设置默认100;sortable:true 设置排序,默认功能 var column = [ { header: '编号', dataIndex: 'id', width: 60 }, { header: '名称', dataIndex: 'name', width: 60, sortable: false }, { header: '性别', dataIndex: 'sex', width: 60, sortable: false, renderer: renderSex }, { header: '描述', dataIndex: 'descn', width: 100, sortable: false }, { header: '日期', dataIndex: 'date', width: 100, renderer: Ext.util.Format.dateRenderer('Y-m-d') } ]; function renderSex(value) { if (value == 'male') { return "<span style='color:red;font-weigth:bold;'>红男</span><img src='Ext/resources/themes/images/humanhead/boy.png'/>"; } else { return "<span style='color:green;font-weigth:bold;'>绿女</span>"; } } var data = [ ['1', 'name1', 'male', 'descn1', '1991-07-05T02:58:04'], ['2', 'name2', 'female', 'descn2', '1991-07-05T02:58:04'], ['3', 'name3', 'male', 'descn3', '1991-07-05T02:58:04'], ['4', 'name4', 'female', 'descn4', '1991-07-05T02:58:04'] ]; var store = new Ext.data.ArrayStore({ data: data, fields: [{ name: 'id' }, { name: 'name' }, { name: 'sex' }, { name: 'descn' }, { name: 'date', type: 'date', dataFormat: 'Y-m-dTH:i:s' }] }); store.load(); var grid = new Ext.grid.GridPanel( { autoHeight: true, width: 382, renderTo: 'grid', loadMask: true,//加载缓冲图标 //forceFit:true,//自动列宽,可以不用在设置clumn的宽度 store: store, columns: column, });运行效果如下所示:
3、动态给表格的行和列设置颜色
var column = [ { header: '编号', dataIndex: 'id', width: 60 }, { header: '名称', dataIndex: 'name', width: 60, sortable: false }, { header: '性别', dataIndex: 'sex', width: 60, sortable: false, renderer: renderSex }, { header: '描述', dataIndex: 'descn', width: 100, sortable: false }, { header: '日期', dataIndex: 'date', width: 100, renderer: Ext.util.Format.dateRenderer('Y-m-d') }, { header: '颜色', dataIndex: 'color', renderer: renderMotif } ]; function renderSex(value) { if (value == 'male') { return "<span style='color:red;font-weigth:bold;'>红男</span><img src='Ext/resources/themes/images/humanhead/boy.png'/>"; } else { return "<span style='color:green;font-weigth:bold;'>绿女</span>"; } } var data = [ ['1', 'name1', 'male', 'descn1', '1991-07-05T02:58:04', '#bf8bfb'], ['2', 'name2', 'female', 'descn2', '1991-07-05T02:58:04', '#ffffff'], ['3', 'name3', 'male', 'descn3', '1991-07-05T02:58:04', '#4cff00'], ['4', 'name4', 'female', 'descn4', '1991-07-05T02:58:04', '#00ffff'] ]; var store = new Ext.data.ArrayStore({ data: data, fields: [{ name: 'id' }, { name: 'name' }, { name: 'sex' }, { name: 'descn' }, { name: 'date', type: 'date', dataFormat: 'Y-m-dTH:i:s' }, {name:'color'}] }); store.load(); var grid = new Ext.grid.GridPanel( { autoHeight: true, width: 482, height:200, renderTo: 'grid', loadMask: true,//加载缓冲图标 //forceFit:true,//自动列宽,可以不用在设置clumn的宽度 store: store, columns: column, }); function renderMotif(data,cell,record,rowIndex,columnindex,store) { var value = record.get('color') cell.style = "background-color:" + value; return data; }效果如下:
3、自动显示行号和复选框
实际上,行号和复选框都是renderer的延伸。修改列模型 column 加入 RowNumberer对象,如下代码所示:
var column = [ new Ext.grid.RowNumberer(),//显示行号 { header: '编号', dataIndex: 'id', width: 60 }, { header: '名称', dataIndex: 'name', width: 60, sortable: false }, { header: '性别', dataIndex: 'sex', width: 60, sortable: false, renderer: renderSex }, { header: '描述', dataIndex: 'descn', width: 100, sortable: false }, { header: '日期', dataIndex: 'date', width: 100, renderer: Ext.util.Format.dateRenderer('Y-m-d') }, { header: '颜色', dataIndex: 'color', renderer: renderMotif } ];运行效果如下所示:
关于行号自动计算,如果删除表格中的一行,行号就不连续了,需要重新刷新表格,让表格重新计算。在 HTML 里添加一个按钮,id设置为 remove,编辑代码如下:
<div id="grid" style="width:600px;background-color:aqua"> <input id="remove" type="button" value="删除" /> </div>PanelGrid.js 中添加代码如下:
Ext.get('remove').on('click', function () { store.remove(store.getAt(1)); });运行后点击按钮效果如下:
可以看出点击删除第二行数据后行号不连续,修改 js 中代码如下:
Ext.get('remove').on('click', function () { store.remove(store.getAt(1)); grid.view.refresh(); });运行如下:(这里有个坑,其实表单界面没有刷新,需要手动点击编号才刷新行号,欢迎大家提供解决方法)
为了在表格中添加复选框功能,我们使用 Checkboxmodel ,他会在每行数据前添加一个复选框。这里我们不需要修改 Column,SelectionModel 对象就是 selModel。首先,我们创建一个 sm ,就是 Checkboxmodel(),代码如下:
var sm = new Ext.selection.CheckboxModel(); var grid = new Ext.grid.GridPanel( { autoHeight: true, width: 482, height:200, renderTo: 'grid', loadMask: true,//加载缓冲图标 //forceFit:true,//自动列宽,可以不用在设置clumn的宽度 store: store, columns: column, pageX: 25, selModel:sm, });运行效果如下:
虽然 CheckboxModel 允许我们选中多行,但如果操作过程,我们不小心点击了其他列,也会造成取消勾选,如何做到用户只能通过复选框一列进行选取操作,修改 sm 定义如下即可:
var sm = new Ext.selection.CheckboxModel({checkOnly:true});这时候,只能够点击复选框才可以选择。
4、数据获取
到此,大家最关心的事情就是如何获取到表格中的数据,当我们选则一行,怎么的到行的数据,在 js 中添加代码如下:
grid.on('itemclick', function () { var selected = grid.getSelectionModel().selected; for (var i = 0; i < selected.getCount(); i++) { var record = selected.get(i); Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn")); } });运行后,点击复选框,会弹出提示选中单元行的信息,如下图所示:
相关文章推荐
- Ext Js 3.x中表格Grid的学习和实例
- 【翻译】mzPivotGrid: Ext JS的数据透视表格
- Struts2与Ext JS数据表格GridPanel之间的数据传递
- 【翻译】mzPivotGrid: Ext JS的数据透视表格
- 【翻译】mzPivotGrid: Ext JS的数据透视表格
- ext js 4.0 grid表格根据列值的不同给行设置不同的背景颜色
- 【翻译】mzPivotGrid: Ext JS的数据透视表格
- struts2与ext js数据表格gridpanel之间的数据传递
- [Ext JS 6 By Example 翻译] 第5章 - 表格组件(grid)
- grid中显示blobImage上传的图片 通过本案例,我们实现blobImage上传的图片在grid表格中的显示。 grid的cellRender方法渲染单元格显示图片,例: 1 2 3 4 5
- [Ext JS 6 By Example 翻译] 第5章 - 表格组件(grid)
- Scala 深入浅出实战经典 第93讲:Akka第一个案例动手实战开发消息实体类
- Ext Js 表格(五)
- [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
- jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)
- 阿里云AliYun表格存储(Table Store)相关案例
- dhtmlxgrid数据表格在ie9,ie10下无法隐藏列
- 修复bug,增加BasePath参数 - dotnetFlexGrid 1.21beta更新 争取做ASP.NET中最好的Ajax开源表格控件
- dotNetGrid 演示站点(new)-争取做ASP.NET中最好的Ajax开源表格控件
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案