Show Posts
|
Pages: [1]
|
4
|
General Category / EasyUI for jQuery / Treegrid when we use filter child rows goes missing
|
on: August 09, 2017, 06:01:57 AM
|
When i do use filter to search any object which has child rows, It search for those object properly. But object which has child rows and if we try to search those object, I can't see their child rows. I have attached images 'NCR00017' has child rows. when i search for 'NCR00017' child rows goes missing.
|
|
|
6
|
General Category / EasyUI for jQuery / Re: Treegrid with Lazy loading nodes+ client side pagination +column filtering
|
on: July 26, 2017, 01:25:25 AM
|
Hello Hero Administrator, Thanks for reply!! but this code doesn't seems to work with won't seem to work with myLoadFilter
function myLoadFilter(data,parentId){ function setData(data){ var todo = []; for(var i=0; i<data.length; i++){ todo.push(data); } while(todo.length){ var node = todo.shift(); if (node.children && node.children.length){ node.state = 'closed'; node.children1 = node.children; node.children = undefined; todo = todo.concat(node.children1); } } } setData(data); var tg = $(this); var opts = tg.treegrid('options'); opts.onBeforeExpand = function(row){ if (row.children1){ tg.treegrid('append',{ parent: row[opts.idField], data: row.children1 }); row.children1 = undefined; //alert(row[opts.idField]); tg.treegrid('expand', row[opts.idField]); } return row.children1 == undefined; }; return data; }
and is there any way so that i can reduce more load time with treegrid
|
|
|
7
|
General Category / EasyUI for jQuery / Treegrid with Lazy loading nodes+ client side pagination +column filtering
|
on: July 25, 2017, 06:42:05 AM
|
I am using treegrid which has 50k rows. Because of slow loading issue in internet explorer i have updated treegrid code to 'Lazy loading nodes' but however column filtering and client side pagination does seems to working. can you please provide some sample working example treegrid with Lazy loading nodes+ client side pagination +column filtering. so that grid will load rows quickly. Thanks in advance.
|
|
|
10
|
General Category / General Discussion / Re: Treegrid with client pagination and filter
|
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: $('#tg').treegrid({ remoteFilter:false, pagination:true }); $('#tg').treegrid('enableFilter');
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. 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.
|
|
|
11
|
General Category / General Discussion / [Solved] Treegrid with client pagination and filter
|
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>
|
|
|
12
|
General Category / EasyUI for jQuery / Get JSON data for currently loaded tree grid
|
on: January 17, 2017, 03:10:35 AM
|
Hello, I want to get currently loaded json data from tree grid(Don't want to call again same servlet to get data.). I tried to do like this as shown below but it doesn't work for me. json data that i am loading is dynamic....!!
script var allData=$('#tg').treegrid('getData'); alert("All data length: "+allData.length); var jsonData=JSON.parse(allData); alert("jsonData "+jsonData);
tree grid html <table id="tg" title="NCM-SCAR Creation Application" style="height:600px;width:100%;" data-options=" iconCls: 'icon-ok', rownumbers: true, animate: true, collapsible: false, fitColumns: true, url: 'getNCMdataServlet', method: 'get', idField: 'id', treeField: 'name', pagination: true, onExpand:function(row) { collpaseTillItemLevel(row,<%=expandRows %>); }, checkbox:function (row) { if(row.chbx==1) { return true; } }, onCheckNode:function(row,checked){ verifyCheck(row,checked); }, onLoadSuccess:function() { collapseAllChilds() }, pageSize: 10, pageList: [10,20,50] "> <thead>
|
|
|
|