[置顶] Lite-Ext 适合WebPage的轻量级Ext
在 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'); });