使用 jquery DataTable 插件时如何将列类型设置为组合框或下拉列表？答案

【问题标题】：How set column type as combobox or dropdown when using jquery DataTable plugin?使用 jquery DataTable 插件时如何将列类型设置为组合框或下拉列表？
【发布时间】：2016-12-02 22:10:49
【问题描述】：

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

【问题讨论】：

标签： javascript c# jquery datatables

【解决方案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) {

                        }
                    }
                ]
            });

【讨论】：