<!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  分页的更多相关文章
	

    
						
  1. jquery easy ui 学习 （7） TreeGrid Actions
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    2. 
								
  2. jquery easy ui 学习 （8）basic treegrid
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    3. 
						
  3. jquery easy ui 学习 （6） basic validatebox
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    4. 
						
  4. jquery easy ui 学习 （5） windowlayout
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    5. 
						
  5. jquery easy ui 学习 （4） window 打开之后 限制操纵后面元素属性
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    6. 
						
  6. jquery easy ui 学习 （3） window 限制在父类窗体内
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    7. 
						
  7. jquery easy ui 学习 （2） customtools window
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    8. 
						
  8. jquery easy ui 学习 （1）Basic Window
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    9. 
						
  9. JQuery Easy Ui （Tree树）详解（转）
		
    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. linux 防火墙 iptables实例讲解
			
    端口为例): 显示现有规则: iptables –L -n 清空现有规则表: iptables -F 黑名单:先允许所有数据包通过,后逐条添加黑名单规则. iptables –A INPUT–p tc ...
    
			
    2. 
						
  2. 全情投入是做好工作的基础——Leo鉴书39
			
    很多人都有:“内向的人则不擅长社交,只能会活得很封闭”的思想,于是不少内向的朋友要么认为只有扭曲自己的性格变得外向才能在社会上吃得开,才能很爽的行走职场:要么就决定完全封闭自己活在孤独之中,其实以上两 ...
    
			
    3. 
						
  3. Lucene 4.10.2开发示例
			
    这里面用的是比较新的Lucene4.10.2 做的一个实例.(lucene的索引不能太大,要不然效率会很低.大于1G的时候就必须考虑分布索引的问题) 先介绍一下Lucene的几个参数意义: Index ...
    
			
    4. 
						
  4. 关于 Head  First  SQL  中文版
			
    我想谈谈 我对于Head  First  SQL  中文版的一些看法 事实上关于我翻译的这个Head  First  SQL 中文版..我自觉得:的确翻译得非常烂.. 和翻译Head  First   ...
    
			
    5. 
						
  5. umlの用例图
			
    我的总结是在看完uml学习之后又參考了同学借的<uml和ooad高速入门>的思路,利用齿轮带动的原理进行.废话不多说了.首先分析一下类图和用例图的联系与差别. 类图 用例图 类class  ...
    
			
    6. 
						
  6. iOS：编译错误Undefined symbols for architecture i386: _OBJC_CLASS_$_XXX&quot;, referenced from: error
			
    Undefined symbols for architecture i386: _OBJC_CLASS_$_XXX", referenced from: error 这个意思为无法找到名为 ...
    
			
    7. 
						
  7. Linux 监控CPU 温度
			
      安装测试系统: 硬件:普通PC机, 软件:redhat linux as 4  2.6 .9 , 安装系统自带的lm_sensors-2.8.7-2.i386 你也可以从[url]http://w ...
    
			
    8. 
						
  8. Android进阶笔记02：Android 网络请求库的比较及实战(二)
			
    一.Volley        既然在android2.2之后不建议使用HttpClient,那么有没有一个库是android2.2及以下版本使用HttpClient,而android2.3及以上版本 ...
    
			
    9. 
						
  9. Java基础知识强化17：JAVA不可以将所覆盖的方法的访问权限变得比父类的小
			
    首先我们看一下下面的代码如下: interface I { void go(); } abstract class A implements I { } class C extends A { voi ...
    
			
    10. 
						
  10. Android（java）学习笔记230：服务（service）之绑定服务的细节
			
    绑定服务的细节 1. 如果onbind方法返回值是null,onServiceConnect方法就不会被调用: 2. 绑定的服务,在系统设置界面,正在运行条目是看不到的: 3. 绑定的服务,不求同时生 ...
    
			
    11.