jqgrid - 内联编辑模式下未显示日历图标

在内联编辑模式下，日历图标未显示。我使用jquery.ui.datepicker.jsjqgrid - 内联编辑模式下未显示日历图标

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Jquery Grid</title> 
     <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.1.custom.css" /> 
     <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" /> 
     <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" /> 
     <script src="js/jquery-1.6.4.js" type="text/javascript"></script> 
     <script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script> 
     <script src="js/jquery.layout.js" type="text/javascript"></script> 
     <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 
     <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
     <script src="js/jquery.corner.js" type="text/javascript"></script>  
     <script src="plugins/ui.multiselect.js" type="text/javascript"></script> 
     <script src="plugins/jquery.tablednd.js" type="text/javascript"></script> 
     <script src="plugins/jquery.contextmenu.js" type="text/javascript"></script> 
     <script src="js/jquery.ui.datepicker.js" type="text/javascript"></script>  
    </head> 
    <body> 
     <div id="content"> 
      <div class="userinfo"> 
       <table id="myjqgrid"></table> 
       <div id="Pager"></div>     
       <script src="js/myjqgrid.js" type="text/javascript"></script>     
      </div> 
     </div> 
    </body> 
</html>

JSON

{ 
    "colModel": [ 
     { 
      "name": "ID", 
      "label": "ID", 
      "width": 60, 
      "align": "left", 
      "jsonmap": "cells.0.value", 
      "sortable": true  
     }, 
     { 
      "name": "FirstName", 
      "label": "FirstName", 
      "width": 100, 
      "align": "left", 
      "jsonmap": "cells.1.value", 
      "sortable": false  
     }, 
     { 
      "name": "LastName", 
      "label": "LastName", 
      "width": 100, 
      "align": "left", 
      "jsonmap": "cells.2.value", 
      "sortable": false  
     }, 
     { 
      "name": "Date", 
      "label": "Date", 
      "width": 100, 
      "align": "left", 
      "jsonmap": "cells.3.value", 
      "sortable": false  
     } 
    ], 
    "colNames": [ 
     "ID", 
     "FirstName", 
     "LastName", 
     "Date" 
    ], 
    "mypage": { 
     "outerwrapper": { 
      "page":"1", 
      "total":"1", 
      "records":"20", 
      "innerwrapper": { 
       "rows":[ 
        { 
         "id":"1", 
         "cells": 
         [    
          { 
           "value":"12345", 
           "label": "ID", 
           "editable": false      
          }, 
          { 
           "value":"David", 
           "label": "FirstName", 
           "editable": false  
          }, 
          {       
           "value":"Smith", 
           "label": "LastName", 
           "editable": false       
          }, 
          {       
           "value":"01/02/2012", 
           "label": "Date", 
           "editable": true, 
           "editformat": "text"       
          }                       
         ]  
        }, 
        { 
         "id":"2", 
         "cells": 
         [    
          { 
           "value":"37546", 
           "label": "ID", 
           "editable": false      
          }, 
          { 
           "value":"Willy", 
           "label": "FirstName", 
           "editable": false  
          }, 
          {       
           "value":"Peacock", 
           "label": "LastName", 
           "editable": false       
          }, 
          {       
           "value":"01/02/2012", 
           "label": "Date", 
           "editable": true, 
           "editformat": "text"       
          }                       
         ]  
        } 
       ] 
      } 
     } 
    } 
}

jqGrid的定义

$(document).ready(function() { 
    var serverData = []; 
    var showCalImg = function(id){ 
     $("#" + id + "_date").datepicker({ 
      showOn: 'button', 
      buttonImageOnly: true, 
      dateFormat: 'mmddyy', 
      buttonImage: 'images/calendar.gif' 
     }); 
    } 
    $.ajax({ 
     type: "GET", 
     url: "myjqgrid.json", 
     data: "", 
     dataType: "json", 
     success: function(response){ 
      var columnData = response.mypage.outerwrapper, 
       columnNames = response.colNames, 
       columnModel = response.colModel; 

      $("#myjqgrid").jqGrid({ 
       datatype: 'jsonstring', 
       datastr: columnData,     
       colNames: columnNames, 
       colModel: columnModel, 
       jsonReader: { 
        root: "innerwrapper.rows",    
        repeatitems: false 
       }, 
       gridview: true, 
       pager: "#Pager", 
       rowNum: 21, 
       rowList: [21], 
       viewrecords: true,    
       recordpos: 'left', 
       multiboxonly: true, 
       multiselect: true, 
       sortname: 'ID', 
       sortorder: "desc", 
       sorttype: "text", 
       sortable: true, 
       caption: "<h2>MY JQGRID</h2>", 
       width: "1406",  
       height: "100%", 
       scrolloffset: 0,  
       loadonce: true,  
       cache: true, 
       onSelectRow: function(id) { 
        $("table#myjqgrid").editRow(id, true, showCalImg); 
       }, 
       loadComplete: function(){ 
        var rowCounter, cellCounter, cellProperty, itemRows; 
        for (rowCounter = 0; rowCounter < response.mypage.outerwrapper.innerwrapper.rows.length; rowCounter++) { 
         itemRows = response.mypage.outerwrapper.innerwrapper.rows[rowCounter]; 
         serverData[itemRows.recordnbr] = itemRows.cells;       
         var cellCount = response.mypage.outerwrapper.innerwrapper.rows[rowCounter].cells.length; 
         for (cellCounter = 0; cellCounter < cellCount; cellCounter += 1) { 
          cellProperty = response.mypage.outerwrapper.innerwrapper.rows[rowCounter].cells[cellCounter]; 
          var isEditable = cellProperty.editable; 
          var cellEditFormat = cellProperty.editformat; 
          if (isEditable === false) { 
           $("#myjqgrid").setColProp(cellProperty.label, { 
            editable: false 
           }); 
          }else{ 
           if (isEditable === true) { 
            $("#myjqgrid").setColProp(cellProperty.label, { 
             editable: true, 
             edittype: cellProperty.editformat, 
             editoptions: { 
              size: cellProperty.size, 
              maxlength: cellProperty.maxlength 
             } 
            }); 
           } 
          } 

         } 
        } 
       } 
      }); 
      $("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'}); 
     } 
    }); 
});

来源

2012-01-03 techlead

代码中的主要问题是JSON数据不包括size和maxlength属性。如果没有使用sizeeditoptions的属性，width: 98%将通过在<input>上进行内联编辑来设置，并且其中一个将无法显示该按钮。

接下来的问题是，您在Date列中使用"name": "Date"，但在代码中使用$("#" + id + "_date")而不是$("#" + id + "_Date")。所以datepicker将不会被初始化。

附加问题：如果您包含jquery-ui-1.8.14.custom.min.jsdatepicker的代码已包含在内，并且您不需要另外包含jquery.ui.datepicker.js。

最后一个问题是，datepicker与showOn: 'button'只适用于在单独的线程中启动datepicker而不是关于setTimeout JavaScript函数。

定影上述问题的描述的代码就可以了（见the demo），但图标的位置将不那么好后：

enter image description here

要解决的<img>可以使用的位置下面的代码datepicker初始化后直接：

$("#" + id + ' img.ui-datepicker-trigger').css({ 
    position: "relative", 
    top: "4px" 
});

其结果是，你将有如下结果（见the demo）

enter image description here

我个人更喜欢在按键不使用任何图像，并使用jQuery UI的按钮来代替。我创建了one more demo这显示了我看起来更好的方式。

与日期的列作为

{ name: 'invdate', index: 'invdate', width: 110, template: dateTemplate }

使用template我会限定。该dateTemplate我会定义为

var dateTemplate = {align: 'center', sorttype: 'date', editable: true, 
     formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y', 
     editoptions: { dataInit: initDateWithButton, size: 11 }, 
     searchoptions: { 
      sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], 
      dataInit: initDateWithButton, 
      size: 11,   // for the advanced searching dialog 
      attr: {size: 11} // for the searching toolbar 
     }};

（你可以选择其中任何一个对应您的要求日期的格式）。该功能initDateWithButton可以定义为

var initDateWithButton = function (elem) { 
     if (/^\d+%$/.test(elem.style.width)) { 
      // remove % from the searching toolbar 
      elem.style.width = ''; 
     } 
     // to be able to use 'showOn' option of datepicker in advance searching dialog 
     // or in the editing we have to use setTimeout 
     setTimeout(function() { 
      $(elem).datepicker({ 
       dateFormat: 'dd-M-yy', 
       showOn: 'button', 
       changeYear: true, 
       changeMonth: true, 
       showWeek: true, 
       showButtonPanel: true, 
       onClose: function (dateText, inst) { 
        inst.input.focus(); 
       } 
      }); 
      $(elem).next('button.ui-datepicker-trigger').button({ 
       text: false, 
       icons: {primary: 'ui-icon-calculator'} 
      }).find('span.ui-button-text').css('padding', '0.1em'); 
     }, 100); 
    };

其结果是，你必须看起来像图片上的

enter image description here

来源

2012-01-03 16:29:02 Oleg

非常感谢你，奥列格的日期选择器！ – techlead 2012-01-03 19:59:45

你知道如何解决这个问题吗？ - http://stackoverflow.com/questions/9107258/jqgrid-how-to-add-parameters-to-extraparam-of-saverow-in-inline-editing-mode – techlead 2012-02-02 05:42:50

@安德鲁斯：我不确定我理解什么你的意思是，但为什么不只是''invdate''列'宽度'从'width：110'增加到一些更高的值？ – Oleg 2012-03-08 14:47:44

jqgrid - 内联编辑模式下未显示日历图标

回答

相关问题