ExtJs 表格的实现

最新推荐文章于 2023-06-17 22:52:50 发布
最新推荐文章于 2023-06-17 22:52:50 发布
阅读量1.1w 收藏 9
点赞数 4
文章标签： Ext
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SJF0115/article/details/8853499
版权 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			var sm = new Ext.grid.CheckboxSelectionModel();
			var cm = new Ext.grid.ColumnModel([
				new Ext.grid.RowNumberer(),//自动显示行号
				sm,//复选框
				{hearder:'编号',dataIndex:'id',sortable:true},//每一行对应表格的一列
				{header:'姓名',dataIndex:'name'},
				{header:'性别',dataIndex:'sex',renderer:rendererSex},
				{header:'描述',dataIndex:'descn'},
				{header:'生日',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}//日期类型需要特别注意
			]);
			function rendererSex(value){
				if(value == 'male'){
					return "<span style = 'color:red;font-weight:bold'>男</span>";
				}
				else{
					return "<span style = 'color:green;font-weight:bold'>女</span>";
				}
			}
			var data = [['1','小斯','male','descn','1990-01-15T03:34:18'],
						['2','卡卡','female','descn','1990-01-15T03:34:18'],
						['3','c罗','male','descn','1990-01-15T03:34:18'],
						['4','梅西','female','descn','1990-01-15T03:34:18'],
						['5','比利亚','male','descn','1990-01-15T03:34:18']
						];
			//var cm = new Ext.grid.ColumModel(...) 负责创建表格的列信息
			//header:首部显示文本
			//dataIndex:列对应的记录集字段
			//sortable:是否可排序
			//renderer:渲染函数
			//format列格式化信息
			/*数据存储器Store*/
			var store = new Ext.data.Store({
				proxy:new Ext.data.MemoryProxy(data),
				reader:new Ext.data.ArrayReader({},[
					{name:'id'},
					{name:'name'},
					{name:'sex'},
					{name:'descn'},
					{name:'date',type:'date',dateformat:'Y-m-dTH:i:s'}//显示日期类型数据，同时还需要在cm里进行配置
				]),
				sortInfo:{field:"name",direction:"ASC"}//设置默认排序方式
			}
			);

			store.load();

			var grid = new Ext.grid.GridPanel({
				renderTo:'grid',//指示表格渲染到什么地方去
				store:store,//数据存储器
				cm:cm,//列定义信息
				sm:sm,//复选框
				autoHeight:true,
			});
			}
		);
	</script>
</head>
<body>
	<div id = "grid">
	</div>
</body>
</html>





动态改变表格中数据
动态改变表格中数据，只要更新store就可以了。 
//监听事件
  	reportFaultDealStateCbox.on("select",function(comboBox)
  	{
  	    var Id = comboBox.getValue();
  	    var myReportFaultUrl= "/Web/Manage/DeskTop/JSON/OnlineReportFault/GetReportFault.aspx";
  	    MyReportedFaultWinStore.proxy.setUrl(myReportFaultUrl);  
        MyReportedFaultWinStore.load({ params: { start: 0,limit:10,act:"DealStateOfPublishUser",DealStateId:Id}});
  	});

在这我们监听下拉框来更新表格中的数据。
属性表格

//属性表格
var grid = new Ext.grid.PropertyGrid(
	{
		title:'属性表格',
		autoHeight:true,
		width:300,
		renderTo:'grid',
		source:{
			"名字":"小斯",
			"性别":"男",
			"年龄":"23",
			"学校":"山东科技大学",
			"住址":"山东淄博"
		}
	}
);
可以直接编辑右边的单元格，左边的单元格不可编辑。
在有些时候，只用来显示数据，需关闭编辑功能。我们通过事件监听器来实现。
grid.on("beforeedit",function(e){
	e.cancel = true;
	return false;
});




可编辑表格：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			//列定义信息
			var cm = new Ext.grid.ColumnModel([
				{
					hearder:'编号',
					dataIndex:'id',
					editor:new Ext.grid.GridEditor(
								new Ext.form.TextField(
									{allowBlank:false}//不允许在TextField中输入空值
								)
							)
				},
				{
					header:'姓名',
					dataIndex:'name',
					editor:new Ext.grid.GridEditor(
								new Ext.form.TextField(
									{allowBlank:false}//不允许在TextField中输入空值
								)
							)
				},
				{
					header:'描述',
					dataIndex:'descn',
					editor:new Ext.grid.GridEditor(
								new Ext.form.TextField(
									{allowBlank:false}//不允许在TextField中输入空值
								)
							)
				},
			]);
			//数据
			var data = [['1','小斯','descn'],
						['2','卡卡','descn'],
						['3','c罗','descn'],
						['4','梅西','descn'],
						['5','比利亚','descn'],
						['6','卡卡','descn'],
						['7','c罗','descn'],
						['8','梅西','descn'],
						['9','比利亚','descn'],
						['10','卡卡','descn'],
						];
			/*数据存储器Store*/
			var store = new Ext.data.Store({
				proxy:new Ext.data.MemoryProxy(data),
				reader:new Ext.data.ArrayReader({},[
					{name:'id'},
					{name:'name'},
					{name:'descn'},
				]),
			}
			);
			var grid = new Ext.grid.EditorGridPanel({
				renderTo:'grid',//指示表格渲染到什么地方去
				store:store,//数据存储器
				cm:cm,//列定义信息
				autoHeight:true,
			});
			
			store.load();
			}
		);
	</script>
</head>
<body>
	<div id = "grid">
	</div>
</body>
</html>





限制输入数据的类型：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
		//放到grid里显示的原始数据
		var data = [
			[29,1,new Date(),true],
			[26,0,new Date(),false],
			[21,0,new Date(),true],
			[24,1,new Date(),false],
		];
		//性别数据
		var sexData = [
			['0','男'],
			['1','女'],
		];
		//列定义信息
		var cm = new Ext.grid.ColumnModel(
			[
				//第一列  NumberField
				{	
					header:'年龄',
					dataIndex:'age',
					editor:new Ext.grid.GridEditor(
						new Ext.form.NumberField(
							{
								allowBlank:false,//表示不能空
								allowNegative:false,//非负数
								maxValue:150//最大值
							}
						)//NumberField
					)//editor
				},//第一列
				//第二列  ComboBox
				{	
					header:'性别',
					dataIndex:'sex',
					editor:new Ext.grid.GridEditor(
						new Ext.form.ComboBox(
							{
								store:new Ext.data.SimpleStore(
									{
										fields:['value','text'],
										data:sexData
									}
								),
								emptyText:'请选择',
								mode:'local',
								triggerAction:'all',
								valueField:'value',
								displayField:'text',
								readonly:true
							}
						)//ComboBox
					),//editor
					renderer:function(value){
						return sexData[value][1];
					}
				},//第二列
				//第三列
				{
					header:'生日',
					dataIndex:'birthday',
					editor:new Ext.grid.GridEditor(
						new Ext.form.DateField(
							{
								format:'Y-m-d',//日期格式
								minValue:'2007-12-29',
								disabledDays:[0,6],
								disabledDaysText:'只能选择工作日'
							}
						)//DateField
					),//edidor
					renderer:function(value){
						return value.format("Y-m-d");
					}
				},//第三列
				{
					header:'婚否',
					dataIndex:'marry',
					editor:new Ext.grid.GridEditor(
						new Ext.form.Checkbox(
							{
								allowBlank:false
							}
						)//Checkbox
					),//edidor
					renderer:function(value){
						//Ext.Msg.alert(value);
						return value ? '是':'否';
					}
				}
			]
		);
		//数据存储器
		var store = new Ext.data.Store(
			{  
				proxy:new Ext.data.MemoryProxy(data),  
				reader:new Ext.data.ArrayReader({},
					[  
						{name:'age'},  
						{name:'sex'},  
						{name:'birthday'},  
						{name:'marry'},
					]
				),            
			}  
		);  
		 //加载数据
		store.load();  
		//表格
		var grid = new Ext.grid.EditorGridPanel(
			{  
				renderTo:'grid',//指示表格渲染到什么地方去  
				store:store,//数据存储器  
				cm:cm,//列定义信息  
				autoHeight:true,  
			}
		);  
	}
);
	</script>
</head>
<body>
	<div id = "grid">
	</div>
</body>
</html>








拖放改变表格的大小：

在以上代码中添加一下代码：


Resizable必须放在renderer之后。

var rs = new Ext.Resizable('grid',//第一个参数是'grid'，也就是说我们改变大小的区域是在<div id = 'grid'>这个元素上起作用。
			{
				warp:true,//
				minHeight:100,
				pinned:true,//控制可拖动区域的显示状态
				handles:'s'//s - south EXT用东西南北上下左右设置可拖放的方向
			}
		);
		//监听事件
		rs.on('resize',grid.syncSize,grid);


在同一个表格里拖放

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
		//放到grid里显示的原始数据
		var data = [
			[29,1,new Date(),true],
			[26,0,new Date(),false],
			[21,0,new Date(),true],
			[24,1,new Date(),false],
		];
		//列定义信息
		var cm = new Ext.grid.ColumnModel(
			[
				//第一列  NumberField
				{	
					header:'年龄',
					dataIndex:'age',
				},//第一列
				//第二列  ComboBox
				{	
					header:'性别',
					dataIndex:'sex',
				},//第二列
				//第三列
				{
					header:'生日',
					dataIndex:'birthday',
				},//第三列
				{
					header:'婚否',
					dataIndex:'marry',
				}
			]
		);
		//数据存储器
		var store = new Ext.data.Store(
			{  
				proxy:new Ext.data.MemoryProxy(data),  
				reader:new Ext.data.ArrayReader({},
					[  
						{name:'age'},  
						{name:'sex'},  
						{name:'birthday'},  
						{name:'marry'},
					]
				),            
			}  
		);  
		 //加载数据
		store.load();  
		//表格
		var grid = new Ext.grid.GridPanel(
			{  
				renderTo:'grid',//指示表格渲染到什么地方去  
				store:store,//数据存储器  
				cm:cm,//列定义信息  
				autoHeight:true, 
				enableDragDrop:true,//支持拖放
			}
		); 
		var dropTarget = new Ext.dd.DropTarget(
			grid.container,
			{
				ddGroup:'GridDD',//表格里默认为'GridDD'
				copy:false,//决定拖放以后是执行剪切操作还是复制操作
				//处理拖放事件
				notifyDrop:function(dd,e,data){
					//选中多少行
					var rows = data.selections;
					//拖动到第几行
					var index = dd.getDragData(e).rowIndex;
					if(typeof(index) == "undefined"){
						return;
					}
					//修改store,把刚刚选中的数据拖放到想放的位置
					for(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>






不同表格 之间的拖放

不同表格之间的拖放和同一表格内拖放几乎一样。注意不同点。


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
		//放到grid里显示的原始数据
		var data1 = [
			[29,'男','1990-01-11',true],
			[26,'女','1990-01-12',false],
			[21,'男','1990-01-13',true],
			[24,'女','1990-01-14',false],
		];
		var data2 = [
			[15,'男','1990-01-15',true],
			[15,'男','1990-01-16',false],
			[27,'女','1990-01-17',true],
			[28,'女','1990-01-18',false],
		];
		//列定义信息
		var cm = new Ext.grid.ColumnModel(
			[
				//第一列  NumberField
				{	
					header:'年龄',
					dataIndex:'age',
				},//第一列
				//第二列  ComboBox
				{	
					header:'性别',
					dataIndex:'sex',
				},//第二列
				//第三列
				{
					header:'生日',
					dataIndex:'birthday',
				},//第三列
				{
					header:'婚否',
					dataIndex:'marry',
				}
			]
		);
		//数据存储器
		var store1 = new Ext.data.Store(
			{  
				proxy:new Ext.data.MemoryProxy(data1),  
				reader:new Ext.data.ArrayReader({},
					[  
						{name:'age'},  
						{name:'sex'},  
						{name:'birthday'},  
						{name:'marry'},
					]
				),            
			}  
		);  
		
		var store2 = new Ext.data.Store(
			{  
				proxy:new Ext.data.MemoryProxy(data2),  
				reader:new Ext.data.ArrayReader({},
					[  
						{name:'age'},  
						{name:'sex'},  
						{name:'birthday'},  
						{name:'marry'},
					]
				),            
			}  
		);  
		 //加载数据
		store1.load();
		store2.load();		
		//表格
		var grid1 = new Ext.grid.GridPanel(
			{  
				renderTo:'grid1',//指示表格渲染到什么地方去  
				store:store1,//数据存储器  
				cm:cm,//列定义信息  
				autoHeight:true, 
				enableDragDrop:true,//支持拖放
			}
		); 
		var grid2 = new Ext.grid.GridPanel(
			{  
				renderTo:'grid2',//指示表格渲染到什么地方去  
				store:store2,//数据存储器  
				cm:cm,//列定义信息  
				autoHeight:true, 
				enableDragDrop:true,//支持拖放
			}
		); 
		var dropTarget1 = new Ext.dd.DropTarget(
			grid1.view.mainBody,
			{
				ddGroup:'GridDD',//表格里默认为'GridDD'
				copy:false,//决定拖放以后是执行剪切操作还是复制操作
				//处理拖放事件
				notifyDrop:function(dd,e,data){
					//选中多少行
					var rows = data.selections;
					//拖动到第几行
					var index = dd.getDragData(e).rowIndex;
					if(typeof(index) == "undefined"){
						return;
					}
					//修改store,把刚刚选中的数据拖放到想放的位置
					for(i = 0;i < rows.length;i++){
						var rowData = rows[i];
						//先删除再添加
						if(!this.copy){
							store2.remove(rowData);
						}
						store1.insert(index,rowData);
					}
				}
			}
		);
		
		var dropTarget2 = new Ext.dd.DropTarget(
			grid2.view.mainBody,
			{
				ddGroup:'GridDD',//表格里默认为'GridDD'
				copy:false,//决定拖放以后是执行剪切操作还是复制操作
				//处理拖放事件
				notifyDrop:function(dd,e,data){
					//选中多少行
					var rows = data.selections;
					//拖动到第几行
					var index = dd.getDragData(e).rowIndex;
					if(typeof(index) == "undefined"){
						return;
					}
					//修改store,把刚刚选中的数据拖放到想放的位置
					for(i = 0;i < rows.length;i++){
						var rowData = rows[i];
						//先删除再添加
						if(!this.copy){
							store1.remove(rowData);
						}
						store2.insert(index,rowData);
					}
				}
			}
		);
	}
);
	</script>
</head>
<body>
	<div id = "grid1">
	</div>
	<br>
	<p>第二个表格</p>
	<div id = "grid2">
	</div>
</body>
</html>








sjf0115
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS的使用方法汇总(1)——配置和表格控件使用
薛敬明的专栏
09-09 3万+
ExtJS时一套AJAX控件,本人认为它是目前我见过最好最美的JS控件库，所以非常有学习和使用价值，如果你还没有接触过ExtJS或者压根对其不感兴趣，那么没有必要看下去了,ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制，或者
extjs表格文本启用选择复制功能具体实现
10-26
extjs提供了方便的表格组件grid供使用，但是默认情况下表格中的文本是不能被选中的，自然也是无法复制的，下面就为大家介绍下选择复制功能如何启用，感兴趣的朋友可以了解下
extjs Ext.grid.Panel表格组件学习
最新发布
西京刀客
06-17 2137
⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️
ExtJs基本控件之表格
Heroin的博客
10-28 548
ExtJs中比较常见的控件就是表格了，创建表格，首先我们要创建的就是表格列，我们创建三列表格，id,name,descn创建列的代码如下 首先我们创建的是列的标题 var columns = [         {header:'编号',dataIndex:'id'},         {header:'名称',dataIndex:'name'},         {header:'
extjs表格
xcmax
10-05 690
function drawTable(res){ var store = new Ext.data.JsonStore({ fields:[ 'oid', 'uname', 'odate' ], data:$.parseJSON(res) }); console.log('res',res); console.log('res1',$.parseJSON(res)); var col
EXTJs 实现表格数据显示-----JSON
sz_bdqn的专栏
07-01 7109
首先创建三个文件：grid04.html、grid04.js、grid04.jsongrid04.html内容如下： grid04.html  grid04.js的文件如下：Ext.onReady(function(){
使用FlexiGrid实现Extjs表格效果方法分享
10-25
主要分享了使用FlexiGrid实现Extjs表格效果方法，非常的实用，这里推荐给有相同需求的小伙伴
Extjs表格合并代码
12-16
总结，实现ExtJS表格合并代码的关键在于理解表格组件的结构、配置和模板机制，并能妥善处理浏览器之间的兼容性问题。通过细心的CSS调整和对盒模型的深入理解，我们可以创建出在各种浏览器下表现一致的表格应用。在...
Extjs 表格
06-17
下面将详细探讨ExtJS表格的这些功能。 1. **创建表格** 创建一个ExtJS表格首先需要定义一个`Ext.grid.Panel`实例，设置其配置项，包括数据源、列定义、存储配置等。例如： ```javascript var grid = Ext.create...
ExtJS Filter 实现表格过滤
03-11
ExtJS 是一个强大的JavaScript库，专门用于构建...以上就是关于ExtJS Grid Filter实现表格过滤的基本介绍和应用场景。在实际开发中，根据项目需求，灵活运用各种过滤策略，可以极大地提升数据管理的便捷性和用户体验。
基于EXTJS 的在线EXCEL编辑器
12-01
用EXTJS 制作的在线 EXCEL 编辑器 使用简单~~懂的自己来取~原价10分的~现在做活动只要5分速度点~明天打折活动结束了又是10分了！
Ext3.4.0复杂(多行)表头+锁定多列例子
09-09
Ext3.4.0复杂(多行)表头+锁定多列例子 非常棒，项目中需要使用到的。
EXTJS 4 树形表格组件使用示例
09-30
extjs树型表格组件的使用示例,详细说明可以参见http://blog.csdn.net/snail_spoor/article/details/39698037
EXT.NET复杂布局（二）——报表
iamsyu的专栏
02-29 1160
前面提到过工作台（《EXT.NET复杂布局（一）——工作台》）了，不知道各位看过之后有什么感想。这次就介绍介绍使用EXT.NET画几个报表。 看图写作从小学就开始了，如图： 图一 图二 图三（1） 图三（2） 各位看官，不要以为这报表画起来很难，其实使用EXT.NET来画的话，还是挺简单方便的。 1）下面就从图一开始。 这个报表实现，本人采用的是最原始的手写代码（之
ExtJs 表格的实现
sdfsdfytre的博客
11-15 300
ExtJs 表格的实现
[ExtJS5学习笔记]第三十六节 报表组件mzPivotGrid
weixin_30667649的博客
03-23 236
mzPivotGrid 是一个报表组件，采用这个组件之后，可以令你的应用体现更多的价值。 什么是pivot grid 什么是mzPivotGrid 学习资源 与图表组件的融合 什么是pivot grid extjs的面板panel对于展示大批量数据来说是pefect的，并且还提供了各种各样的展示方式。但是唯一缺少一个pivot grid，当需要做数...
extjs4 制作报表
.
09-01 2679
直接上图 老规矩，头部引入extjs组件 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-neptune.css"> test714.js核心代码 Ext.require('Ext.chart.*'); Ext.require(['Ext.layout.co
extjs表格实现复选框的代码
03-07
以下是实现 extjs 表格复选框的代码示例： 1. 在列模型中添加一个复选框列： ``` { xtype: 'checkcolumn', header: '选择', dataIndex: 'selected', width: 50, editor: { xtype: 'checkbox', cls: 'x-grid-checkheader-editor' } } ``` 2. 在数据模型中添加一个 selected 字段： ``` Ext.define('MyModel', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'}, {name: 'selected', type: 'bool'} ] }); ``` 3. 在表格中启用多选模式： ``` selModel: { selType: 'checkboxmodel', mode: 'MULTI' } ``` 以上就是实现 extjs 表格复选框的代码示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值