从选择元素导出数据表中的数据从选择元素导出每个选项

Question

我尝试将导出按钮添加到我的数据表，我的表包括选择框里面，问题是 - 导出选择框中包含的所有选项值...一个正在使用AJAX来从服务器获取结果的话，操作不同的数据之前渲染使用dataSrc功能，像这样：

dataTableInit: function (columns_def) { 
    var me = this; 
    me.dataTable_obj = $('#leads_table').DataTable({ 
     "pageLength": per_page, 
     dom: 'Blfrtip', 
     buttons: [ 
      'copy', 'csv', 'excel', 'pdf', 'print' 
     ], 
     "order": [order], 
     "ajax": { 
      url: route, 
      type: method, 
      data: filtering_data, 
      "dataSrc": function (json) { 
       return me.setLeadsTableData(json); 
      } 
     }, 
     "columns": columns_def, 
     .... 

在 setLeadsTableData我检查列

从服务器返回然后如果一列，应该是一个选择框我正在改变它的模板像这样：

setStatusesSelectBox: function (status_obj, lead_id) { 
    var me = this; 
    var statuses_list = ''; 
    var bg_color = status_obj.name == "new" ? me.new_status_row_bg_color : ''; 
    $.each(me.client_statuses, function (key, val) { 
     if (val.id != status_obj.id) { 
      if (typeof val.is_won !== "undefined" && val.is_won != 0) { 
       statuses_list += "<option data-icon='fa fa-thumbs-o-up' value='" + val.id + "'>" + val.name + "</option>"; 
      } else if (typeof val.is_lost !== "undefined" && val.is_lost != 0) { 
       statuses_list += "<option data-icon='fa fa-thumbs-o-down' value='" + val.id + "'>" + val.name + "</option>"; 
      } else { 
       statuses_list += "<option value='" + val.id + "'>" + val.name + "</option>"; 
      } 
     } else { 
      if (typeof val.row_bg_color !== 'undefined') { 
       bg_color = val.row_bg_color; 
      } 
      if (typeof status_obj.is_won !== "undefined" && status_obj.is_won != 0) { 
       statuses_list += "<option data-icon='fa fa-thumbs-o-up' value='" + val.id + "' selected>" + val.name + "</option>"; 
      } else if (typeof status_obj.is_lost !== "undefined" && status_obj.is_lost != 0) { 
       statuses_list += "<option data-icon='fa fa-thumbs-o-down' value='" + val.id + "' selected>" + val.name + "</option>"; 
      } else { 
       statuses_list += "<option value='" + val.id + "' selected>" + val.name + "</option>"; 
      } 
     } 
    }); 
    statuses_list += "</select>"; 
    var select_start = "<select name='status' data-show-icon='true' data-row-bg='" + bg_color + "' class='form-control status-select' data-lead-id='" + lead_id + "'>"; 
    ; 
    return select_start + statuses_list; 
}, 

任何回答将帮助，不胜感激

Answer 1

使用exportOptions'format.body回调，并得到了导出的数据控制。使用dataTables API查找每个<select>框的当前选定值。这里的第一列和pdf：

buttons: [ 
    { 
    extend : 'pdf', 
    exportOptions : { 
     format: { 
     body: function(data, row, col, node) { 
      if (col == 0) { 
      return table 
       .cell({row: row, column: col}) 
       .nodes() 
       .to$() 
       .find(':selected') 
       .text() 
      } else { 
       return data; 
      } 
     } 
     } 
    }, 
    ... 
    } 
] 

哪里table是表例如，在你的情况me.dataTable_obj。现在只需更改if (col == 0) {，以便它响应您有<select>框的列（我不知道）。

Answer 2

如果你使用的导出格式仅可见列，固定列索引会起到一些技巧上的你，还等什么帮助了我的情况是检查的子节点，如果是选择，然后再进行格式

body: function(data, row, col,node) { 
    var elementType = node.firstChild; 
    if (elementType != null) { 
     if (elementType.nodeName == "SELECT") return 
     $(elementType).find(':selected').text(); 
     else return data; 
    } 
    else return data 

Answer 3

感谢米哈伊尔乌沙科夫让我开始。有一些机会来简化代码并使其工作更顺利（就我而言），最大的问题是我的表中的所有内容都是链接或选择。在链接的情况下，其他代码也捕获链接的html，而不是文本。在我的情况下，我也有奇怪的东西，如表，所以我不得不在每个节点预计多个孩子。也选择不使用jQuery）

exportOptions: { 
    format : { 
     body : (data, row, col, node) => { 
      let node_text = ''; 
      const spacer = node.childNodes.length > 1 ? ' ' : ''; 
      node.childNodes.forEach(child_node => { 
       const temp_text = child_node.nodeName == "SELECT" ? child_node.selectedOptions[0].textContent : child_node.textContent; 
       node_text += temp_text ? `${temp_text}${spacer}` : ''; 
      }); 
      return node_text; 
     } 
    } 
},