Xin chào, tôi đang sử dụng jqGrid và tôi tự hỏi, làm cách nào để thêm datepicker của jQueryUI vào một số trường nhập khi trong hộp thoại thêm hàng?Làm cách nào để thêm datepicker vào hộp thoại thêm hàng trong jqGrid?
Ngoài ra, làm cách nào để kiểm tra xem đầu vào đã nhập có hợp lệ không?
Cảm ơn trước!
Sau khi nghiên cứu bản thân mình một thời gian dài, đây là những gì tôi nghiền với nhau dựa trên đầu vào khác nhau từ những người khác. Tôi đang giả định rằng bạn đã có các tệp CSS datepicker và CSS. Nếu không, hãy cho tôi biết và tôi sẽ theo dõi chúng cho bạn. Trong <head> thẻ, đặt sau sau<link rel="stylesheet"... href="css/ui.jqgrid.css" /> bạn dòng:
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
Sau đó, vẫn trong <head> thẻ phiền bạn, chèn các sau đây sau khi bạn <script src="js/jquery-ui-1.7.2.custom.min.js" ...></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
Bây giờ, trong mảng colmodel, bạn sẽ thêm mã JS datepicker của mình vào trường mà trong đó datepicker sẽ được sử dụng. Trong trường hợp của tôi, tôi có một trường 'Ngày sửa đổi lần cuối'. Vì vậy, trong các mảng colmodel, mã của bạn nên tìm một cái gì đó như thế này:
{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;
}
}
},
Ngoài ra, tôi chắc chắn rằng bạn đã kiểm tra này ra nhưng hãy chắc chắn đến thăm jqGrid wiki. Wiki có tài liệu về công cụ và blog cũng có các diễn đàn nơi các câu hỏi được hỏi hàng ngày. Trong thực tế, tôi nghĩ Tony, tác giả của plugin, thậm chí có một ví dụ về datepicker UI trên trang ví dụ của anh ấy.
Hy vọng điều đó sẽ hữu ích.
Bạn cần phải thêm dòng này vào updateDialog hoặc đến addDialog:
afterShowForm: function (formId) {
$("#CreationDate").datepicker();
}
Hope this helps.
Tôi đã sửa đổi một số đoạn mã mà tôi đã tìm thấy. Tôi muốn sử dụng JSON với dữ liệu cục bộ, cùng với việc đặt datepicker như một phần của nút thêm hàng của tôi và điều này làm việc.
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">
<input id="Text1" type="text" size="15"/>
<input id="Text2" type="text" size="20"/>
<button onclick="addnewRow()">Submit</button>
<button onclick="updateRow()">Update</button>
<input id="Button1" type="button" value="Add Row" onclick="return addnewRow();" />
<table id="list">
<tr>
<td></td>
</tr>
</table>
<div id="pager"></div>
</div>
Để có được datepicker trong tạo/chỉnh sửa popup, bạn cần phải thêm dòng này vào updateDialog hoặc đến addDialog:
afterShowForm: function (formId) {
$("#CreationDate").datepicker();
}
Nếu bạn muốn để định dạng nó, bạn có thể đặt tùy chọn định dạng trong datepicker() .. như:
afterShowForm: function (formId) { $("#CreationDate").datepicker({
dateFormat: "dd/M/yy"});}
Nó làm việc cho tôi, tqvm. –