`
yiminghe
  • 浏览: 1465544 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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');
  	});
 

  • 大小: 11 KB
分享到:
评论
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的一些基础功

相关推荐

    Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。

    Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...

    Lite-Ext WebPage的轻量级Ext.zip

    Lite-Ext 是一个针对Web页面的轻量级Ext库,主要设计用于简化前端JavaScript开发,尤其是在构建用户界面时。这个库可能包含了一系列优化过的组件和工具,以减少资源占用,提高网页性能。从标签"js 前端"我们可以推断...

    Ext Grid 导出Excel

    在IT领域,特别是Web开发中,Ext Grid是一个广泛使用的组件,用于展示和管理大量数据。它提供了丰富的功能,包括排序、筛选、分页等,使得数据的交互和操作变得非常便捷。当我们需要将Ext Grid中的数据导出为Excel...

    ext grid 导出 excel

    6. **性能优化**:对于大数据量的EXT Grid,直接导出可能导致浏览器卡顿。为了避免这种情况,可以考虑分批导出,或者使用服务器端导出,将计算和生成文件的工作交给服务器。 7. **兼容性问题**:由于不同的浏览器对...

    jq-extgrid v1.2 表格插件

    extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...

    一个很好的EXTGRID实例

    EXTGRID是EXT JS库中的一个核心组件,它在Web应用中用于展示数据并提供交互功能。EXT JS是一个基于JavaScript的富客户端框架,用于构建复杂的、数据驱动的Web应用程序。EXTGRID以其强大的数据网格功能,提供了丰富的...

    ext grid 合并行

    在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid ...

    ext grid json分页显示

    在IT领域,尤其是在Web开发中,"ext grid json分页显示"是一个常见的需求,它涉及到前端数据展示和后端数据交互的关键技术。本例中提到的解决方案是利用DWR(Direct Web Remoting)和EXT.js库来实现。下面将详细阐述...

    Ext Grid控件的高级应用

    本实例使用官方Ext3.1包 ...1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢

    Ext grid与树实例

    Ext Grid和Tree是Ext JS库中的两种重要组件,它们在Web应用开发中广泛用于数据展示和组织。Ext JS是一个强大的JavaScript框架,它提供了一系列高级UI组件,帮助开发者构建功能丰富的、交互性强的Web应用程序。 首先...

    ext grid网格控件实例

    3. **JSON数据源**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,EXT Grid通过`Ext.data.JsonStore`处理JSON数据。配置时需提供`url`和`root`属性,`root`定义了JSON对象中包含数据的键。JSON的...

    Ext grid 导出Excel

    Ext Grid允许用户筛选、排序、分页以及编辑数据,是企业级应用中常用的数据展示工具。 在Ext JS中,导出数据到Excel通常通过以下步骤实现: 1. **获取数据**:首先,你需要从Ext Grid中获取显示的所有数据。这可以...

    Ext grid 分页实例源码

    Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码

    ext grid数据绑定

    在EXT JS这个强大的JavaScript框架中,EXT Grid是一个非常重要的组件,用于展示大量结构化数据,并提供了丰富的交互功能。本文将深入探讨"EXT Grid数据绑定"这一主题,包括数据查找和如何将查找结果重新填充到Grid中...

    ext grid 显示数据

    9. **性能优化**: 对于大数据量的Grid,EXT JS提供了如buffered rendering和grouping等特性,提高滚动性能并优化用户体验。 10. **自定义行为和扩展**: EXT JS Grid允许开发者创建自定义的列类型、行模板、行选择...

    EXT grid导出EXCEL

    EXT Grid是一款基于JavaScript的强大的数据网格组件,广泛用于Web应用程序中展示、操作和管理大量结构化数据。它提供了丰富的功能,如排序、过滤、分页、编辑等,并且支持自定义列、行以及多种交互模式。在EXT Grid...

    Ext grid导出excel

    支持Ext3 Ext4导出excel,客户端导出表格,支持各种主流浏览器。

    Ext Grid表格的自动宽度及高度的实现

    在探讨“Ext Grid表格的自动宽度及高度的实现”这一主题时,我们深入解析如何在Ext JS框架下,利用其强大的Grid组件自适应容器尺寸,实现表格宽度与高度的自动调整。这一技术对于构建响应式、用户友好的界面至关重要...

    Ext grid panel 滚动条位置不变

    ### Ext grid panel 滚动条位置不变 在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前...

Global site tag (gtag.js) - Google Analytics