EasyUI Forum
May 07, 2024, 02:52:33 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Pagination and edit client side (treegrid and datagrid)  (Read 7809 times)
lloyd
Newbie
*
Posts: 29


View Profile Email
« on: October 19, 2015, 09:24:52 AM »

I cannot get Pagination to use the modified data in the datagrid.

I edit the datagrid data (datagrid('updateRow')) and do pagination (clientPaging) the old (unmodified) data is used.

If I force the pager by doing to reload after calling datagrid('updateRow') then pagination not data is displayed and no debug errors.

Code:
                        $('#selections-datagrid').datagrid('updateRow', {
                            index: selectedIndex,
                            row: {
                                NAME: param.NAME,
                                ISPRIVATE: (param.ISPRIVATE === undefined ? 'N' : param.ISPRIVATE)
                            }
                        });
                       
                        var data = $('#selections-datagrid').datagrid('getData');
                        $('#selections-datagrid').datagrid('loadData', data);
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: October 19, 2015, 11:59:25 PM »

Please refer to:
http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Client%20Side%20Pagination
http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=Client%20Side%20Pagination
Logged
lloyd
Newbie
*
Posts: 29


View Profile Email
« Reply #2 on: October 20, 2015, 09:06:03 AM »

I believe I have a solution. I just need a bit more time testing.  Smiley

The modified data needs to replace the data stored in state.allRows when pagerFilter() and onSelectPage are called.  Wink
« Last Edit: October 20, 2015, 12:23:50 PM by lloyd » Logged
lloyd
Newbie
*
Posts: 29


View Profile Email
« Reply #3 on: October 21, 2015, 05:43:23 AM »

Here is my solution:-

Code:
(function($){
    // Pagination
    function pagerTreegridFilter(data) {
        if ($.isArray(data)) {
            data = { 
                total: data.length, 
                rows: data 
            } 
        }

        var tg = $(this);
        var state = tg.data('treegrid');
        var opts = tg.treegrid('options'); 
        var pager = tg.treegrid('getPager');
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); 
        var end = start + parseInt(opts.pageSize); 
        var topRows = [];
        var childRows = [];

        pager.pagination({
            onSelectPage:function(pageNum, pageSize) {
                opts.pageNumber = pageNum; 
                opts.pageSize = pageSize; 
                pager.pagination('refresh',{ 
                    pageNumber: pageNum,
                    pageSize: pageSize,
                });
               
                topRows = [];
                childRows = [];
               
                $.map(data.rows, function(row) {
                    row._parentId ? childRows.push(row) : topRows.push(row);
                });

                $.extend(true, state.allRows.slice(start, end), topRows.concat(childRows));
                tg.treegrid('loadData', state.allRows);
            } 
        });

        opts.pageNumber = pager.pagination('options').pageNumber || 1;

        if (state.allRows) {
            topRows = [];
            childRows = [];
           
            $.map(data.rows, function(row) {
                row._parentId ? childRows.push(row) : topRows.push(row);
            });

            $.extend(true, state.allRows.slice(start, end), topRows.concat(childRows));
        }
        else {
            state.allRows = data.rows;
        }

        if (!opts.remoteSort && opts.sortName) {
            var names = opts.sortName.split(',');
            var orders = opts.sortOrder.split(',');
            state.allRows.sort(function(r1,r2) {
                var r = 0;
                for (var i=0; i<names.length; i++) {
                    var sn = names[i];
                    var so = orders[i];
                    var col = tg.treegrid('getColumnOption', sn);
                    var sortFunc = col.sorter || function(a,b) {
                        return a===b ? 0 : (a>b?1:-1);
                    };

                    r = sortFunc(r1[sn], r2[sn]) * (so==='asc'?1:-1);
                    if (r !== 0){
                        return r;
                    }
                }
                return r;
            });
        }

        topRows = [];
        childRows = [];

        $.map(state.allRows, function(row) {
            row._parentId ? childRows.push(row) : topRows.push(row);
        });

        data.total = topRows.length;
        data.rows = $.extend(true, [], topRows.slice(start, end).concat(childRows));
        return data;
    }

    var appendTreegridMethod = $.fn.treegrid.methods.append;
    var removeTreegridMethod = $.fn.treegrid.methods.remove;
    var loadTreegridDataMethod = $.fn.treegrid.methods.loadData;

    $.extend($.fn.treegrid.methods, {
        clientPaging: function(jq){
            return jq.each(function() {
                var state = $(this).data('treegrid');
                var opts = state.options;
                opts.loadFilter = pagerTreegridFilter;
                var onBeforeLoad = opts.onBeforeLoad;

                opts.onBeforeLoad = function(row,param) {
                    state.allRows = null;
                    return onBeforeLoad.call(this, row, param);
                };

                $(this).treegrid('loadData', state.data);
                if (opts.url){
                    $(this).treegrid('reload');
                }
            });
        },
        loadData: function(jq, data){
            jq.each(function() {
                $(this).data('treegrid').allRows = null;
            });
            return loadTreegridDataMethod.call($.fn.treegrid.methods, jq, data);
        },
        append: function(jq, param) {
            return jq.each(function() {
                var state = $(this).data('treegrid');
                if (state.options.loadFilter === pagerTreegridFilter) {
                    $.map(param.data, function(row) {
                        row._parentId = row._parentId || param.parent;
                        state.allRows.push(row);
                    });
                    $(this).treegrid('loadData', state.allRows);
                }
                else {
                    appendTreegridMethod.call($.fn.treegrid.methods, $(this), param);
                }
            });
        },
        remove: function(jq, id) {
            return jq.each(function() {
                if ($(this).treegrid('find', id)) {
                    removeTreegridMethod.call($.fn.treegrid.methods, $(this), id);
                }
                var state = $(this).data('treegrid');
                if (state.options.loadFilter === pagerTreegridFilter) {
                    for(var i=0; i<state.allRows.length; i++) {
                        if (state.allRows[i][state.options.idField] === id) {
                            state.allRows.splice(i,1);
                            break;
                        }
                    }
                    $(this).treegrid('loadData', state.allRows);
                }
            });
        },
        getAllRows: function(jq) {
            return jq.data('treegrid').allRows;
        }
    });

    function pagerDatagridFilter(data) {
        if ($.isArray(data)) {
            data = {
                total: data.length,
                rows: data
            };
        }

        var dg = $(this);
        var state = dg.data('datagrid');
        var opts = dg.datagrid('options');
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
       
        if (state.allRows) {
            $.extend(true, state.allRows.slice(start, end), data.rows);
        }
        else {
            state.allRows = data.rows;
        }

        if (!opts.remoteSort && opts.sortName) {
            var names = opts.sortName.split(',');
            var orders = opts.sortOrder.split(',');

            state.allRows.sort(function(r1,r2) {
                var r = 0;
                for(var i=0; i<names.length; i++) {
                    var sn = names[i];
                    var so = orders[i];
                    var col = dg.datagrid('getColumnOption', sn);

                    var sortFunc = col.sorter || function(a,b) {
                        return a===b ? 0 : (a>b?1:-1);
                    };

                    r = sortFunc(r1[sn], r2[sn]) * (so==='asc'?1:-1);

                    if (r !== 0) {
                        return r;
                    }
                }
                return r;
            });
        }

        data.rows = $.extend(true, [], state.allRows.slice(start, end));
        return data;
    }

    var loadDatagridDataMethod = $.fn.datagrid.methods.loadData;

    $.extend($.fn.datagrid.methods, {
        clientPaging: function(jq){
            return jq.each(function() {
                var dg = $(this);
                var state = dg.data('datagrid');
                var opts = state.options;
                opts.loadFilter = pagerDatagridFilter;
                var onBeforeLoad = opts.onBeforeLoad;
                opts.onBeforeLoad = function(param) {
                    state.allRows = null;
                    return onBeforeLoad.call(this, param);
                };
                dg.datagrid('getPager').pagination({
                    onSelectPage:function(pageNum, pageSize) {
                        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
                        var end = start + parseInt(opts.pageSize);
                        var newData = dg.datagrid('getData');
                       
                        if (parseInt(opts.pageSize) === newData.rows.length) {
                            $.extend(true, state.allRows.slice(start, end), newData.rows);
                        }

                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        $(this).pagination('refresh', {
                            pageNumber:pageNum,
                            pageSize:pageSize
                        });

                        dg.datagrid('loadData', state.allRows);
                    }
                });
                $(this).datagrid('loadData', state.data);
                if (opts.url){
                    $(this).datagrid('reload');
                }
            });
        },
        loadData: function(jq, data){
            jq.each(function() {
                $(this).data('datagrid').allRows = null;
            });
            return loadDatagridDataMethod.call($.fn.datagrid.methods, jq, data);
        },
        getAllRows: function(jq){
            return jq.data('datagrid').allRows;
        }
    });
})(jQuery);
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!