导出 jQuery DataTable 时自定义数据答案

【问题标题】：Customize data when export jQuery DataTable导出 jQuery DataTable 时自定义数据
【发布时间】：2018-09-19 12:28:03
【问题描述】：

我在 Laravel 中使用 jQuery DataTables，我想使用插件的导出功能。

现在我的问题是，在我的表格中，我有一些 HTML，因此我呈现的是一个复选框，而不是实际的文本。

例子

<td>
    <span class="{{($r->submitted == 1)?'checkbox-checked':''}}">
        <i class="material-icons md-18">check_box</i>
    </span>
</td>

当我在 Excel 中导出此表时，我得到了 td 'check_box' 的值，因此 excel 看起来像这样

+-----------+----------+-----------+-----------+--+
| Firstname | Lastname | Option 1  | Option 2  |  |
+-----------+----------+-----------+-----------+--+
| Christos  | Savva    | check_box | check_box |  |
+-----------+----------+-----------+-----------+--+
| Second    | Person   | check_box | check_box |  |
+-----------+----------+-----------+-----------+--+
| Third     | Person   | check_box | check_box |  |
+-----------+----------+-----------+-----------+--+

显然这在 excel 文件中没有意义，而在屏幕上很好，因为我渲染了图标。

根据文档，我尝试使用Format output data - export options

var buttonCommon = {
    exportOptions: {
        format: {
            body: function ( data, row, column, node ) {
                //Do stuff to replace check_box with word Yes
                //or no
                return data
            }
        }
    }
};

问题来了。当我从函数返回数据时，它会返回 td 内的整个 html 块。

所以excel看起来像这样

+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Firstname | Lastname | Option 1                                                      | Option 2                                                      |  |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Christos  | Savva    | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> |  |
|           |          |                                                               |                                                               |  |
|           |          | <i class="material-icons md-18">yes</i>                       | <i class="material-icons md-18">yes</i>                       |  |
|           |          |                                                               |                                                               |  |
|           |          | </span>                                                       | </span>                                                       |  |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Second    | Person   | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> |  |
|           |          | <i class="material-icons md-18">yes</i>                       |                                                               |  |
|           |          | </span>                                                       | <i class="material-icons md-18">yes</i>                       |  |
|           |          |                                                               |                                                               |  |
|           |          |                                                               | </span>                                                       |  |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Third     | Person   | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> |  |
|           |          |                                                               |                                                               |  |
|           |          | <i class="material-icons md-18">yes</i>                       | <i class="material-icons md-18">yes</i>                       |  |
|           |          |                                                               |                                                               |  |
|           |          | </span>                                                       | </span>                                                       |  |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+

有谁知道我如何做到这一点？

【问题讨论】：

stackoverflow.com/questions/35986288/…的可能重复
您只显示“已检查”的 sn-ps。未选中伪复选框时 HTML 的外观如何？
选中复选框时，我只是用 css 更改颜色，我将其设为绿色，如果未选中，颜色为灰色 @tschitsch 我会检查它，谢谢

标签： jquery datatables export-to-excel

【解决方案1】：

如果我们可以假设 HTML 已呈现。即 submitted == 1)?'checkbox-checked':''}}"> 呈现为  或  ：

exportOptions: {
  format: {
    body: function ( data, row, column, node ) {
      if (![2,3].indexOf(column)) {
        return $('span', data).hasClass('checkbox-checked')
          ? 'yes'
          : 'no'
      }
      return data
    }
  }    
}

【讨论】：

我实际上会将您的解决方案标记为答案，因为我不知道这个$(data, 'span') 可以将我得到的字符串变成一个 JS 对象，所以我可以轻松地做到 let span = $(data, 'span').html() 并做到我需要什么才能得到正确的输出你能告诉我你在哪里找到的吗？是 jquery 的东西还是数据表的东西谢谢
实际上是相反的:) 已更新答案。这只是“语法糖”让它更清楚，在你的情况下它真的无关紧要，因为  无论如何都是父元素，但如果你想处理  子元素，那就是 $('i', data) = = children  elements 我认为它一直存在于 jQuery 中，即永远存在。普通常用语法，与DT无关。
谢谢！我是控制台记录数据，因为它是一个刺痛，我不能用它做太多。在$('i', data) 之前我没有遇到过这个。你用两个词给了我解决方案：D。