Eksportuj dane z zestawu danych z wybranym elementem eksportuje każdą opcję z elementu wyboru

Question

Próbuję dodać przyciski eksportu do mojego datatable, moja tabela zawiera pola wyboru wewnątrz, problemem jest - eksportuje wszystkie opcje wartości zawarte w polu wyboru ... o używam ajax, aby uzyskać wyniki z serwera następnie manipulować różne dane przed renderowanie za pomocą dataSrc funkcja tak:

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, 
     .... 

w setLeadsTableData i sprawdzanie kolumny zwracane z serwera, a następnie, jeśli to kolumny, które powinny być skrzynką wyboru Zmieniam szablon w następujący sposób:

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; 
}, 

każda odpowiedź pomoże, to doceniam

Answer 1

Użyj exportOptions 'format.body zwrotnego, aby uzyskać kontrolę nad eksportowanych danych. Użyj interfejsu API DataTables, aby znaleźć aktualnie wybraną wartość dla każdego pola <select>. Tutaj na pierwszej kolumnie i 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; 
      } 
     } 
     } 
    }, 
    ... 
    } 
] 

Gdzie table jest wystąpienie tabela, w przypadku me.dataTable_obj. Teraz wystarczy zmienić if (col == 0) {, aby odpowiadała na kolumny, w których znajdują się pola <select> (tego nie wiem).

Answer 2

W przypadku użyjesz format eksportu widocznych tylko kolumny, stałe indeksy kolumn zagra kilka sztuczek na ciebie, więc to, co pomogło w moim przypadku było sprawdzenie dziecko węzła, a jeśli, to wybrać, a następnie dokonać formatu

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

Kredyt dla Michaiła Uszakowa za rozpoczęcie mojej kariery. Było trochę okazji, aby uprościć kod i sprawić, by działał on trochę płynniej (w moim przypadku) największym problemem jest to, że prawie wszystko w moich tabelach jest linkiem lub wyborem. W przypadku linków drugi kod również przechwytywał kod HTML łącza, a nie tekst. W moim przypadku miałem też dziwne rzeczy, takie jak tabele, więc musiałem przewidzieć wiele dzieci w każdym węźle. Również nie zdecydował się użyć 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; 
     } 
    } 
},