Title: Pagination and edit client side (treegrid and datagrid)
Post by: lloyd 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. $('#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);
Title: Re: Pagination and edit client side (treegrid and datagrid)
Post by: stworthy 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
Title: Re: Pagination and edit client side (treegrid and datagrid)
Post by: lloyd on October 20, 2015, 09:06:03 AM
I believe I have a solution. I just need a bit more time testing. :)
The modified data needs to replace the data stored in state.allRows when pagerFilter() and onSelectPage are called. ;)
Title: Re: Pagination and edit client side (treegrid and datagrid)
Post by: lloyd on October 21, 2015, 05:43:23 AM
Here is my solution:- (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);
|