Title: [SOLVED] Create Dynamic datagrid with dynamic columns Post by: acreonte82 on September 09, 2013, 08:27:18 AM Hello to all,
I'm trying to implement a function to try to load a datagrid after a specific filter selection . The number of columns are variabile based on the result of selection parameters. An example JSON result after my PHP script is: { "total":1,"rows":[{"general_code":"2","sample_number":"2","rs1042522":"GG"}],"columns":[["general_code"],["sample_number"],["rs1042522"]] } The code to try to build the datagrid dynamically is: 1. the button to take filter selection: <input type="button" name="Send" value="Visualizza genotipi" onclick="javascript: loadData(this.form)"> 2.The definition of my datagrid: <table class="easyui-datagrid" id="dg" pagination="true" rownumbers="true"> 3. The loadData function: function loadData(frm){ $('#dg').datagrid({ url:getParameters(frm), loadFilter: function(data){ if (!this.columns && data.columns){ this.columns = data.columns; var opts = $(this).datagrid('options'); var url = opts.url; $(this).datagrid({ columns:data.columns, url:null }); setTimeout(function(){ opts.url = url; },0); return data; } } }); } The final result isn't correct: 1. the columns are superimposed and I can't see the title of these columns 2. shows the line number but not the data Where I wrong? Some one can help me? Title: Re: Load Dinamic columns on datagrid Post by: acreonte82 on September 09, 2013, 11:29:39 AM I found this topic
http://www.jeasyui.com/forum/index.php?PHPSESSID=c4ngouig13bqrucm7dqb3o9si7&topic=342.0 and try to replicate but no result.... Thanks a lot Title: Re: [SOLVED] Create Dynamic datagrid with dynamic columns Post by: acreonte82 on September 11, 2013, 05:51:46 AM I solved my problem.
I hope that my guide can help someone in the future!! 1): I found my solution in these two links : http://www.jeasyui.com/forum/index.php?topic=1774.0 http://www.jeasyui.com/forum/index.php?topic=286.0 2) I created a specific function to retrieve json data from php script: - the php script is divide by two parts: to retrieve rows data and to retrieve columns name. - the javascript ask the type of data by posting the request (row or column) - parsing of json data, for the columns, to build the array like specification (array of array ad index without quotes): [[{field:'field_value_1', title:'Title_of_field_1'},{field:'field_value_2', title:'Title_of_field2'}]] The code: function loadData(frm){ var colStruct = []; var colItems = []; colStruct.pop(); $.getJSON(getParameters(frm,'columns'),function(data){ <=== the function getParameters takes the data values from a form and it ask to retrieve columns name. PHP return a JSON array var obj = data.columns; <== the json array :{"columns":{"field1","field2",...,"fieldn"}} for (var value in obj){ <== let's start to buil our column object var menuItem = { field: obj[value], title: obj[value], <== index without quotes!!! align: 'center' }; colItems.push(menuItem); <== here we push the column object into the array } colStruct.push(colItems); <== then push the column array in other array $('#dg').datagrid({ columns: colStruct, url:getParameters(frm,'rows') <=== In this case I want to have rows data... so I ask row data and then PHP return to me a JSON array with the data that I want }); }); } This is my solution. If someone have a better idea or want to improve my solution, please write!! :-) Title: Re: [SOLVED] Create Dynamic datagrid with dynamic columns Post by: acreonte82 on September 11, 2013, 07:01:47 AM A pagination problem....
YES because, at the end, we load data by client side... So the solution is in this link: http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Client%20Side%20Pagination The function is: function pagerFilter(data){ if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array data = { total: data.length, rows: data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); dg.datagrid('loadData',data); } }); if (!data.originalRows){ data.originalRows = (data.rows); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } and the little adjustement in my function loadData(frm) from: $('#dg').datagrid({ columns: colStruct, url:getParameters(frm,'rows') }); }); to.... $('#dg').datagrid({ columns: colStruct, url:getParameters(frm,'righe'), loadFilter:pagerFilter }); |