Title: [Solved] Treegrid with client pagination and filter Post by: saurabh on February 08, 2017, 12:29:00 PM Hi all ... I am new to easyUI treegrid. I am trying to create treegrid with client side pagination and client side filtering. I have written following code as shown below. here client pagination is working but filter is not working. I have downloaded recent 'datagrid-filter.js' . please help me ! thanks in advance!
<!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="css/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="css/themes/icon.css"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script type="text/javascript" src="datagrid-filter.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" 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', pagination: true, remoteFilter: false, 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> </tr> </thead> </table> <script type="text/javascript"> (function($){ function pagerFilter(data){ if ($.isArray(data)){ // is array data = { total: data.length, rows: data } } var target = this; var tg = $(target); var state = tg.data('treegrid'); var opts = tg.treegrid('options'); if (!state.allRows){ 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; var so = orders; var col = $(target).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; }); } var topRows = []; var childRows = []; $.map(state.allRows, function(row){ row._parentId ? childRows.push(row) : topRows.push(row); row.children = null; }); data.total = topRows.length; var pager = tg.treegrid('getPager'); pager.pagination('refresh', { total: data.total, pageNumber: opts.pageNumber }); opts.pageNumber = pager.pagination('options').pageNumber || 1; var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = topRows.slice(start, end).concat(childRows); return data; } var appendMethod = $.fn.treegrid.methods.append; var removeMethod = $.fn.treegrid.methods.remove; var loadDataMethod = $.fn.treegrid.methods.loadData; $.extend($.fn.treegrid.methods, { clientPaging: function(jq){ return jq.each(function(){ var tg = $(this); var state = tg.data('treegrid'); var opts = state.options; opts.loadFilter = pagerFilter; var onBeforeLoad = opts.onBeforeLoad; opts.onBeforeLoad = function(row,param){ state.allRows = null; return onBeforeLoad.call(this, row, param); } var pager = tg.treegrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); tg.treegrid('loadData',state.allRows); } }); tg.treegrid('loadData', state.data); if (opts.url){ tg.treegrid('reload'); } }); }, loadData: function(jq, data){ jq.each(function(){ $(this).data('treegrid').allRows = null; }); return loadDataMethod.call($.fn.treegrid.methods, jq, data); }, append: function(jq, param){ return jq.each(function(){ var state = $(this).data('treegrid'); if (state.options.loadFilter == pagerFilter){ $.map(param.data, function(row){ row._parentId = row._parentId || param.parent; state.allRows.push(row); }); $(this).treegrid('loadData', state.allRows); } else { appendMethod.call($.fn.treegrid.methods, $(this), param); } }) }, remove: function(jq, id){ return jq.each(function(){ if ($(this).treegrid('find', id)){ removeMethod.call($.fn.treegrid.methods, $(this), id); } var state = $(this).data('treegrid'); if (state.options.loadFilter == pagerFilter){ for(var i=0; i<state.allRows.length; i++){ if (state.allRows[state.options.idField] == id){ state.allRows.splice(i,1); break; } } $(this).treegrid('loadData', state.allRows); } }) }, getAllRows: function(jq){ return jq.data('treegrid').allRows; } }); })(jQuery); 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(){ /////////////////////////////////////////////////////////////////////// $('#tg').treegrid().treegrid('clientPaging'); ///////////////////////////////////////////////////////////////////////// $('#tg').treegrid('enableFilter', [{ field:'name', type:'validatebox', op:['contains'] }]); //////////////////////////////////////////////////////////////////////// }) </script> </body> </html> Title: Re: Treegrid with client pagination and filter Post by: stworthy on February 09, 2017, 05:39:51 PM The filter has built-in client paging functionality. You don't need to call 'clientPaging' method again. Please look at the following code:
Code: $('#tg').treegrid({ Title: Re: Treegrid with client pagination and filter Post by: saurabh on February 10, 2017, 01:42:50 AM The filter has built-in client paging functionality. You don't need to call 'clientPaging' method again. Please look at the following code: Many thanks for reply, I tried your solution but it doesn't work for me, it lost treegrid structure when i try to filter rows.Code: $('#tg').treegrid({ Can you please help me to make this fiddle (https://jsfiddle.net/saurabhmuthiyan/kLkd7occ/) running with treegrid filter. or can you just provide any sample code example where tree grid filter is working. Title: Re: Treegrid with client pagination and filter Post by: stworthy on February 10, 2017, 08:13:38 AM Make sure to download the 'datagrid-filter.js' file from http://www.jeasyui.com/extension/datagrid_filter.php.
Please look at this example http://code.reloado.com/eyiwen3/edit#preview. It works fine. Title: Re: Treegrid with client pagination and filter Post by: saurabh on February 13, 2017, 02:54:23 AM Make sure to download the 'datagrid-filter.js' file from http://www.jeasyui.com/extension/datagrid_filter.php. Thank you so much admin...for quick response...Things are now working perfectly..!! Please look at this example http://code.reloado.com/eyiwen3/edit#preview. It works fine. |