jquery easy ui 学习 （9）Pagination in TreeGrid 分页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Client Side Pagination in TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Client Side Pagination in TreeGrid</h2>
<p>This sample shows how to implement client side pagination in TreeGrid.</p>
<div style="margin:20px 0;"></div>
<table id="tg" class="easyui-treegrid" title="Client Side Pagination" style="width:700px;height:250px"
data-options="
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
url: 'treegrid_data2.json',
method: 'get',
idField: 'id',
treeField: 'name',
loadFilter: pagerFilter,
pagination: true,
pageSize: 2,
pageList: [2,5,10]
">
<thead>
<tr>
<th data-options="field:'name',width:180">Task Name</th>
<th data-options="field:'persons',width:60,align:'right'">Persons</th>
<th data-options="field:'begin',width:80">Begin Date</th>
<th data-options="field:'end',width:80">End Date</th>
<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function formatProgress(value){
if (value){
var s = '<div style="width:100%;border:1px solid #ccc">' +
'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
'</div>';
return s;
} else {
return '';
}
} function pagerFilter(data){
if ($.isArray(data)){ // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var state = dg.data('treegrid');
var opts = dg.treegrid('options');
var pager = dg.treegrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.treegrid('loadData',data);
}
});
if (!data.topRows){
data.topRows = [];
data.childRows = [];
for(var i=0; i<data.rows.length; i++){
var row = data.rows[i];
row._parentId ? data.childRows.push(row) : data.topRows.push(row);
}
data.total = (data.topRows.length);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = $.extend(true,[],data.topRows.slice(start, end).concat(data.childRows));
return data;
}
</script>
</body>
</html>
json 文件
{"total":,"rows":[
{"id":,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":,"iconCls":"icon-ok"},
{"id":,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":,"_parentId":,"state":"closed"},
{"id":,"name":"Database","persons":,"begin":"3/4/2010","end":"3/6/2010","progress":,"_parentId":},
{"id":,"name":"UML","persons":,"begin":"3/7/2010","end":"3/8/2010","progress":,"_parentId":},
{"id":,"name":"Export Document","persons":,"begin":"3/9/2010","end":"3/10/2010","progress":,"_parentId":},
{"id":,"name":"Coding","persons":,"begin":"3/11/2010","end":"3/18/2010","progress":},
{"id":,"name":"Testing","persons":,"begin":"3/19/2010","end":"3/20/2010","progress":}
],"footer":[
{"name":"Total Persons:","persons":,"iconCls":"icon-sum"}
]}
jquery easy ui 学习 （9）Pagination in TreeGrid 分页的更多相关文章
- jquery easy ui 学习 （7） TreeGrid Actions
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery easy ui 学习 （8）basic treegrid
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery easy ui 学习 （6） basic validatebox
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery easy ui 学习 （5） windowlayout
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery easy ui 学习 （4） window 打开之后 限制操纵后面元素属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery easy ui 学习 （3） window 限制在父类窗体内
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery easy ui 学习 （2） customtools window
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery easy ui 学习 （1）Basic Window
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JQuery Easy Ui （Tree树）详解（转）
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
随机推荐
- 【解决办法】糟糕，我的电脑只有IE64位浏览器能上网，其他软件都上不了网
最近两周在三班四班有5位同学电脑7次出现网络故障,表现为能连上锐捷.DNS正常却不能上网,其中在我自己的计算机上就发生了2次.上网搜集并整理了以下资料,供大家参考.请直接参见[解决办法]. [网上 ...
- VS2010如何生成release文件
点击生成-->配置管理器-->活动解决方案配置下拉菜单中选择release就行了,最后再编译一下就在相应的目录下生成了
- Binary Tree Inorder Traversal ——LeetCode
Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary tre ...
- Hibernate配置文件中hiberante.hbm2ddl.auto四个参数的配置
我们在搭建环境的时候,在配置文件中有一个属性标签为: <property name="hibernate.hbm2ddl.auto"> </propert ...
- [Locked] Smallest Rectangle Enclosing Black Pixels
An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. The black ...
- 谈NOT IN和Exists
表1: test001 select * from test001
- tyvj1728 普通平衡树
为了彻底理解树状数组,试着用树状数组做了下普通平衡树 而树状数组只能离线做,或者保证值的大小在数组可承受的范围内也是可以的,因为要求离线是因为必须事前对所有数离散化. 然后我们看刘汝佳蓝书上的图 利用 ...
- 深入理解Android 自定义attr Style styleable以及其应用
相信每一位从事Android开发的猿都遇到过需要自己去自定义View的需求,如果想通过xml指定一些我们自己需要的参数,就需要自己声明一个styleable,并在里面自己定义一些attr属性,这个过程 ...
- LayoutInflater和inflate()方法的使用方法
public static LayoutInflaterfrom(Context context) { LayoutInflaterLayoutInflater = (LayoutInflater)c ...
- 浅析mysql 共享表空间与独享表空间以及他们之间的转化
innodb这种引擎,与MYISAM引擎的区别很大.特别是它的数据存储格式等.对于innodb的数据结构,首先要解决两个概念性的问题: 共享表空间以及独占表空间.什么是共享表空间和独占表空间共 ...