遍历 JQuery Bootgrid 表中的行并提取值？

Question

我正在尝试遍历 Jquery Bootgrid 表中的项目列表并提取要在其他地方使用的值。这是我的伪代码：

for (each row in or-table) {
  var code = the value in data-column-id="code";
  var latitude = the value in data-column-id="lat";
  var longitude = the value in data-column-id="long";
  
  Console.log("code: " + code);
  Console.log("latitude: " + latitude);
  Console.log("longitude: " + longitude);
}

<table id="or-table" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
  <thead>
    <tr>
      <th data-column-id="code" >Symbol Code</th>
      <th data-column-id="lat" >Latitude</th>
      <th data-column-id="long" >Longitude</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

我只想遍历表中的行并将单元格中的值保存到变量中。我一直找不到使用 Bootgrid 的示例。

Answer 1

即使您选择了答案，使用 jQuery Bootgrid 库选择所有行的正确方法是这样的 (Fiddle)：

// The Rows from The Table
console.log(dt.data('.rs.jquery.bootgrid').rows)

//With Ajax + Pagination
console.log(dt.data('.rs.jquery.bootgrid').currentRows)

数据表：

<table id="employeeList" class="table table-bordered table-condensed table-hover">
  <thead>
    <tr>
      <th data-column-id="iEmployeeId" data-type="numeric" data-visible="false" data-identifier="true" data-noresize>Id</th>
      <th data-column-id="sName" data-order="desc">Name</th>
      <th data-column-id="sAddress">Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>dsa</td>
      <td>asd</td>
    </tr>
    <tr>
      <td>2</td>
      <td>sss</td>
      <td>assd</td>
    </tr>

    <tr>
      <td>3</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>4</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>5</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>6</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>7</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>8</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>9</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>10</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>11</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

  </tbody>
</table>

然后初始化 BootGrid 对象：

    var dt = $('#employeeList').bootgrid({
      selection: true,
      rowSelect: true,
      converters: {},
    });

然后访问行和引导网格数据表对象

// the DT object
console.log(dt.data('.rs.jquery.bootgrid'))

// The Rows from The Table
console.log(dt.data('.rs.jquery.bootgrid').rows)

//With Ajax + Pagination
console.log(dt.data('.rs.jquery.bootgrid').currentRows)

var rows = dt.data('.rs.jquery.bootgrid').rows;

for(var i = 0; i < rows.length; i++)
{
    console.log(rows[i].iEmployeeId);
  console.log(rows[i].sName);
}

Answer 2

此代码不假定每组tr 标记中th 标记的位置、顺序或排他性。

$("tr").each(function(row){
    var code = row.find("th[data-column-id='code']").text()
    var latitude = row.find("th[data-column-id='lat']").text()
    var longitude = row.find("th[data-column-id='long']").text()

    Console.log("code: " + code);
    Console.log("latitude: " + latitude);
    Console.log("longitude: " + longitude);
});

Answer 3

您可以遍历所有行并通过子元素访问那里的元素。

   $("#or-table tr").each(function(i, row){
      var code = $(":nth-child(1)", row).html();
      var latitude = $(":nth-child(2)", row).html();
      var longitude = $(":nth-child(3)", row).html();

      Console.log("code: " + code);
      Console.log("latitude: " + latitude);
      Console.log("longitude: " + longitude);
    });

如果不是这样，请将类添加到每个单元格类型，例如 .code_value, .lat_value, .lng_value，并在 each() 中以 $(row).find(".code_value").html() 访问它们。
或者通过参数名称$(row).find("[data-column-id='code']").html()找到它们

Answer 4

这假设您的 <td> 元素具有 data-column-id 属性：

$('tbody tr').each(function(idx, row) {
  var code = $(row).find('[data-column-id="code"]').html();
  var latitude = $(row).find('[data-column-id="lat"]').html();
  var longitude = $(row).find('[data-column-id="long"]').html();

  console.log("code: " + code);
  console.log("latitude: " + latitude);
  console.log("longitude: " + longitude);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="or-table" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
  <thead>
    <tr>
      <th data-column-id="code">Symbol Code</th>
      <th data-column-id="lat">Latitude</th>
      <th data-column-id="long">Longitude</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column-id="code">1</td>
      <td data-column-id="lat">2</td>
      <td data-column-id="long">3</td>
    </tr>
    <tr>
      <td data-column-id="code">4</td>
      <td data-column-id="lat">5</td>
      <td data-column-id="long">6</td>
    </tr>
  </tbody>
</table>

Answer 5

我认为您正在寻找 BootGrid 选择方法。

http://www.jquery-bootgrid.com/Documentation#methods

var rows = $("#or-table").bootgrid("select");