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 ...

随机推荐

Contains Duplicate III —— LeetCode
Given an array of integers, find out whether there are two distinct indices i and j in the array suc ...
#345 div2 D. Image Preview
Vasya's telephone contains n photos. Photo number 1 is currently opened on the phone. It is allowed ...
深入剖析Java中的自动装箱和拆箱过程
深入剖析Java中的装箱和拆箱自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若干问题.本文先讲述装箱和拆箱最基本的东西,再来看一下面试笔试中经常遇到的与装箱 ...
web.xml基本配置描述
先加载一段写好的web.xml: <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2. ...
SQL中的case when then else end用法
--简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END --Case搜索函数 CASE WHEN sex = '1' ...
缓存的概念（反向代理、CDN）
缓存在我们的日常开发中随处可见,理解缓存的概念,本质就是就近处理,比如很多热点数据,访问量很多,我们需要使用,就可以把它缓存起来,然后下次访问就不用再去数据库的去查询了,而是直接使用缓存,现在说说大 ...
Protocol buffer序列化及其在微信蓝牙协议中的应用
Protocol buffer是Google出品的一种轻便高效的结构化数据存储格式,可对结构化数据进行序列化,并具有语言无关.平台无关等特点,在通信协议和数据存储等领域已经得到广泛的应用.目前其已经提 ...
STL源码剖析—stl_config
操作系统:centos 6.4STL源码版本:3.3 前言: 要看一个项目的源码,首先要选中切入点. 那么在sgi stl 标准库中,其切入点是什么呢? 答案是:stl_config ...
[转] Linux中gcc，g++常用编译选项
http://blog.sina.com.cn/s/blog_5ff2a8a201011ro8.html gcc/g++ 在执行编译时,需要4步 1.预处理,生成.i的文件[使用-E参数] 2.将预处 ...
NSPredicate查询日期的问题
查询日期的时候日期可以根据参数传进去,但不能在字符串中传参后在作为查询条件简单比较以下两段代码 NSDate* date1=[NSDate date]; NSDate* date2=date1; r ...

jquery easy ui 学习 （9）Pagination in TreeGrid 分页

jquery easy ui 学习 （9）Pagination in TreeGrid 分页的更多相关文章

随机推荐

热门专题

jquery easy ui 学习（9）Pagination in TreeGrid 分页

jquery easy ui 学习（9）Pagination in TreeGrid 分页的更多相关文章