Jeasyui 一个网站/应用程序中的多个数据网格

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

上面有两个明显的问题。第二个没有包含在上面的问题中，因为它在撰写本文时并不明显。

第一个问题。

必须是 的子元素

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

因此添加了以下代码

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

然后将元素添加到该行。

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

这意味着单元格边界开始被绘制。

下一个问题是数据仍然不可见。这原来是我的 PHP 代码中的一个问题，它以以下形式返回数据。

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

应该是这样的：

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

获取前者的 PHP (mysqli) 代码是：

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

获取后面正确形式的数据的代码是：

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