Question

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

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

我的网格设置（不知道这个问题是否属于这个问题）：

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

作为'Birthday'列的附加属性。有时需要为onSelect定义datepicker回调（请参阅here），有时需要额外使用setTimeout或进行其他自定义（请参阅the answer）其中包括工作演示。

Answer 2

正如您在jqGrid documentation中所读到的那样，有一个dataInit选项。您应该记住，在将元素插入DOM之前引发此事件，因此使用setTimeout只是为了安全：

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

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

2 个答案: