【问题标题】:Bootgrid data-row-id is undefinedBootgrid 数据行 ID 未定义
【发布时间】:2020-04-27 04:15:44
【问题描述】:

我在 Bootgrid 表上有编辑和删除控件。这些需要数据行号,但该数据属性未定义,如下行所示。在文档中找不到与此相关的任何内容。

这里的编辑坚持说我没有足够的文本来容纳这么多的代码,所以我发布更多的文本以便提交。真的没什么好说的了。我可以花时间浏览 Bootgrid 代码或 BootStrap 代码以找出一些问题,但我希望有人以前经历过。我在 * 或网络上的其他任何地方都找不到类似的问题。

HTML

<div class="Wrapper">
   <div class="CenterTube">
      <div class="table-responsive">
      <table id="GridData" data-toggle="bootgrid" data-ajax="true" data-url="TickerData.php" class="table table-condensed table-hover table-striped">
      <thead>
         <tr>
            <th data-column-id="ID" data-width="4%" data-type="numeric" data-identifier="true">ID</th>
            <th data-column-id="Expire" data-width="7%">Expire</th>
            <th data-column-id="Message" data-order="asc" data-width="74%">Message</th>
            <th data-column-id="Link" data-width="10%">Link</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false" data-width="5%">Edit</th>
         </tr>
      </thead>
      </table>
      </div>
   </div>
</div>

jQuery

  $(document).on("loaded.rs.jquery.bootgrid", function()
  {
     DataTable.find(".update").on("click", function(event)
     {
        var ID = $(this).data("row-id");
        if(ID != "undefined")
        {
           $.ajax(
           {
              url:"TickerData.php",
              method:"POST",
              data:{ID:ID, "SEC":"FetchSingle"},
              dataType:"json",
              success:function(data)
              {
                 var ECount = data.Error.length;
                 if(ECount > 0)
                 {
                    var ErrorString = "";
                    for(i=0;i<ECount;i++)
                    {
                       ErrorString += response.Error[i] + "\n";
                    }
                    alert(ErrorString);
                 }
                 else
                 {
                    $('#DataModal').modal('show');
                    $('#ID').val(data.Output.ID);
                    $('#Expire').val(data.Output.Expire);
                    $('#Message').val(data.Output.Message);
                    $('.modal-title').text("Edit Message");
                    $('#ID').val(ID);
                    $('#action').val("Edit");
                    $('#operation').val("Edit");
                 }
              }
           });
        }
        else
        {
           alert("ID is undefined!");
        }
     });
  });

这是渲染后的一行

<td class="text-left" style="width:4%;">1</td>
<td class="text-left" style="width:7%;">2020-08-15 04:14:12</td>
<td class="text-left" style="width:74%;">Severe winds across most of southern Wyoming and northeast Colorado. Hiway closed in places.</td>
<td class="text-left" style="width:10%;">&nbsp;</td>
<td class="text-left" style="width:5%;"><button type="button" class="btn btn-warning btn-xs update" data-row-id="undefined"> Edit </button>&nbsp; 
<button type="button" class="btn btn-danger btn-xs delete" data-row-id="undefined">Delete</button></td></tr>

【问题讨论】:

  • 您确定使用bootgrid 吗?看来您使用的是datatables。看看datatables.net/examples/data_sources/ajax.html
  • 不,我肯定在使用 BootGrisd。这实际上是一个非常愚蠢的疏忽。返回 AJAX 数据时,命令(编辑/删除)使用 data.id。但是,为了与我的数据库表一致,我将所有对 ID 列的引用都用大写字母表示。但错过了返回数据中的row.id变量。

标签: jquery jquery-bootgrid


【解决方案1】:

这实际上是我应该发现的一个疏忽。我的数据库表中的 id 是大写的。所以所有的身份证也都在这里。完全错过了明显的。填充表格时,data.id 将插入到控制单元格中。我没有将其更改为 data.ID。

【讨论】: