GridLite 轻量级的Ext Grid

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@google code  

 

 

利用ext core重新简化实现 Ext.Grid，单用的话更节省网络带宽。

 

 

 

 

效果演示：这里

 

 

 

 

 

 

实现要点：

 

1.去除 ext grid 复杂的表格控制，直接用 table 实现

2.偷取ext 分页button素材，利用浮动重新实现，特效简化 (090531重新按照extjs分页思路实现特效)

 

 

 

 

 

 

/*
	v1.0(20090425) 偷窃ext grid素材以及利用ext core 简化重新实现grid ,暂时去除store层(后期再加入)，
	翻页事件留给用户,表格逻辑只包括数据显示，按钮隐藏
	v1.1 jump 在当前页输入框直接输入数字然后按enter即可
	v1.2 增加设置表格宽度，设置表格容器位置，行单击事件
	v1.5 仿照Ext grid 调整数据格式,fromNo设置,curentPage不要设置了
	v1.5.1((20090430)) 当总数为0时，显示工具按钮修正
	v1.6(20090529) 采用事件委托，修正ie，chrome显示问题
	v2.0(20090531) 添加ajax模式获取数据，loadAjax方法，底部分页按钮仿照extjs pagetoolbar美化,
	增加整列宽度设置
	v2.0.1(20090601) css子选择器 > 使用，避免分页条高亮
	v2.0.2(20090602) _getPropertyValue('x.y.z') 取值容错处理
	v2.2(20090604) 单元格内容调整单行显示
	v2.3(20090604) 列宽拖放调整实现
	v2.3.1(20090606) 列宽拖放滚动条问题处理
	v2.4(20090625) 客户端表格单列排序增加sortable配置,待实现:多列联合排序
	v2.4.1(20090718) 第一次鼠标经过行跳动修正
	v2.4.2(20090720) 行手型鼠标可改变,selectMode='row'时才可点行反应
	v2.4.3(20090805) numberLen 配置增加，表示计数宽度,pageSize 没有时隐藏分页工具条
	v2.5(20090806) 加入destroy函数，可以从内存中清除掉Ext.destroy(grid);sIEve 测试ie6 完全释放
	v2.5.1(20090820) tr border ie6 不能用,只能设在 td border上
	v2.5.5(20090824) 加入 groupCol ，对指定列id的数据进行分组显示。
*/

 

使用代码 ：  

可以ajax，或者 直接web page 切换  

//可以初始设定数据
	var grid=new Ext.ux.GridLite({
		title:'生成表格标题',
		//grid 容器id
		id:'table_container_test',
		//宽度，直接设css
		width:'800px',
		//标题头
		headers:[{title:'我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们',id:'t1',show:true,width:'50px'},{title:'标题头2',id:'t2',show:true,
		
		/*
		A value less than zero, if, according to your sort criteria, a is less than b and should appear before b in the sorted array.

Zero, if a and b are equivalent for the purposes of this sort.

A value greater than zero, if a is greater than b for the purposes of the sort.

		*/
		sortable:function(i1,i2){
			return i1-i2;
		},
			renderer:function(val,cur){
				return'<span>'+'x'+'</span>'+'<span>'+cur['t2']+'</span>';
				},width:'200px'
			},{title:'标题头3',id:'t3.t4',show:true,sortable:true},{title:'标题头4',id:'t4',show:false,width:'50px'}],
				
		//url 用来ajax 提交数据时 数据源，返回数据为 下述 pageRecords 个数对象
		url:'xx.jsp',
		
		//数据 二维数组 ,直接渲染到表格，与下面pageSize无关
		//可设置是否显示，按从左到右设置显示的开始设置
		
		pageRecords:{
			datas:[ 
			{t1:'我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们',
				t2:11,
				't3':{t4:31},
				t4:41
				},
					{t1:1,
				t2:2,
				't3':{t4:32},
				t4:42
				},
					{t1:1,
				t2:3,
				't3':{t4:33},
				t4:43
				},
					{t1:1,
				t2:4,
				't3':{t4:34},
				t4:44
				}
			],
			
			//分页参数,只是用来判断各个分页按钮的显示与否判断依据下面三个东西
			//每页记录个数
			pageSize:10,
			//当前开始条数
			fromNo:0,
			//总共数据库中记录个数
			totalRecord:2
		}
	});
	
	//可以后期设置
	/*
  grid.loadData({
  	
 datas:[
		{t1:1,
			t2:2,
			t3:3,
			t4:4
			},
				{t1:1,
			t2:2,
			t3:3,
			t4:5
			},
				{t1:1,
			t2:2,
			t3:3,
			t4:6
			},
				{t1:1,
			t2:2,
			t3:3,
			t4:7
			}
		],
		pageSize:10,
		fromNo:0,
		totalRecord:4
  	});
  	*/
  	
  	
  	/*
  	
  		ajax 模式的 获取数据方式，必须前面设置 url参数
  		grid.loadAjax({
  			'my':'1'
  		});
  	
  	*/
  	
  	//监控翻页事件
  	grid.on('firstPage',function(el){
  		alert('firstPage');
  		
  	});
  	
  	grid.on('nextPage',function(){
  		alert('nextPage');
  	});
  	
  	grid.on('prevPage',function(){
  		alert('prevPage');
  	});
  	
  	grid.on('lastPage',function(){
  		alert('lastPage');
  	});
  	
  	grid.on('jump',function(el,newValue){
  		alert('jump :'+newValue);
  	});
  	
  	grid.on('rowClick',function(rowData){
  		
  		alert(rowData['t4']);
  	});
  	
  	grid.on('refresh',function(){
  		this.disableButton('refresh');
  		alert('refresh');
  		this.enableButton('refresh');
  	});

 

评论

4 楼 xyz20003 2009-04-26  

ext-3.0-rc1里的ListView够轻量级了吧？
长相和grid基本一样

3 楼 kjj 2009-04-26  

都自己实现了,简单的功能够用了,动辄ext太奢侈了!

2 楼 yiminghe 2009-04-26  

peacock 写道

相当不错，有时候就只是用Grid的一些基础功

O(∩_∩)O谢谢鼓励，我也是非常喜欢ext，希望在web page领域它也有一席之地，而不是仅仅占有大部分人认为的内网企业应用

1 楼 peacock 2009-04-26  

相当不错，有时候就只是用Grid的一些基础功