1. 首頁
  2. 問答
  3. 如何在jqGrid的添加行對話框中添加datepicker？

如何在jqGrid的添加行對話框中添加datepicker？

2010-01-28 108 views

回答

17

經過一段時間的研究，我根據其他人的不同意見將這些東西混合在一起。我假設你已經有了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日期選擇器示例。

希望有幫助。

來源

2010-01-28 15:38:43

2

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

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

希望這有助於。

來源

2014-09-01 07:27:52

+0

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

0

我修改了一些我發現的代碼片段。我想在本地數據中使用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>

來源

2014-09-11 17:10:58

1

要獲得在創建/編輯彈出的日期選擇器，你需要將此行添加到updateDialog或到addDialog：

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

如果你想格式化它，你可以在datepicker（）中設置格式選項。如：

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

來源

2016-10-01 05:51:23

相關問題

 相關問題