- 浏览: 1465544 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
[置顶] Lite-Ext 适合WebPage的轻量级Ext
利用ext core重新简化实现 Ext.Grid,单用的话更节省网络带宽。
效果演示:这里
实现要点:
1.去除 ext grid 复杂的表格控制,直接用 table 实现
2.偷取ext 分页button素材,利用浮动重新实现,特效简化 (090531重新按照extjs分页思路实现特效)
在 google code
持续更新,这里停止
/*
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的数据进行分组显示。
*/
//可以初始设定数据
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');
});
- GridLite1.0.zip (57 KB)
- 下载次数: 49
- GridLite1.1.zip (57.1 KB)
- 下载次数: 37
- GridLitev1.2.zip (57.8 KB)
- 下载次数: 39
- GridLite1.5.zip (57.9 KB)
- 下载次数: 29
- GridLite1.5.1.zip (58 KB)
- 下载次数: 49
- GridLite_1.6.zip (54.9 KB)
- 下载次数: 27
- GridLite_2.0.zip (58.1 KB)
- 下载次数: 17
- GridLite_2.0.1.zip (57.9 KB)
- 下载次数: 20
- GridLite_2.0.2.zip (58 KB)
- 下载次数: 15
- GridLite_2.2.zip (60.1 KB)
- 下载次数: 14
- GridLite_2.3.zip (66.6 KB)
- 下载次数: 15
- GridLite_2.3.1.zip (67.8 KB)
- 下载次数: 24
- GridLite_2.4.zip (72.7 KB)
- 下载次数: 19
- GridLite_2.4.1.zip (72.9 KB)
- 下载次数: 13
- GridLite_2.4.2.zip (72.5 KB)
- 下载次数: 11
- GridLite_2.4.3.zip (76.7 KB)
- 下载次数: 9
- GridLite_2.5.zip (77.1 KB)
- 下载次数: 20
- GridLite_2.5.5.zip (80.6 KB)
- 下载次数: 198
评论
长相和grid基本一样
相当不错,有时候就只是用Grid的一些基础功
O(∩_∩)O谢谢鼓励,我也是非常喜欢ext,希望在web page领域它也有一席之地,而不是仅仅占有大部分人认为的内网企业应用
发表评论
-
ie6下怪异的radio
2010-04-13 19:55 4515首先一句话:查bug的过程是痛苦的,结果是兴奋的。 ... -
mac chrome 标签效果实现
2009-12-10 19:28 2242google 发布了 mac 版的chrome,据说增加了几万 ... -
google code svn mine-type
2009-10-26 16:18 0google code svn mine-type c ... -
compare
2009-10-14 17:26 0compare -
可折叠的面板
2009-08-27 10:19 2173[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
简朴树形菜单
2009-08-25 18:22 1719[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
Button In Extjs Style
2009-08-06 18:14 5795[置顶] Lite-Ext 适合WebPage的轻量级Ex ... -
Lite-Ext(20090723).zip
2009-07-23 23:36 0Lite-Ext(20090723).zip -
SliderLite - Extjs-core实现的淘宝首页渐隐版Slider
2009-06-16 17:48 2158归属 [置顶] Lite-Ext 适 ... -
基于Ext-core 好玩的图片部分自由放大工具
2009-05-16 07:04 3290[置顶] Lite-Ext 适合WebPage的轻量级 ... -
TipLite 轻量级的Ext 提示
2009-05-09 21:34 2395[置顶] Lite-Ext 适合WebPage的轻 ... -
CalendarLite 轻量级的Ext 日历
2009-05-05 17:58 3728[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
ComboBoxLite - 基于Ext-core的自动补全
2009-04-28 19:03 3686[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
MarqueeLite - 基于Ext-core的marquee
2009-04-28 00:28 1980归属 [置顶] Lite-Ext 适合W ... -
WindowLite 轻量级的Ext窗口
2009-04-24 19:19 4223归属 [置顶] Lite-Ext ... -
Lite-Ext 适合WebPage的轻量级Ext
2009-04-23 19:58 6307在开发中经常需要extjs般酷炫的效果,又顾及于extjs臃肿 ... -
TabPanelLite 轻量级的Ext标签
2009-04-23 19:58 2391[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
构建标准web 之 FormLite
2009-04-20 17:18 2284[置顶] Lite-Ext 适合WebPage的轻量级 ... -
三级菜单选择器
2009-03-26 01:41 3352[置顶] Lite-Ext 适合WebPage的轻 ...
相关推荐
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
Lite-Ext 是一个针对Web页面的轻量级Ext库,主要设计用于简化前端JavaScript开发,尤其是在构建用户界面时。这个库可能包含了一系列优化过的组件和工具,以减少资源占用,提高网页性能。从标签"js 前端"我们可以推断...
在IT领域,特别是Web开发中,Ext Grid是一个广泛使用的组件,用于展示和管理大量数据。它提供了丰富的功能,包括排序、筛选、分页等,使得数据的交互和操作变得非常便捷。当我们需要将Ext Grid中的数据导出为Excel...
6. **性能优化**:对于大数据量的EXT Grid,直接导出可能导致浏览器卡顿。为了避免这种情况,可以考虑分批导出,或者使用服务器端导出,将计算和生成文件的工作交给服务器。 7. **兼容性问题**:由于不同的浏览器对...
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
EXTGRID是EXT JS库中的一个核心组件,它在Web应用中用于展示数据并提供交互功能。EXT JS是一个基于JavaScript的富客户端框架,用于构建复杂的、数据驱动的Web应用程序。EXTGRID以其强大的数据网格功能,提供了丰富的...
在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid ...
在IT领域,尤其是在Web开发中,"ext grid json分页显示"是一个常见的需求,它涉及到前端数据展示和后端数据交互的关键技术。本例中提到的解决方案是利用DWR(Direct Web Remoting)和EXT.js库来实现。下面将详细阐述...
本实例使用官方Ext3.1包 ...1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢
Ext Grid和Tree是Ext JS库中的两种重要组件,它们在Web应用开发中广泛用于数据展示和组织。Ext JS是一个强大的JavaScript框架,它提供了一系列高级UI组件,帮助开发者构建功能丰富的、交互性强的Web应用程序。 首先...
3. **JSON数据源**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,EXT Grid通过`Ext.data.JsonStore`处理JSON数据。配置时需提供`url`和`root`属性,`root`定义了JSON对象中包含数据的键。JSON的...
Ext Grid允许用户筛选、排序、分页以及编辑数据,是企业级应用中常用的数据展示工具。 在Ext JS中,导出数据到Excel通常通过以下步骤实现: 1. **获取数据**:首先,你需要从Ext Grid中获取显示的所有数据。这可以...
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
在EXT JS这个强大的JavaScript框架中,EXT Grid是一个非常重要的组件,用于展示大量结构化数据,并提供了丰富的交互功能。本文将深入探讨"EXT Grid数据绑定"这一主题,包括数据查找和如何将查找结果重新填充到Grid中...
9. **性能优化**: 对于大数据量的Grid,EXT JS提供了如buffered rendering和grouping等特性,提高滚动性能并优化用户体验。 10. **自定义行为和扩展**: EXT JS Grid允许开发者创建自定义的列类型、行模板、行选择...
EXT Grid是一款基于JavaScript的强大的数据网格组件,广泛用于Web应用程序中展示、操作和管理大量结构化数据。它提供了丰富的功能,如排序、过滤、分页、编辑等,并且支持自定义列、行以及多种交互模式。在EXT Grid...
支持Ext3 Ext4导出excel,客户端导出表格,支持各种主流浏览器。
在探讨“Ext Grid表格的自动宽度及高度的实现”这一主题时,我们深入解析如何在Ext JS框架下,利用其强大的Grid组件自适应容器尺寸,实现表格宽度与高度的自动调整。这一技术对于构建响应式、用户友好的界面至关重要...
### Ext grid panel 滚动条位置不变 在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前...