<!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. Search Insert Position——LeetCode
			
    Given a sorted array and a target value, return the index if the target is found. If not, return the ...
    
			
    2. 
						
  2. NOI题库192 生日蛋糕
			
    192:生日蛋糕 总时间限制: 5000ms 内存限制: 65536kB 描述 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i ...
    
			
    3. 
						
  3. [Git] MAC上Git初探
			
    1.基本设置,包括用户名.邮箱.编辑工具.查看设置.帮助等 $ git config --global user.name "John Doe" $ git config --gl ...
    
			
    4. 
						
  4. poj 1269 水题
			
    题目链接:http://poj.org/problem?id=1269 #include<cstdio> #include<cstring> #include<cmath ...
    
			
    5. 
						
  5. [置顶] SpecDD系列：6个确保您执行“充分”QA测试的技巧
			
    确保团队执行 “足够的” 测试覆盖面是非常困难的,尤其是对敏捷开发团队来说.对于初学者而言,一个开发Sprint中要完成多少的质量保证工作才够呢?我们知道,敏捷的标准是在开发Sprint结束的时候要完 ...
    
			
    6. 
						
  6. opencv_形态学结构化元素对形态学图像处理的影响
			
    场景 对大米预处理之后的二值图像做开运算再做canny边缘检测. python代码: # kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE,(3 ...
    
			
    7. 
						
  7. 你应该知道的8个Java牛人
			
    简单介绍一下8个Java牛人,他们为Java社区,创建了框架(framework),产品或者是写书,影响甚至改变了Java开发的方法 8.Tomcat创始人 James Duncan Davidson ...
    
			
    8. 
						
  8. 再探LIS
			
    昨天讲课的时候突然想起来LIS还有一个东西没搞懂. 又去研究了下. LIS问题就是要求一个序列中最长不下降或上升子序列,而此问题应用较广,例如很多题会有这样的条件 对于i,j如果他们可以同时选取,则必 ...
    
			
    9. 
						
  9. Prefix.pch的作用和用法
			
    一般用于放置宏,省去xcode编译的时间 Hello World_Prefix.pch:扩展名.pch表示"precompiled header",这是一个你工程要用到的来自于外部 ...
    
			
    10. 
						
  10. Android ExpandableListView实例Demo
			
    前几篇文章介绍了Listview.但在实际开发中也常常会用到多层的Listview来展示数据,比方qq中的好友展示,所以这张来了解一下ExpandableListview.基本思想与Listview大 ...
    
			
    11.