<!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. ASP.NET网站文件上传下载功能
			
    if (!IsPostBack) { if (Application["RaNum"] == null) { Random ra = new Random(); Applicati ...
    
			
    2. 
						
  2. VS插件 热
			
    1. AnkhSVN - Subversion SCC Providerhttp://ankhsvn.open.collab.net/ AnkhSVN是一个VS的Subversion 源代码管理提供者 ...
    
			
    3. 
						
  3. 【转】C/C++ 内存对齐
			
    [转自]http://wenku.baidu.com/view/8eaaa26925c52cc58bd6bed2.htmlC/C++内存对齐 一.什么是字节对齐,为什么要对齐? 现代计算机中内存空间都 ...
    
			
    4. 
						
  4. rpm常用操作
			
    1.查询.检查软件包 rpm {-q|--query} [select-options] [query-options] rpm {-V|--verify} [select-options] [ver ...
    
			
    5. 
						
  5. TXT四则运算计算器 后日谈
			
    经过了软件工程第一个个人项目——<<四则运算器>>的开发后,对软件开发有了新的认识.题目中并没有明确说明对小数和负数是否应该提供支持.在第一个项目结束后,第二个项目则是针对上一 ...
    
			
    6. 
						
  6. Threading Module源码概述(二)
			
    在threading 模块中,提供了列举当前所有子线程的操作.threading.enumerate.这个操作很简单,就是将_active和_limbo中维护的线程集合的信息输出. def enume ...
    
			
    7. 
						
  7. C++中的类和对象(一)
			
    一,类的概念及封装 1.什么是封装 第一层含义:封装是面向对象程序设计最基本的特性.把数据(属性)和函数(方法)合成一个整体,这在计算机世界中是用类和对象实现的.(把属性和方法进行封装) 第二层含义: ...
    
			
    8. 
						
  8. 使用jqMobi开发app基础：Badge的使用
			
    显示效果: 红色的部分就是Badge,能够用来显示数量或者是其它的信息. 使用事实上非常easy,  $.ui.updateBadge("#" + id, res.Msg, &qu ...
    
			
    9. 
						
  9. [PWA] 0. Introduce to Offline First
			
    Why offline first? Imagin you are visiting a website, it is fine if wifi connection is good. It migh ...
    
			
    10. 
						
  10. 谈论C++当然结果
			
    C++编程课程的考试已经结束.这是第一次OJCBT.摸着石头过河,考试没有给学生理解的说法.现在尘埃落定.一些交代. 先说大的成就的治疗原则.事实上,有很多的纠结. 按理说,合格的太,无法挂.但实际情 ...
    
			
    11.