Jquery 关闭日期选择器时jqgrid保存单元格编辑
我有以下JQGridJquery 关闭日期选择器时jqgrid保存单元格编辑,jquery,jqgrid,Jquery,Jqgrid,我有以下JQGrid $("#requestTable").jqGrid({ url: url, datatype: 'json', mtype: 'GET', altRows: 'true', colNames: ['id', 'Request Date', 'Name', 'HomePhone', 'Address', 'Contact Date', 'Email'], colModel: [ { na
$("#requestTable").jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
altRows: 'true',
colNames: ['id', 'Request Date', 'Name', 'HomePhone', 'Address', 'Contact Date', 'Email'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'RequestDate', index: 'RequestDate', width: 100 },
{ name: 'FullName', index: 'FullName', width: 125, sortable: false },
{ name: 'HomePhone', index: 'CabinetColor', width: 90, sortable: false },
{ name: 'FullAddressString', index: 'ShellColor', width: 260, sortable: false },
{ name: 'DealerContactDate', index: 'DealerContactDate', width: 105, editable: true,
editoptions:{
dataInit:function(element){
$(element).datepicker();
}
}
},
{ name: 'Email', index: 'Email', width: 110, sortable: false }
],
cellEdit:true,
cellurl:cellurl,
pager: '#pager',
rowNum: 50,
rowList: [ 25, 50, 75, 100],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
height: "100%"
});
})
如您所见,DealerContactDate单元格可以使用日期选择器进行编辑。
在datepicker中选择日期并关闭后,jqgrid是否会立即保存数据?
现在,用户必须从日期选择器中选择一个日期。然后再次选择该文本框并按enter键,这太复杂了。
谢谢
更新:
我在jqrid之外为row和cell创建了两个变量,然后在网格afterEditCell事件上设置这些变量。然后在datepickers onSelect事件上,将这些消息传递给saveCell函数,它似乎可以工作
var saverow = 0;
var savecol = 0;
$("#requestTable").jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
altRows: 'true',
colNames: ['id', 'Request Date', 'Name', 'HomePhone', 'Address', 'Contact Date', 'Email'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'RequestDate', index: 'RequestDate', width: 100 },
{ name: 'FullName', index: 'FullName', width: 125, sortable: false },
{ name: 'HomePhone', index: 'CabinetColor', width: 90, sortable: false },
{ name: 'FullAddressString', index: 'ShellColor', width: 260, sortable: false },
{ name: 'DealerContactDate', index: 'DealerContactDate', width: 105, editable: true,
editoptions: {
dataInit: function (element) {
$(element).datepicker({
onSelect: function () {
$("#requestTable").jqGrid("saveCell", saverow, savecol);
}
});
}
}
},
{ name: 'Email', index: 'Email', width: 110, sortable: false }
],
cellEdit: true,
pager: '#pager',
rowNum: 50,
rowList: [25, 50, 75, 100],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
height: "100%",
cellurl: cellurl,
afterEditCell: function (id, name, val, IRow, ICol) {
saverow = IRow;
savecol = ICol;
}
});
您应该能够将来自datePicker的事件与来自jqGrid的事件结合使用。比如:
$(element).datepicker({
onSelect: function(dateText, inst) {
var $input = inst.input; // the datepicker input
var $row = $input.parents("tr");
$("#requestTable").jqGrid('saveRow',$row.attr("id"), false); // this would probably need some work, I have no experience with jqGrid
});
嗨,我有不同的问题。i、 e.从日期选择器中选择日期后聚焦单元格。我从上面的答案1中修复了它,尽管这个答案不是针对我的问题的。 基本上,为了在jQGrid中选择日期后保持单元格聚焦, -在日期选择器onSelect方法上激发“saveCell”事件,如Answer1所示。 -在beforeEditCell方法中分配saveRow和saveCol变量(&S)
感谢大家。确保id正确且存在,只需通过警报$row.attrid对其进行测试;在您调用$requestTable.jqGrid'saveRow'之前,…我需要做一些稍微不同的事情,但您让我走上正轨,这样您就可以得到答案。我更新的代码显示了我是如何让它工作的。