Question

我使用jqGrid，我想在里面集成一个JQuery datePicker。它运行良好，直到我添加 showOn：'按钮'。有了它，编辑不再起作用。我真的只想在按钮点击时弹出选择器，因为date是我行的第一个单元格，我使用内联编辑，所以每行选择显示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");

    }

Answer 1

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

而不是在编辑选项中嵌入datepicker，而是使用on edit函数（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;
    }
 },

使用现有的datepicker选项，你的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();
}

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

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

希望有帮助，如果您有语法错误，请告诉我，我在我的内联编辑器中使用了datepickers。

Answer 2

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

Answer 3

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

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

应该解决这个问题。

带有showOn的jqGrid里面的JQuery datepicker问题：'button'

3 个答案: