Question

我正在尝试为我的应用程序创建可能被描述为动态按需数据网格的内容，以显示文件表及其SHA1值。主页面已包含大型数据网格。新的数据网格不显示任何数据。

为了简洁起见，我将缩写我放在这里的代码并更改名称以保护无辜者。

通过向我选择的链接添加属性来调用该函数。由于每个链接都与子网格元素相关联，因此可以在运行时为其指定唯一ID。

此代码是表单初始化的一部分。

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

主表

<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>

主表代码

$('#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({ ...

这是一个棘手的问题，现在让HTML落后......

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

  }
}

上面的代码将创建一个空的数据网格，它看起来足够大以容纳我的测试数据。浏览器开发工具显示测试数据的传递。

接下来，类似但不同

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 ... ]
}

此代码生成一个包含许多展开行按钮的数据网格，但同样不会显示任何数据。此外，由于没有任何子数据字段，因此展开行按钮是不需要的。

请让我知道您的想法，想法，想法和建议。请适当地评论代码。

Answer 1

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在一个网站/应用程序中的多个数据网格

1 个答案: