Extjs-表格 Ext.grid.GridPanel

2024-02-12 04:10
文章标签 表格 frontend extjs grid ext gridpanel

本文主要是介绍Extjs-表格 Ext.grid.GridPanel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目中的grid

自动显示行号

rn = new Ext.grid.RowNumberer();

复选框

var sm = new Ext.grid.CheckboxSelectionModel({//如果只允许用户通过复选框执行选中操作放开下面配置项//handleMouseDown : Ext.emptyFn//可复用的空函数//true表示只允许选择单行//singleSelect : true
});

列模型

var cm = new Ext.grid.ColumnModel([rn,sm,  {header:'编号',dataIndex:'id',align :'center',sortable : true,renderer : function(v){return "<div align='center'>"+v?v:""+"</div>"}},{header:'查看详细',dataIndex:'id',align :'center',renderer : function(v){return "<div align=\"center\"><input type=\"button\" value=\".....\" οnclick=\"alert(1)\"></div>"}}
]);
分页工具
需要导入ProgressBarPager.js 
var bbar = new Ext.PagingToolbar({pageSize : limit,store : store,displayInfo : true,displayMsg : '显示第{0}条到{1}条记录，一共{2}条',emptyMsg : '没有记录',prevText:'上一页',nextText:'下一页',refreshText:'刷新',lastText:'最后页',firstText:'第一页',beforePageText:'当前页',afterPageText:'共{0}页',plugins: [new Ext.ux.ProgressBarPager()]
});
表格显示内容 

var grid = new Ext.grid.GridPanel({  region: 'center',store : store,  stripeRows : true, sm : sm,  cm : cm,bbar : bbar,tbar : [{text: '增加',pressed:true,handler: function(){}  },'-',{text: '删除',pressed:true,handler: function(){}  },'-',{text: '修改',pressed:true,handler: function(){}  }],viewConfig : new Ext.grid.GridView({  forceFit : true  }), listeners : {  'beforerender' : function(){  store.load(); }  }  
});

项目中使用new Ext.grid.RowExpander 需要导入ux/RowExpander.js

var expander = new Ext.grid.RowExpander({ tpl : new Ext.Template('<div style="border:1px #CCCCCC solid"><br>'+'<table background = "#CCCCCC">' +'<tr>' +'<td width="23%">                      用户名称:  {YH_MC}</td>' +'<td width="23%"></td>' +'<td width="23%"></td>' +'<td rowspan="4" width="5%">照片:</td>' +'<td rowspan="4" width="26%">'+'<img src="<%=rootpath%>/image/lwc.jpg" style="height:177;width:150"/>'+'</td>' +'</tr>' +	 '<tr>' +'<td>                      学历:  {XL}</td>' +'<td>学校:  {XX}</td>' +'</tr>' +'<td>                      电话:  {DH}</td>' +'<td>家庭住址:  {JTZZ}</td>' +'</tr>' +'<tr>' +'<td>                      入职时间:  {RZSJ}</td>' +'<td>离职时间:  {LZSJ}</td>' +	          '</tr>' +'</table>' +'<br/></div>'),beforeExpand : function(record, body, rowIndex){record.data.FILENAME=encodeURI(record.data.FILENAME);if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){if(this.tpl && this.lazyRender){body.innerHTML = this.getBodyContent(record, rowIndex);}return true;}else{return false;}}
});
放入列模型 
var cm = new Ext.grid.ColumnModel([rn,sm,expander,
放入grid 
plugins: expander,
1.表格的特性简介 

表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid
表格的列信息由类Ext.grid.ColumnModel定义,
表格的数据存储器由Ext.data.Store定义,根据解析数据不同,数据存储器分为JsonStore,SimpleStore,GroupingStrore等

2.制作一个表格

var grid = new Ext.grid.GridPanel({store : store,autoHeight : true,//自动高度//enableColumnMove : false,//不可拖动列//enableColumnResize : false,不可改变列宽度//stripeRows : true,//斑马线效果//loadMask : true,//笼罩提示信息columns : column,//列默认为100px,如果要自定义宽度,只需要设置该列的width属性即可//每列自动填满表格viewConfig : new Ext.grid.GridView({forceFit : true}),listeners : {'beforerender' : function(){store.load();}}
});
3.指定某一列自动延伸填充表格可以使用autoExpandColumn配置项,cm必须设置id 
var column = [{id:'ttt',header:'名称',dataIndex:'name'}
]
var grid = new Ext.grid.GridPanel({autoExpandColumn : 'ttt'
});
4.格式化数据集日期显示在列模型中 

<script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var data = [['1','李文超','李文超的描述','1985-01-15T02:08:04'],['2','范勇','范勇的描述','1986-01-15T02:08:04'],['3','马新军','马新军的描述','1987-01-15T02:08:04'],['4','常高军','常高军的描述','1988-01-15T02:08:04'],['5','何卫国','何卫国的描述','1989-01-15T02:08:04']];var store = new Ext.data.Store({proxy : new Ext.data.MemoryProxy(data),reader : new Ext.data.ArrayReader({},[{name : 'id',mapping:0},{name : 'name',mapping:1},{name : 'descn',mapping:2},/*type告诉reader在解析原始数据时把对应的列做为日期类型处理dateFormat属性把得到的字符串转化为相应的日期格式*/{name : 'date',mapping:3,type:'date',dateFormat:'Y-m-dTH:i:s'},])});var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{	header:'日期',dataIndex:'date',width:200,//该函数的作用是渲染日期格式renderer: Ext.util.Format.dateRenderer('Y年m月d日')}]);var grid = new Ext.grid.GridPanel({store : store,cm : cm,listeners : {'beforerender' : function(){store.load();}}});new Ext.Viewport({layout:'fit',items: [grid]});});
</script>

 5.表格渲染

公共部分

var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex',renderer: renderSex}
]);

简单渲染:

function renderSex(value){if('male'==value){return "<span style='color:red'>男</span><img src='<%=rootpath%>/image/boy.jpg'/>"}else{return "<span style='color:green'>女</span><img src='<%=rootpath%>/image/girl.jpg'/>"}
}

复杂渲染:

/*value : 将要显示的单元格的值cellmeta : 单元格的相关属性,主要有id和CSSrecord : 这行数据对象,如果需要获取其他列的值,可以通过record.data['id']的方式获得rowIndex : 行号,这里的行号指的是当前页面中所有记录的顺序columnIndex : 列号store : 构造表格时传递的ds
*/
function renderSex(value, cellmeta, record, rowIndex, colIndex, store){var str = "<input type ='button' value='详细信息' οnclick='alert(\""+"这个单元格的值是: "+value+"\\n"+"这个单元格的配置是: {cellId: "+cellmeta.cellId+",id: "+cellmeta.id+",css: "+cellmeta.css+"}\\n"+"这个单元格对应的行是: "+record+",一行的数据都在里边\\n"+"这是第"+rowIndex+"行\\n"+"这是第"+colIndex+"列\\n"+"这个表格对应的Ext.data.Store在这里: "+store+",随便用吧"+"\")'/>";return str;
}

7.在grid中删除record和增加record

var grid = new Ext.grid.GridPanel({store : store,clicksToEdit: 1,//要转换单元格为编辑状态所需的鼠标点击数cm : cm,sm : sm,tbar : new Ext.Toolbar({items : ['-',{text: '添加一行',handler : function(){var p = new myRecord({id : '',name : '',descn: '',sex : ''});grid.stopEditing();//停止任何激活的行为store.insert(0,p);//触发添加事件时插入records到指定的store位置grid.startEditing(0,0);//指定的行/列，进行单元格内容的编辑}},'-',{text: '删除一行',handler : function(){Ext.Msg.confirm('信息','确认删除?',function(btn){if(btn == 'yes'){var record = store.getAt(0);store.remove(record);grid.view.refresh();//刷新表格的视图}});}}]})
});

8.表格视图Ext.grid.GridView 
Ext的表格控件都遵守MVC模型
Ext.data.Store可以看作Model
Ext.grid.GridPanel可以看作controller
Ext.grid.GridView可以看作view
通常情况,ext.grid.GridView的实例不需要自行创建,controller会自动生成
当希望操作Ext.grid.GridView的属性时,可以通过grid.getView()函数来获取当前表格的视图实例

默认情况下GridView显示为

修改grid

viewConfig : {columnsText : 'column',scrollOffset : 30,//表格右侧为滚动条预留的宽度sortAscText : 'asc',sortDescText : 'desc'
}
修改后的

9.可编辑表格 Ext.grid.EditorGridPanel

var grid = new Ext.grid.EditorGridPanel({store : store,//要转换单元格为编辑状态所需的鼠标点击数clicksToEdit: 1,cm : new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),sm,{header:'编号',dataIndex:'id',editor : new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank : false}))},{header:'名称',dataIndex:'name',editor : new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank : false}))}]),sm : sm
});

10.属性表格控件 Ext.grid.PropertyGrid

 根据name获取value

var value = grid.store.getById('name').get('value');

效果图

代码 
<script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var grid = new Ext.grid.PropertyGrid({title: '属性表格',autoHeight: true,width: 300,renderTo: 'grid',viewConfig: {forceFit: true},source: {"名字": "不告诉你","创建时间": new Date(Date.parse('12/15/2007')),"是否有效": false,"版本号": .01,"描述": "嗯，估计没啥可说的"}});});
</script>
10.1禁用Ext.grid.PropertyGrid编辑功能通过监听器来实现 
grid.on("beforeedit", function(e){e.cancel = true;return false;
});
10.2Ext.grid.PropertyGrid自身有两列name和value,默认根据nane排序,我们可以修改配置项initComponent,强制对name列进行排序 
Ext.MyPropertyGrid = Ext.extend(Ext.grid.PropertyGrid, {//自定义配置项autoSort:true,initComponent : function(){this.customRenderers = this.customRenderers || {};this.customEditors = this.customEditors || {};this.lastEditRow = null;var store = new Ext.grid.PropertyStore(this);this.propStore = store;var cm = new Ext.grid.PropertyColumnModel(this, store);//接受参数是否需要默认排序if(this.autoSort){store.store.sort('name', 'ASC');}this.addEvents('beforepropertychange','propertychange');this.cm = cm;this.ds = store.store;Ext.grid.PropertyGrid.superclass.initComponent.call(this);this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){if(colIndex === 0){this.startEditing.defer(200, this, [rowIndex, 1]);return false;}}, this);}
});var grid = new Ext.MyPropertyGrid({title : '表格标题',autoHeight : true,width : 400,//这里传参数autoSort : false,renderTo : 'lwc',//JSON指定了一组key和valuesource : {'名' : 'tom','姓' : 'cat','性别' : 'boy','年龄' : '18'}
});

10.3自定义编辑器

<script type="text/javascript" defer>  Ext.onReady(function(){  var grid = new Ext.grid.PropertyGrid({title: '属性表格',autoHeight: true,width: 300,renderTo: 'grid',customEditors: {'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))},source: {'Start Time': '10:00 AM'}}); });  
</script>

11.表格右键菜单

contextmenu (Ext.EventObject e) 全局性右键事件
cellcontextmenu (Grid this,Number rowIndex,Number cellIndex,Ext.EventObject e) 单元格上的右键事件
rowcontextmenu(Grid this,Number rowIndex,Ext.EventObject e) 行上右键事件
headercontextmenu(Grid this,Number columnIndex,Ext.EventObject e) 表头右键事件
var contextmenu = new Ext.menu.Menu({items : [{text : '查看详细',handler : function(){}}]});var grid = new Ext.grid.GridPanel({renderTo : 'grid',autoHeight : true,store : store,cm : cm,listeners : {rowcontextmenu : function(grid,rowIndex,e){e.preventDefault();//返回grid的SelectionModelvar rowSelectionModel = grid.getSelectionModel();//选取这一行rowSelectionModel.selectRow(rowIndex);//获取事件的页面坐标var array = e.getXY()//在指定的位置显示该菜单contextmenu.showAt(array);}}
});

12.分组表格视图

我们可以通过grid.getView()获取Ext.grid.GroupingView的实例,进行对视图的操作
代码 
var data = [['1','李文超','李文超的描述','male'],['2','范勇','范勇的描述','female'],['3','马新军','马新军的描述','male'],['4','常高军','常高军的描述','female'],['5','何卫国','何卫国的描述','male']
];
var store = new Ext.data.GroupingStore({proxy : new Ext.data.MemoryProxy(data),reader : new Ext.data.ArrayReader({},[{name : 'id',mapping:0},{name : 'name',mapping:1},{name : 'descn',mapping:2},{name : 'sex',mapping:3},]),groupField : 'sex',sortInfo : {field : 'id',//排序的属性deirection : 'asc' //排序的方式}
});
store.load();
var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex'}
]);
var grid = new Ext.grid.GridPanel({store : store,view : new Ext.grid.GroupingView(),cm : cm,tbar : [{text : 'expand',handler : function(btn) {var groupingView = grid.getView();groupingView.expandAllGroups()//展开所有分组}},{text : 'collapse',handler : function(btn) {var groupingView = grid.getView();groupingView.collapseAllGroups();//折叠所有分组}},{text : 'toggle',handler : function(btn) {var groupingView = grid.getView();//会自动判断分组的状态,展开的时候折叠,折叠的时候展开groupingView.toggleAllGroups();}},{text : 'toggle one',handler : function(btn) {var groupingView = grid.getView();//只展开femalevar groupId = groupingView.getGroupId('female');groupingView.toggleGroup(groupId);}}]
});
new Ext.Viewport({layout:'fit',items: [grid]
});
13.拖放表格
13.1拖放改变表格的大小Ext.Resizable()
效果图

代码 
<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/><script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script><script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var data = [['1','李文超','李文超的描述','male'],['2','范勇','范勇的描述','female'],['3','马新军','马新军的描述','male'],['4','常高军','常高军的描述','female'],['5','何卫国','何卫国的描述','male']];var store = new Ext.data.Store({proxy : new Ext.data.MemoryProxy(data),reader : new Ext.data.ArrayReader({},[{name : 'id',mapping:0},{name : 'name',mapping:1},{name : 'descn',mapping:2},{name : 'sex',mapping:3},])});store.load();var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex'}]);var grid = new Ext.grid.GridPanel({renderTo : 'grid',store : store,cm : cm});var rz = new Ext.Resizable(grid.getEl(),{wrap : true,//构造Resizable时自动在指定id的外边包裹一层div,这样就不要定义其他附属的div了minHeight : 100,//限制改变大小的高度pinned : true,//控制拖动区域的显示状态,true表示会一直在表格下方,false,只有鼠标悬停在可拖拽区域上方时出现handles : 's' //东 南 西 北})//注册事件,在拖放完成之后表格会调用syncSize方法修改自己的大小,第三个参数是函数执行的scope//syncSize 强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度rz.on('resize',grid.syncSize,grid); });</script></head><body><div id = 'grid'></div></body>
</html>
13.2在同一个表格里拖放
效果图

代码 
<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/><script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script><script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var data = [['1','李文超','李文超的描述','male'],['2','范勇','范勇的描述','female'],['3','马新军','马新军的描述','male'],['4','常高军','常高军的描述','female'],['5','何卫国','何卫国的描述','male']];var store = new Ext.data.Store({proxy : new Ext.data.MemoryProxy(data),reader : new Ext.data.ArrayReader({},[{name : 'id',mapping:0},{name : 'name',mapping:1},{name : 'descn',mapping:2},{name : 'sex',mapping:3},])});store.load();var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex'}]);var grid = new Ext.grid.GridPanel({renderTo : 'grid',autoHeight : true,store : store,cm : cm,enableDragDrop : true //对表格内置拖放支持 });//一个简单的基础类,该实现使得任何元素变成为可落下的目标,以便让拖动的元素放到其身上var ddrow = new Ext.dd.DropTarget(grid.container,{ddGroup : 'GridDD',copy : false,//拖放以后是执行裁剪操作还是复制,false拖过去以前数据不见了,true拖过去原来数据不会变化//拖动事件notifyDrop : function(dd,e,data){//选中了多少行var rows = data.selections;//拖动到第几行var index = dd.getDragData(e).rowIndex;if(typeof(index) == 'undefined'){return;}//修改storefor(i = 0 ;i <rows.length;i++){var rowData = rows[i];if(!this.copy){store.remove(rowData);store.insert(index,rowData);}}}});});</script></head><body><div id = 'grid'></div></body>
</html>




这篇关于Extjs-表格 Ext.grid.GridPanel的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/701638。

相关文章

JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2