Проблема с датчиком выбора JQuery внутри jqGrid с showOn: 'button'

Question

Я использую jqGrid и хочу интегрировать внутри JQuery datePicker. Это работало хорошо, пока я не добавил showOn: 'button' . С этим редактирование больше не работает. Я действительно хочу, чтобы всплывающее окно появлялось только при нажатии кнопки, потому что дата - это первая ячейка моей строки, и я использую встроенное редактирование, поэтому при каждом выборе строки отображается указатель даты :-(. Если я использую одни и те же параметры выбора даты вне 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();
}

Надеюсь, это поможет, если у вас есть синтаксические ошибки, пожалуйста, дайте мне знать, я использую указатели даты в моих встроенных редакторах.

Answer 2

Datepicker должен знать положение элемента в DOM, и перед вставкой элемента в DOM поднимается datainit - это проблема, поэтому используйте функцию setTimeout, например:

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

Это должно решить эту проблему.

Answer 3

Вы также можете попробовать с новым кодом для jqgrid: http://github.com/tonytomov/jqGrid/commit/ccea1a282258d63305c5b90091be2ecffa3c4ab2