使用 jQuery 数据表将复选框数据导出到 Excel答案

【问题标题】：Exporting checkbox data to excel using jQuery datatables使用 jQuery 数据表将复选框数据导出到 Excel
【发布时间】：2017-12-02 07:17:24
【问题描述】：

我有一个<ASP:GridView>，其中包含从 SQL Server 返回的布尔值的几列。我使用的数据表插件看起来不错，但是当我将数据导出到 Excel 时，除了 bool 显示为空的值之外，所有数据都导出到 Excel。

这是我的简单 jQuery：

$(document).ready(function () {
         $('#<%=GridView1.ClientID%>').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'excel'
            ]
        });
    });

我已经按照链接https://m.datatables.net/forums/discussion/45691/excelhtml5-how-to-export-checkbox-data 中的说明进行了尝试，但没有成功。

尝试过的代码 1

columnDefs: [
                {
                    "render": function (data, type, row) {
                        var i = $(data).prop("checked")===true?"Yes":"No";
                        return i;
                    },
                    "targets": [1,2,13,16,17,19]
                }
            ]

即使 bool col 值为 true，它也会显示“NO”。

尝试过的代码 2

buttons: [            
        {
            extend: 'excel',
            exportOptions: { orthogonal: 'export' }
        }
    ]

尝试代码 3

buttons: [            
        {
            extend: 'excelHtml5',
            exportOptions: { orthogonal: 'export' }
        }
    ]

任何帮助，在此先感谢。

【问题讨论】：

返回什么：$(data).prop("checked")
它返回“No”，即使是布尔值 1。
无法返回No。它只能返回true 或false。请仔细阅读我的问题，因为我只问$(data).prop("checked")
$(data).prop("checked") 返回 'false' 并且 var i 包含 'No'
那么它不应该重新调整false吗？我无权访问data，而且您没有发布它，所以我无法确定。

标签： javascript c# jquery asp.net datatables

【解决方案1】：

我从未使用过DataTable 插件，但我们是开发人员，所以让我们来解决问题。您创建了一个JSFiddle，而您的 HTML 中的重要部分是：

  <td>72</td>
  <td><span class="aspNetDisabled" title="Is Credit"><input id="CentreContent_GridView1_ctl00_0" type="checkbox" name="ctl00$CentreContent$GridView1$ctl02$ctl00" disabled="disabled" /></span></td>
  <td><span class="aspNetDisabled" title="Is Quotation"><input id="CentreContent_GridView1_ctl01_0" type="checkbox" name="ctl00$CentreContent$GridView1$ctl02$ctl01" checked="checked" disabled="disabled" /></span></td>

你有三个td 标签，所以你有 3 列。如果您要为render 提供函数，插件的documentation 是这样说的：

如果给定一个函数，它将在DataTables需要获取列中某个单元格的数据时执行。

这是你的回调函数：

function (data, type, row){
    var i = $(data).prop("checked")===true?"Yes":"No";
    return i;
}

所以基本上它会用三个参数调用你的函数。我们感兴趣的论点（针对您的问题）是data。 data 参数将包含单元格的 html，因此您可以根据其内容做出一些决策。由于您的单元格 HTML 具有这种结构

<td><span><input></span></td>

然后当您执行$(data) 时，JQuery 将选择所有 HTML，然后查找 checked 属性，但显然这不起作用。您必须明确告诉 JQuery 要选择哪个元素，然后查找该属性。因此，您的代码需要是这样的：

var $element = $(data).find(':input')
var i;
if ($element && $element.is(':checkbox')) {
    i = $element.prop('checked') === true ? "Yes" : "No";
} 
else {
    // What will you do if not checkbox?
}

现在我们专门寻找一个input 元素，它是一个复选框，并检查复选框是否被选中。

¯_(ツ)_/¯ Here is the JSFiddle.

【讨论】：