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

随机推荐

UVA 11922 Permutation Transformer（Splay Tree）
题目链接: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18902 [思路] 伸展树+打标记. 用伸展树维护这个序列,使得能 ...
Esxi 5.0下配置LSI SAS RAID卡
公司有几台服务器,安装的是ESXI5.0的虚拟机,原来使用的是普通的台式机,现在新购的专用服务器并安装的LSI 8708 SAS RAID卡(服务器自带的板载RAID卡ESXI不支持),现在要将虚拟机 ...
AE 3D摄像机工作原理
看了AE教程的3D可视化音频和序列法导入三维模型之后对于视频解析3D是有了更深的认识.很感谢AE在CS6之后加入了3D摄像机跟踪器的功能.它是通过摄像机跟踪反求来得到影片中的平面特征点.然后由用户指定 ...
Java菜鸟学习笔记--Exception篇(一):异常简介
什么是异常(Exception)? 简述: 在运行过程中,应用程序可能遭遇各种严重程度不同的问题.异常提供了一种在不弄乱程序的情况下检查错误的巧妙方式.它也提供了一种直接报告错误的机制. 不同类型异常 ...
[转]【基于zxing的编解码实战】精简Barcode Scanner篇
通过<[搞定条形码]zxing项目源码解读(2.3.0版本,Android部分)>的分析,现在可以实现最终目标了:精简Barcode Scanner并将其中的编码和解码分离为两个独立的部分 ...
用PHP迭代器来实现一个斐波纳契数列(转)
斐波纳契数列通常做法是用递归实现,当然还有其它的方法.这里现学现卖,用PHP的迭代器来实现一个斐波纳契数列,几乎没有什么难度,只是把类里的next()方法重写了一次.注释已经写到代码中,也是相当好理解 ...
Java中数组的初始化方式
Java中数组的初始化方式初始化方式有两种: 1.静态初始化:初始化时由程序猿显式指定每一个数组元素的初始值,由系统指定数组长度 2.动态初始化:初始化时由程序猿仅仅指定数组长度,由系统为数组 ...
MaxReceivedMessageSize :已超过传入消息(65536)的最大消息大小配额
做的windows应用程序(后台调用webservice),数据量大的时候,报错如下: System.ServiceModel.CommunicationException: 已超过传入消息(6553 ...
Linux Terminal 控制终端的使用
1. Open new Terminal:Ctrl + Alt + T 或者 Ctrl + Shift + N 2. Open Tab:Ctrl + Shift + T 3. Close Tab:Ct ...
PHP ServerPush <转>
http://www.cnblogs.com/hnrainll/archive/2013/05/07/3064874.html

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