[SOLVED] Create Dynamic datagrid with dynamic columns

[acreonte82]

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?      

[acreonte82]

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

[acreonte82]

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!! :-)

[acreonte82]

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
});