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

时间:2016-12-02 22:10:50

标签: javascript c# jquery datatables

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

1 个答案:

答案 0 :(得分:0)

如果要编辑表格和指定的列类型,可以使用以下代码:

您可以设置元素selecttext的类型(查看我的示例):

请记住导入库:

  • 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) {
    
                            }
                        }
                    ]
                });