javascript - 使用 jQuery 数据表将复选框数据导出到 Excel

Question

我有一个 <ASP:GridView>，其中有几列包含从 SQL Server 返回的 bool 值。我使用的数据表插件看起来不错，但是当我将数据导出到 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' }
        }
    ]

任何帮助，提前致谢。

Answer 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 列。这是documentation该插件说明您是否要提供渲染函数:

If a function is given, it will be executed whenever DataTables needs to get the data for a cell in the column.

这是您的回调函数:

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.