使用日期选择器进行数据表内联编辑

Question

好的，所以我有这个数据table，其中大约 90 个字段是从 dbContext (Visual Studio MVC4) 填充的。我添加了 .makeEditable() 来享受内联编辑...

我的大部分字段都是字符串类型（但用户可以输入日期，如果他选择...即使它是文本类型字段，日期将作为简单文本输入...）

我遇到的问题是，即使我成功地让编辑表单的 class 变成 "datepicker"，日历也没有弹出，其他简单的非数据table页，它运行得很好。

我希望能够将某些列单元格设置为具有内联日期选择功能..

我希望我的 table 看起来像这样 http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit-extra.html

我试着模仿那里的代码但没有成功....它总是一个用于编辑的文本框而不是日历视图..

更新：我注意到如果我更改

中的 "type:" 字段

$.fn.editable.defaults = {
        name: 'value',
        id: 'id',
        type: 'datepicker',
        width: 'auto',
        height: 'auto',
        event: 'click.editable',
        onblur: 'cancel',
        loadtype: 'GET',
        loadtext: 'Loading...',
        placeholder: 'Double-Click to edit',
        loaddata: {},
        submitdata: {},
        ajaxoptions: {}
    };

我的整个 table 在编辑模式下得到一个日期选择器...

显然，为某些列提供日期选择器选项的初始化代码无法正常工作....或者至少我猜是这样

**更新结束****

这是我的数据table初始化代码：

<script language="javascript" type="text/javascript">

$(function() {
    $(".datepicker").datepicker({ dateFormat: 'dd-MM-yy' });
});
$(document).ready(function ()
{

    $('#myDataTable thead tr#filterrow th').each(function () {

        var title = $('#myDataTable thead th').eq($(this).index()).text();
        $(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search ' + title + '""style="direction: ltr; text-align:left;" />');

    });
    $("#myDataTable thead input").on('keyup change', function () {
        table
            .column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    });

    var table = $('#myDataTable').DataTable({
        //"scrollY": "200",
        "scroller": "true",
        "deferRender": "true",
        "orderCellsTop": "true",
        "columnDefs": [
            { "visible": false, "targets": 1 },
             { "type": "datepicker", "aTargets": [6,7,8,9,10] },
           { 'sClass':"datepicker", "aTargets": [6, 7, 8, 9, 10] }
        ],
        "order": [[1, 'asc']],
        "displayLength": 25,
        "drawCallback": function (settings)
        {
            $(".datepicker").datepicker({ dateFormat: 'dd-MM-yy' });
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;

            api.column(1, { page: 'current' }).data().each(function (group, i) {
                if (last !== group) {
                    $(rows).eq(i).before(
                        '<tr class="group"><td colspan="88">' + group + '</td></tr>'
                    );

                    last = group;
                }

            });
        },
        "fndrawCallback": function (settings) {
            $(".datepicker").datepicker({ dateFormat: 'dd-MM-yy' });
        }
    });
    // Apply the search
    table.columns().every(function () {
        var that = this;

        $('input', this.header()).on('keyup change', function () {
            that
                .search(this.value)
                .draw();
        });
    });

    // Order by the grouping
    $('#myDataTable tbody').on('click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if (currentOrder[0] === 1 && currentOrder[1] === 'asc') {
            table.order([1, 'desc']).draw();
        }
        else {
            table.order([1, 'asc']).draw();
        }
    });
 //$('#myDataTable thead').append($('#myDataTable thead tr:eq(0)')[0]);
    $('#myDataTable').dataTable().makeEditable({
        "aoColumnDefs": [
           { "type": "hasDatepicker", "aTargets": 4 },
           { "sClass": "hasDatepicker", "aTargets": 4 }
        ]
    });
});

function stopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

这是datepicker.js

// add :focus selector
jQuery.expr[':'].focus = function (elem) {
    return elem === document.activeElement && (elem.type || elem.href);
};

$.editable.addInputType(' datepicker', {

    /* create input element */
    element: function (settings, original) {
        var form = $(this),
            input = $('class ="datepicker" <input />');
       // input.attr('class', 'datepicker');
        input.attr('autocomplete', 'off');
        form.append(input);
        return input;
    },

    /* attach jquery.ui.datepicker to the input element */
    plugin: function (settings, original) {
        var form = this,
            input = form.find("input");

        // Don't cancel inline editing onblur to allow clicking datepicker
        settings.onblur = 'nothing';

        datepicker = {
            onSelect: function () {
                // clicking specific day in the calendar should
                // submit the form and close the input field
                form.submit();
            },

            onClose: function () {
                setTimeout(function () {
                    if (!input.is(':focus')) {
                        // input has NO focus after 150ms which means
                        // calendar was closed due to click outside of it
                        // so let's close the input field without saving
                        original.reset(form);
                    } else {
                        // input still HAS focus after 150ms which means
                        // calendar was closed due to Enter in the input field
                        // so lets submit the form and close the input field
                        form.submit();
                    }

                    // the delay is necessary; calendar must be already
                    // closed for the above :focus checking to work properly;
                    // without a delay the form is submitted in all scenarios, which is wrong
                }, 150);
            }
        };

        if (settings.datepicker) {
            jQuery.extend(datepicker, settings.datepicker);
        }

        input.datepicker(datepicker);
    }
});

Answer 1

所以经过大量的反复试验......

我手动输入了我的 90 列中每一列的类型，它手动工作了....以列列表为目标的 columnDefs 可能有问题，因为在 jeditable.datepicker 它不解析列表在设置中传递的列....

希望这对以后迷失的灵魂有所帮助...

使用日期选择器进行数据表内联编辑

Datatables inline editing with datepicker

javascript

jquery

datepicker

datatables