Jeasyui multiple datagrids in one web site/application

Question

I am attempting create what might be described as dynamic on-demand datagrids for my application to display tables of files and their SHA1 values. The main page already consists of a large datagrid. The new datagrids doesn't show any data.

For the sake of brevity, I'll abbreviate the code I place here and change names to protect the innocent.

Calling the function is done by adding an attribute to a link of my choosing. As each link is associated with a sub-grid element it is able to be given a unique id at run time.

This code lives part of a form initialisation.

var myLink = document.getElementById("Link");
myLink.setAttribute("onclick", "javascript:addDiv(" +val1 + ", '" + val2 + "', '" + val3 + "');$('#" + val1 + "').window('open');$('#" + val1 + "').window('center')");

Main Table

<table id="dg"
url="fetch_d.php"
class="easyui-datagrid"
title="Title"
toolbar="#mtoolbar">
    <thead>
        <tr>
            <th field="id" width="10%">WR ID</th>
            <th field="wr" width="75%">Work Request</th>
            <th field="mtr" align="right" width="13%">Matter</th>
        </tr>
    </thead>
</table>

Code for Main Table

$('#dg').datagrid({
    view: detailview,
    detailFormatter:function(index,row){
    return '<div id="ddv-' + index + '" style="padding:2px"><table class="ddv"></table></div>';
    },
    onExpandRow: function(index,row){
    var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
    ddv.datagrid({ ...

This is where it gets tricky, leaving HTML behind now...

function addDiv(md_id, m_title, volume){

    //Check if the window has been opened before.
    if (document.getElementById(md_id)!=null){
      console.log("Window already exists");
    } else {

      //Set up HTML elements to frame window
      var myDiv = document.getElementById("w");
      var winDiv = document.createElement('DIV');
      winDiv.setAttribute("id", md_id);
      myDiv.appendChild(winDiv);
    }

  //Decorate window
  $('#'+ md_id).window({
    width:500,
    height:200,
    title:m_title
  });

//Build the table
Buildt(md_id, volume);

  //create datagrid
  $('#sha-view_'+md_id).datagrid({ url:"fetch_S1s.php?="+md_id });

}



function Buildt(md, vl){

  //Where to put the table
  var myTableDiv = document.getElementById(md);

  // Check if the table has already be created
  if (document.getElementById("sha-view_" + md)!=null){
    console.log("Table already exists");
  } else {

  //Set the table up for the datagrid
  var table = document.createElement('table');
    table.setAttribute("id", "sha-view_" + md);
    table.setAttribute("url", "fetch_S1s.php?="+md);
    table.setAttribute("class", "easyui-datagrid");
    table.setAttribute("title", "SHA1 "+vl);
    table.setAttribute("rownumbers", "false");

  //Table structure
  var tableHead = document.createElement('thead');
    table.appendChild(tableHead);

  //Table fields
  var fid = document.createElement('th');
      fid.appendChild(document.createTextNode("ID"));
      fid.setAttribute("field", "file_id");
    tableHead.appendChild(fid);

  //Table fields
  var fn = document.createElement('th');
    [... createTextNode, field etc.]
    tableHead.appendChild(fn);

  //Table fields
  var sa1 = document.createElement('th');
    [... code]
    tableHead.appendChild(sa1);

  //Deliver Table to customer
  myTableDiv.appendChild(table);

  }
}

The above code will create an empty datagrid which looks large enough to hold my test data. The browser development tools show the delivery of the test data.

Next, similar but different

function addDiv(md_id, m_title, volume){

    [ ... Code ...]

  //create datagrid
  $('#sha-view_'+md_id).datagrid({
    view: detailview,
    detailFormatter:function(index,row){
    return '<div id="ddv-' + index + '" style="padding:2px"><table class="ddv"></table></div>';
    }
  });

}



function Buildt(md, vl){

  [ ... More Code ... ]
}

This code produces a datagrid with many expand row buttons but again it doesn't shows any data. Additionally, as there aren't any sub data fields so the expand row buttons are unwanted.

Please let me know what you think, your thoughts, ideas, suggestions. Please comment code appropriately.

score 0 · Answer 1 · answered Jul 28 '15 at 16:23

There were two distinct problems above. The second isn't covered in the question above because it was not apparent at the time of writing.

The first problem.

The <th></th> needed to be child elements of a <tr></tr>

<tr>
  <th>
  </th>
</tr>

Thus the following code was added

  var tableRow = document.createElement('tr');
        tableHead.appendChild(tableRow);

And then the elements were added to that row.

//Table fields
  var sa1 = document.createElement('th');
    [... code]
    tableRow.appendChild(sa1);

This mean that the cell boarders began to be drawn.

The next problem was that the data remained invisible. This turned out to be an issue in my PHP code which was returning data in the following form.

[[val11,val12,val13],[val21,val22,val23],[val31,val32,val33]]

It should have been like this:

[{val11,val12,val13},{val21,val22,val23},{val31,val32,val33}]

The PHP (mysqli) code to retrieve the former is:

$items = array();
    if ($result = $coni->store_result()) {
        while ($row = $result->fetch_row()) {
            array_push($items, $row);
        }
    echo json_encode($items);
    }

The code to fetch the later and correct form of data is:

$items = array();
    if ($result = $coni->store_result()) {
        while ($row = $result->fetch_object()) {
            array_push($items, $row);
        }
    echo json_encode($items);
    }

Jeasyui multiple datagrids in one web site/application

1 Answers1