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和CSS
	record : 这行数据对象,如果需要获取其他列的值,可以通过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和value
	source : {
		'名' : '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的SelectionModel
			var 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();
			//只展开female
			var 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;
					}
					//修改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>




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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

itlwc

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值