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

Question

我有一个<ASP:GridView>其中有几列具有从SQL Server返回的布尔值。 我正在使用datatables插件看起来不错，但是当我将数据导出到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>

您有3个td标签，所以您有3列。 如果您要提供render函数，这是该插件的文档所说的内容：

如果给出了一个函数，则只要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元素，它是一个复选框，并检查是否已选中该复选框。

¯_（ツ）_ //这是JSFiddle。