经过断断续续的编写,才完成了一个比较丑陋的演示
效果:
还请大家多批评指教
------------------------------------------------------------------------------------------------------------
准备请做CSS的朋友帮我整的漂亮一些
/*======简单的列表样式=======*/
table {border-collapse:collapse;}
.grid {width:80%;background-color:#FFF;}
.grid tbody tr td {border:1px solid #CBCFDB;}
.grid thead tr th {border:1px solid #CBCFDB;}
.grid tfoot tr td {padding:5 5 5 5px; text-align:right;font-size:12px;}
.txtcenter {text-align:center}
/*奇数行样式*/
.a {background-color:#EDEDED;}
/*偶数行样式*/
.b {background-color:#CCC;}
/*标题头样式兼浮动样式*/
.c {background-color:#686868;color:white;}
简单的Show一下代码
脚本导入:
<script type="text/javascript" src="js/pagingGrid.js"></script>
列表参数设置代码:
var config = {
pageSize : 5,
gridClass: 'grid',
headClass: 'c',
rowClass : ['a','b'],
remotingCallback : loadData,
loadPageCount : 10,
columns:[
{header:'<input type="checkbox" onclick="checkAll(this);"/>',
callback:function(){return "<input type=\"checkbox\" name=\"box\" onclick=\"getData(this,event);\"/>"},
fieldClass:'txtcenter', width:'10%'
},
{header:'名称', field:'name', width:'30%'},
{header:'性别', field:'gender', width:'30%'},
{header:'年龄', field:'age', width:'30%'}
],
rowEvents : {"onmouseover" : function(){this.setAttribute('oldClass',this.className);this.className = 'c';},
"onmouseout" : function(){this.className = this.getAttribute('oldClass');},
"onclick" : getRecord},
toolbar : 'size blank stat blank skip blank first pre next last'
}
列表对象生成:
var grid = new PagingGrid(config);
操作辅助方法:
function getRecord() {
var index = this.getAttribute("index");
alert('您点击的是:\n{\n\tname:' + grid.data[index]['name']
+ '\n\tgender:' + grid.data[index]['gender']
+ '\n\tage:' + grid.data[index]['age'] + '\n}');
}
function getData(o,evt) {
evt = evt || window.event;
evt.cancelBubble = true;
var index = o.parentNode.parentNode.getAttribute("index");
if(o.checked) alert('您选中了第' + (index+1) + '条记录:' + grid.data[index]['name']);
}
function checkAll(o) {
var boxes = document.getElementsByName("box");
for(var i = 0; i < boxes.length ; i++) {
boxes[i].checked = o.checked;
}
}
function loadData(seg) {
var data = Data.getData(seg * config.loadPageCount * config.pageSize,(seg + 1) * config.loadPageCount * config.pageSize);
grid.setDataSize(count);
grid.setData(data);
}
关键一步:
window.onload = function() {
Data.init(count); //虚拟数据
grid.bind("div");
//列表绑定到容器
}
以上是使用该分页脚本的演示代码,对应的演示页面和演示例子下载在http://czwlucky.814e.com
请大家多提建议,非常感谢
- 大小: 7.6 KB
分享到:
相关推荐
PagingGrid 可实现分页的vb控件
一个简单的Paging自定义分页范例 一个简单的Paging自定义分页范例 一个简单的Paging自定义分页范例 一个简单的Paging自定义分页范例 一个简单的Paging自定义分页范例 一个简单的Paging自定义分页范例
分页工具分页工具分页工具分页工具分页工具分页工具分页工具分页工具分页工具分页工具分页工具分页工具分页工具分页工具分页工具
分页工具类分页工具类分页工具类分页工具类分页工具类分页工具类分页工具类分页工具类分页工具类分页工具类分页工具类分页工具类分页工具类分页工具类
jQuery-Paging动态分页数据获取插件是一款动态数据获取并分页代码,分页切换时还带有好看的弹性动画效果。
动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页
page.java java分页工具类
java分页工具类 java分页工具类 java分页工具类 java分页工具类 java分页工具类 java分页工具类
提供一个可以公用的分页工具类,适用于各种分页
引入js文件 [removed][removed] [removed][removed] [removed][removed]
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
一个简单的分页工具类,包括模糊查询,上一页和下一页,
jquery 分页工具条,方便好用,要查询的话,需要2次提交action ,唯一的缺点吧
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
分页工具类。类似谷歌 百度的分页
jQuery 插件paging动态分页获取数据特效源码.zip
1 之前上传了dhtmlx的...因为这个版本已经很老了 所以在IE10或其他新浏览器中会有些变形 如果用新版本 这个分页库能不能继续使用只有自己再尝试了 希望这个对大家有用 ">1 之前上传了dhtmlx的官方demo上去 都很久了 ...
分页工具类、一些常用的分页格式、如常见的文字分页、论坛文字分页、论坛图片分页、
FLEX DATA GRID 分页的代码,上传上来给大家参考参考
ext2.0 grid 分页实例(php)