jqGrid中的日期选择器,简单的例子？

Question

有没有人知道在jqGrid中添加jquery UI DatePicker(或其他一些)的例子？我正试图让它适用于内联编辑网格.

我找到了一些例子,但没有任何作用.我想要一些非常简单的东西!

我的网格设置(不知道这个问题是否属于nessecary):

    $(function () {
    var lastsel;
    $("#list").jqGrid({
        url: '@Url.Action("ExampleData", "Home")',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Namn', 'Födelsedag', 'Adress', 'Stad'],
        colModel: [
          { name: 'Name', index: 'Name', width: 130, editable: true },
          { name: 'Birthday', index: 'Birthday', width: 80, editable: true },
          // DatePicker for birthday 

          { name: 'Address', index: 'Address', width: 180, editable: true },
          { name: 'City', index: 'City', width: 80, editable: true },
        ],
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'Name',
        sortorder: 'desc',
        viewrecords: true,
        gridview: true,
        width: 700,
        onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').jqGrid('saveRow', lastsel);
                jQuery('#list').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },
        editurl: '@Url.Action("Incoming", "Home")',
        caption: 'Kontaktpersoner'
    });

    jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: true });
    jQuery("#list").jqGrid('inlineNav', "#pager");

Answer 1

代码的简单性取决于您在"生日"列中填写的数据格式.你最需要的是包括

editoptions: { dataInit: function (elem) { $(elem).datepicker(); } }

作为"生日"栏的附加属性.有时需要定义onSelect回调datepicker(参见此处),有时需要setTimeout另外使用或进行一些其他自定义(请参阅答案),其中包括工作演示.

Answer 2

正如您可以在jqGrid文档中读到的那样,有一个dataInit选项.您应该记住,在将元素插入DOM之前引发此事件,因此使用setTimeout只是为了安全:

{ name: 'Birthday', index: 'Birthday', width: 80, editable: true editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } },