带有showOn的jqGrid内的JQuery datepicker问题：'button'答案

【问题标题】：Problem with JQuery datepicker inside jqGrid with showOn : 'button'带有showOn的jqGrid内的JQuery datepicker问题：'button'
【发布时间】：2009-10-10 03:39:23
【问题描述】：

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

请帮忙

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

    }

【问题讨论】：

太棒了——这篇文章帮助我弄清楚了如何使用日期选择器。谢谢！

标签： jquery-ui jqgrid

【解决方案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();
}

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

【讨论】：

看起来不错。明天我会在将其标记为已回答之前尝试此操作。谢谢
它有效。我唯一要做的就是调整样式以查看按钮添加仅此而已。非常感谢。
简单快捷。非常感谢。

【解决方案2】：

您也可以尝试使用 jqgrid 的新代码： http://github.com/tonytomov/jqGrid/commit/ccea1a282258d63305c5b90091be2ecffa3c4ab2

【讨论】：

谈同样的事情：trirand.com/blog/?page_id=393/help/…

【解决方案3】：

Datepicker 需要知道元素在 DOM 中的位置，并在将元素插入 DOM 之前引发 datainit - 这就是问题所在，因此请像这样使用 setTimeout 函数：

dataInit:function(elem){setTimeout(function(){
$(elem).datepicker(); }, 10); }

应该可以解决这个问题。

【讨论】：