Bộ chọn ngày trong jqGrid, ví dụ đơn giản?

Question

Có ai biết một ví dụ về việc thêm giao diện người dùng jquery DatePicker (hoặc một số khác có lẽ) trong jqGrid không? Tôi đang cố gắng làm cho nó hoạt động cho một mạng chỉnh sửa nội dòng.

Tôi đã tìm thấy một vài ví dụ, nhưng không có gì hiệu quả. Tôi muốn một cái gì đó thực sự đơn giản!

My Lưới thiết lập (không biết nếu nó nessecary cho câu hỏi này):

$(function() { 
    var lastsel; 
    $("#list").jqGrid({ 
     url: '@Url.Action("ExampleData", "Home")', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['Namn', 'Födelsedag', 'Adress', 'Stad'], 
     colModel: [ 
      { name: 'Name', index: 'Name', width: 130, editable: true }, 
      { name: 'Birthday', index: 'Birthday', width: 80, editable: true }, 
      // DatePicker for birthday 

      { name: 'Address', index: 'Address', width: 180, editable: true }, 
      { name: 'City', index: 'City', width: 80, editable: true }, 
     ], 
     pager: '#pager', 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortname: 'Name', 
     sortorder: 'desc', 
     viewrecords: true, 
     gridview: true, 
     width: 700, 
     onSelectRow: function (id) { 
      if (id && id !== lastsel) { 
       jQuery('#list').jqGrid('saveRow', lastsel); 
       jQuery('#list').jqGrid('editRow', id, true); 
       lastsel = id; 
      } 
     }, 
     editurl: '@Url.Action("Incoming", "Home")', 
     caption: 'Kontaktpersoner' 
    }); 

    jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: true }); 
    jQuery("#list").jqGrid('inlineNav', "#pager"); 

Answer 1

Như bạn có thể đọc trong jqGrid documentation có một tùy chọn dataInit cho việc này. Những gì bạn nên nhớ rằng sự kiện này được nâng lên trước phần tử được đưa vào DOM, vì vậy sử dụng setTimeout chỉ để được an toàn:

{ name: 'Birthday', index: 'Birthday', width: 80, editable: true editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } }, 

Answer 2

Sự đơn giản của các mã phụ thuộc của định dạng của dữ liệu mà bạn điền vào ' Cột sinh nhật '. Những gì bạn chủ yếu cần là bao gồm

editoptions: { dataInit: function (elem) { $(elem).datepicker(); } } 

làm thuộc tính bổ sung của cột 'Sinh nhật'. Đôi khi cần xác định onSelect gọi lại cho datepicker (xem here), đôi khi cần sử dụng setTimeout bổ sung hoặc thực hiện một số tùy chỉnh khác (xem the answer) bao gồm bản trình diễn làm việc.