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

随机推荐

暴力求解——POJ 3134Power Calculus
Description Starting with x and repeatedly multiplying by x, we can compute x31 with thirty multipli ...
openStack CentOS虚拟桌面iptables初始化配置
Appium移动自动化测试（三）--安装Android模拟器（转）
Appium移动自动化测试(三)--安装Android模拟器 2015-06-08 10:33 by 虫师, 30828 阅读, 9 评论, 收藏, 编辑当Android SDK安装完成之后,并不意 ...
DCL双检查锁机制实现的线程安全的单例模式
public class MyObject { private volatile static MyObject myObject; private MyObject(){} public stati ...
如何下载coursera视频
国内观看Coursera非常卡顿,经常播放到一半就卡死了,不知道什么原因.因此只能想办法下载下来之后再看. Github上有一个脚本点击打开链接,提供整门课程的下载服务.用着还是非常方便的,使用方法如 ...
HDU--2040
亲和数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
android string.xml前后加空格的技巧
方法1: <string name="password">密码</string>&#160 这个就代表着空格. 方法2:用\u0020代表空 ...
C++发送邮件和附件
c++socketnulldelete服务器stream 头文件 /**************************************************************** ...
noi 7221 拯救公主（状态压缩+bfs）
/* 这题实在调糊了借鉴的题解的一些判断方法位运算大法好 - - 因为要集齐所有的宝石所以状态压缩一下 f[i][j][s]将s化为二进制每一0表示该宝石没有 1表示该宝石有有:到(i,j)这 ...
mvc存储Cookie和读取Cookie方法
mvc存储Cookie和读取Cookie方法: //存储 HttpCookie cookie = new HttpCookie("User"); System.Text.Encod ...

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