- 浏览: 1434540 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
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 4458首先一句话:查bug的过程是痛苦的,结果是兴奋的。 ... -
mac chrome 标签效果实现
2009-12-10 19:28 2191google 发布了 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 2123[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
简朴树形菜单
2009-08-25 18:22 1658[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
Button In Extjs Style
2009-08-06 18:14 5740[置顶] 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 2107归属 [置顶] Lite-Ext 适 ... -
基于Ext-core 好玩的图片部分自由放大工具
2009-05-16 07:04 3234[置顶] Lite-Ext 适合WebPage的轻量级 ... -
TipLite 轻量级的Ext 提示
2009-05-09 21:34 2355[置顶] Lite-Ext 适合WebPage的轻 ... -
CalendarLite 轻量级的Ext 日历
2009-05-05 17:58 3661[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
ComboBoxLite - 基于Ext-core的自动补全
2009-04-28 19:03 3641[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
MarqueeLite - 基于Ext-core的marquee
2009-04-28 00:28 1933归属 [置顶] Lite-Ext 适合W ... -
WindowLite 轻量级的Ext窗口
2009-04-24 19:19 4153归属 [置顶] Lite-Ext ... -
Lite-Ext 适合WebPage的轻量级Ext
2009-04-23 19:58 6256在开发中经常需要extjs般酷炫的效果,又顾及于extjs臃肿 ... -
TabPanelLite 轻量级的Ext标签
2009-04-23 19:58 2337[置顶] Lite-Ext 适合WebPage的轻量级Ext ... -
构建标准web 之 FormLite
2009-04-20 17:18 2204[置顶] Lite-Ext 适合WebPage的轻量级 ... -
三级菜单选择器
2009-03-26 01:41 3273[置顶] Lite-Ext 适合WebPage的轻 ...
相关推荐
Lite-Ext WebPage的轻量级Ext.zip
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
本实例使用官方Ext3.1包 ...1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
支持Ext3 Ext4导出excel,客户端导出表格,支持各种主流浏览器。
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
Ext grid panel 滚动条位置不变,适用于实时数据的刷新
WindowLite 轻量级的Ext窗口.zip
CalendarLite 轻量级的Ext日历.zip
EXT GRID使用EXT GRID使用 EXT GRID使用EXT GRID使用
NULL 博文链接:https://damen.iteye.com/blog/946039
用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助
Ext Grid表格的自动宽度及高度的实现
一个完整的ext中grid与tree的使用,是很好的一个学习例子.
官方例子 Ext grid filter
EXT grid导出EXCEL,有事例,下载后直接可用
一个EXT GRID的实例。是一个人新增人员的BS界面形式的程序。很漂亮的界面风格,很人性化的功能支持。