jquery-ui - 带有 showOn : 'button' 的 jqGrid 中的 JQuery 日期选择器问题

Question

我使用 jqGrid 并且我想在里面集成一个 JQuery datePicker。它运行良好，直到我添加 showOn: '按钮' .这样，编辑就不再起作用了。我真的只想在单击按钮时弹出选择器，因为日期是我行的第一个单元格，我使用内联编辑，所以每一行选择都显示日期选择器 :-(。如果我在 jqGrid 之外使用相同的日期选择器选项，它会起作用。

请帮忙

function loadGrid() {
    var getUrl = 'Transactions.aspx/GridData/?fundID=' + $('#fundID').val();
    var lastSel = "";
    jQuery("#list").jqGrid({
        url: getUrl,
        editurl: 'Transactions.aspx/Edit/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Date', 'Invested', 'Nb Shares', 'Price'],
            colModel: [
      { name: 'Date', index: 'Date', width: 120, align: 'left', editable: true,
          editoptions: {
              size: 10, maxlengh: 10,
              dataInit: function(element) {
                  $(element).datepicker({ dateFormat: 'dd/mm/yy', constrainInput: false, showOn: 'button', buttonText: '...' });
              }
          }
      },
      { name: 'Invested', index: 'Invested', width: 100, align: 'right', editable: true, edittype: 'text' },
      { name: 'NbShares', index: 'NbShares', width: 110, align: 'right', editable: true, edittype: 'text' },
      { name: 'UnitValue', index: 'UnitValue', width: 150, align: 'right', editable: true, edittype: 'text'}],
            onSelectRow: function(id) {
                if (id && id !== lastSel) {
                    jQuery('#list').restoreRow(lastSel);
                    jQuery('#list').editRow(id, true);
                    lastSel = id;
                }
            },
            pager: jQuery('#navbar'),
            viewrecords: true,
            height: 'auto',
            caption: 'Transactions detail'
        }).navGrid('#navbar', { edit: false, add: true, del: true });
        jQuery("input[type=text]").css("width", "2em");
        jQuery("#navbar table").css("margin", "0");

    }

Answer 1

我没有你的完整代码，所以我可能有一些轻微的语法错误，但试试这个。

而不是在编辑选项中嵌入日期选择器，而是使用一个编辑功能(oneditfunc)。

将日期的 colModel 更改为此

{ name: 'Date', index: 'Date', width: 120, align: 'left', editable: true },

将您的 onSelectRow 设置更改为:

onSelectRow: function(id) {
    if (id && id !== lastSel) {
        jQuery('#list').restoreRow(lastSel);

         // add a function that fires when editing a row as the 3rd parameter  
        jQuery('#list').editRow(id, true, onGridEdit);//<-- oneditfunc

         lastSel = id;
    }
 },

使用您现有的日期选择器选项，您的 onGridEdit 函数将如下所示

function onGridEdit(myRowID) {
    $("#" + myRowID + "_Date").datepicker({ dateFormat: 'dd/mm/yy', 
        constrainInput: false, showOn: 'button', buttonText: '...' });

    // this will set focus on the Invested column so the datepicker doesn't fire
    $("#" + myRowID + "_Invested").get(0).focus();
} 

但是，由于日期选择器不会随机触发，您可以简化日期选择器选项，并在选择该单元格时让它触发。

function onGridEdit(myRowID) {
    $("#" + myRowID + "_Date").datepicker({ dateFormat: 'dd/mm/yy' })

    // this will set focus on the Invested column so the datepicker doesn't fire
    $("#" + myRowID + "_Invested").get(0).focus();
}

希望有帮助，如果您有语法错误，请告诉我，我在内联编辑器中使用日期选择器。