問題與jQueryGrid中的jQuery datepicker與showOn：'按鈕'

Question

我使用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"); 

    } 

Answer 1

我沒有完整的代碼，所以我可能有一些輕微的語法錯誤，但嘗試。

，而不是嵌入在editoptions的日期選擇器上編輯功能使用（oneditfunc）

change使用現有的選項的日期選擇您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(); 
} 

然而

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; 
    } 
}, 

：你對日本

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

colModel

您onSelectRow設置中更改此由於日期選擇器不會隨機觸發，因此可以簡化日期選擇器選項，並在選擇該單元格時讓它啓動。

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

日期選擇器需要知道的元素到DOM中的位置和datainit的元素插入到DOM之前提出的 - 這就是問題所在，所以使用像這樣的setTimeout函數：

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

它應該解決這個問題。