如何在jqGrid的添加行对话框中添加datepicker？

答

经过一段时间的研究，我根据其他人的不同意见将这些东西混合在一起。我假设你已经有了CSS和JS datepicker文件。如果没有，请告诉我，我会为你追踪。内<head>标签，把下面的后您<link rel="stylesheet"... href="css/ui.jqgrid.css" />行：

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />

然后，仍然在该<head>标签提个醒，插入以下后您<script src="js/jquery-ui-1.7.2.custom.min.js" ...></script>

<script type="text/javascript" src="js/ui.datepicker.js"></script>

现在，在colmodel数组中，您将要将datepicker JS代码添加到将使用datepicker的字段中。就我而言，我有一个'上次修改日期'字段。所以colmodel阵列内，你的代码应该是这个样子：

{name:'last_modified_date', index:'last_modified_date', width:90, editable:true, editoptions:{size:20, 
        dataInit:function(el){ 
         $(el).datepicker({dateFormat:'yy-mm-dd'}); 
        }, 
        defaultValue: function(){ 
        var currentTime = new Date(); 
        var month = parseInt(currentTime.getMonth() + 1); 
        month = month <= 9 ? "0"+month : month; 
        var day = currentTime.getDate(); 
        day = day <= 9 ? "0"+day : day; 
        var year = currentTime.getFullYear(); 
        return year+"-"+month + "-"+day; 
        } 
       } 
       },

而且，我敢肯定你已经检查了这一点，但一定要参观jqGrid wiki。这个wiki有这个工具的文档，这个博客也有论坛，每天提问。事实上，我认为插件作者Tony甚至在他的示例页面上都有一个UI日期选择器示例。

希望有帮助。

答

您需要将此行添加到updateDialog或到addDialog：

afterShowForm: function (formId) { 
      $("#CreationDate").datepicker(); 
     }

希望这有助于。

+0

它为我工作，tqvm。 – 2016-03-18 09:14:20

答

我修改了一些我发现的代码片段。我想在本地数据中使用JSON，并将datepicker作为我的添加行按钮的一部分，并且工作正常。

Javascript: 
... 
<script type="text/javascript"> 
    // Here we set the altRows option globally 
    jQuery.extend(jQuery.jgrid.defaults, { altRows:true }); 
</script> 
<script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
</script> 
<script type="text/javascript"> 
    $(function() { 
     $("#list").jqGrid({ 
      datatype: "jsonstring", 
      jsonReader: { 
       repeatitems: false, 
       root: function (obj) { return obj; }, 
       page: function (obj) { return 1; }, 
       total: function (obj) { return 1; }, 
       records: function (obj) { return obj.length; } 
      }, 
      colNames: ['Date', 'Customer ID', 'Customer Name', 'Action'], 
      colModel: [ 
       { name: 'date' , index: 'date', width: 70, align: "center" }, 
       { name: 'custID' , index: 'custID', width: 70, align: "center" }, 
       { name: 'custName', index: 'custName', width: 150, align: "center", sortable: false }, 
       { name: 'custID', index: 'custID', width: 50, align: "center", sortable: false, formatter: editLink }, 
      ], 
      width: "650", 
      pager: "#pager", 
      rowNum: 10, 
      rowList: [10, 20, 30], 
      viewrecords: true, 
      gridview: true, 
      autoencode: true 
      //, 
      //caption: "jqGrid Example" 
     }); 
    }); 

</script> 
<script type="text/javascript"> 
function editLink(cellValue, options, rowdata, action) { 
    return '<button onclick=editcall("' + rowdata.date + '","' + rowdata.custID + '","' + rowdata.custName + '")>edit</button>'; 
} 

function editcall(date, custID, custName) { 
    $("#datepicker").val(date) 
    $("#Text1").val(custID) 
    $("#Text2").val(custName) 
} 

function addnewRow() { 
    var grid = jQuery("#list"); 
    var myData = { "date": $("#datepicker").val(), "custID": $("#Text1").val(), "custName": $("#Text2").val() }; 
    var recnum = grid.getGridParam('records'); 
    grid.jqGrid('addRowData', recnum, myData); 
    $("#datepicker").val(""); 
    $("#Text1").val(""); 
    $("#Text2").val("") 
} 

function updateRow() { 
    var grid = jQuery("#list"); 
    var myData = { "date": $("#datepicker").val(), "custID": $("#Text1").val(), "custName": $("#Text2").val() }; 
    var recnum = grid.jqGrid('getGridParam', 'selrow'); 
    grid.jqGrid('setRowData', recnum, myData); 
    $("#datepicker").val(""); 
    $("#Text1").val(""); 
    $("#Text2").val("") 
}

HTML: 
... 
<div> 
     <input type="text" id="datepicker" size="15">&nbsp;&nbsp; 
     <input id="Text1" type="text" size="15"/>&nbsp;&nbsp; 
     <input id="Text2" type="text" size="20"/>&nbsp;&nbsp; 
     <button onclick="addnewRow()">Submit</button>&nbsp;&nbsp; 
     <button onclick="updateRow()">Update</button>&nbsp;&nbsp; 
     <input id="Button1" type="button" value="Add Row" onclick="return addnewRow();" /> 

     <table id="list"> 
      <tr> 
       <td></td> 
      </tr> 
     </table> 
     <div id="pager"></div> 
    </div>

答

要获得在创建/编辑弹出的日期选择器，你需要将此行添加到updateDialog或到addDialog：

afterShowForm: function (formId) { 
    $("#CreationDate").datepicker(); 
}

如果你想格式化它，你可以在datepicker（）中设置格式选项。如：

afterShowForm: function (formId) { $("#CreationDate").datepicker({ 
      dateFormat: "dd/M/yy"});}

如何在jqGrid的添加行对话框中添加datepicker？

相关推荐