Как установить тип столбца как combobox или выпадающий список при использовании jquery DataTable plugin?

Question

var table = $('#DataTable_CentroCostos').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": { 
     "type": "POST", 
     "url": _pathGetDatosCetroCostos, 
     "contentType": 'application/json; charset=utf-8', 
     "data": function (d, e) { 
      return JSON.stringify({ _DtParameters: d, CC: model }); 
     } 
    }, 
    "language": { 
     "url": "../../Scripts/plugins/datatables/Spanish.json", 
     "emptyTable": "No existen datos" 
    }, 
    'columnDefs': [ 
     { 
      'targets': 0, 
      'searchable': false, 
      'orderable': false 
     }, 
     { 
      'targets': 1, 
      'searchable': false, 
      'orderable': false, 
     }, 
     { 
      'targets': 2, 
      'searchable': true, 
      'orderable': true 
     }, 
     { 
      'targets': 3, 
      'searchable': true, 
      'orderable': true 
     }, 
     { 
      'targets': 4, 
      'searchable': true, 
      'orderable': true 
     }, 
     { 
      'targets': 5, 
      'searchable': true, 
      'orderable': true 
     } 
    ], 
    "columns": [ 
     { "data": "Id_Rel_Area" }, 
     { "data": "Id_Sociedad" }, 
     { "data": "Sociedad_Desc" }, 
     { "data": "CodCentroCosto" }, 
     { "data": "CodCentroCosto_Desc" }, 
     { "data": "Consolida_GS" } 
    ], 
    "scrollX": true, 
    "destroy": true 
}); 

Answer 1

Если вы хотите сделать редактируемым ваш стол и указанный тип столбца, вы можете использовать этот код:

Вы можете установить тип элемента select или text (проверить мой пример):

Помните импортировать библиотеки:

• jquery.min.js
• jquery.dataTables.min.js
• jquery.jeditable.js
• jquery.dataTables.editable.js

• jquery.validate.js

  var oTable = $("#table").DataTable(); 
  
         oTable.makeEditable({ 
         sUpdateURL: "yourURL"), 
         aoColumns: [ 
          { 
           cssclass: 'span12', 
           indicator: '<img src="../../recursos/img/loading.gif" height="16"/>', 
           tooltip: 'Doble click para cambiar el Cargo.', 
           loadtext: '<img src="../../recursos/img/loading.gif" height="16" />', 
           type: 'select', 
           style: 'margin: 0px; text-align: center; padding: 3px', 
           onblur: 'submit', 
           data: cargos, 
           fnOnCellUpdated: function (sStatus, sValue, settings) { 
  
           } 
          }, 
          { 
           cssclass: 'fecha-inicio span12 required m-wrap', 
           indicator: '<img src="../../recursos/img/loading.gif" height="16"/>', 
           tooltip: 'Doble click para cambiar la fecha.', 
           loadtext: '<img src="../../recursos/img/loading.gif" height="16" />', 
           type: 'text', 
           style: 'margin: 0px; text-align: center; padding: 3px', 
           onblur: 'submit', 
           placeholder : 'dd/mm/YYYY', 
           fnOnCellUpdated: function (sStatus, sValue, settings) { 
  
           } 
          } 
         ] 
        });