JqGrid如何添加将日期发布到列的edittype选中标记? [英] JqGrid How to add a edittype checkmark that posts date to column?
本文介绍了JqGrid如何添加将日期发布到列的edittype选中标记?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要有一个editype选中标记列，其中选中选中标记时，今天的日期会自动添加到选中标记旁边，并在提交到单元格之后添加；如果未选中，则日期将在editform上删除，并在提交时发送"null"，将单元格留空.我知道我可以使用
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }
但是我不知道如何在复选框旁边显示日期(例如pic)，然后在提交时将该日期添加到单元格中.请帮忙. 我的当前代码(答案存在)已更新:
`
<title>PWe</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/nhf.css" />
<script src="js/jquery-1.9.0.min.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-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'request.php',
editurl: "jqGridCrud.php",
datatype: 'xml',
mtype: 'GET',
height: 'AUTO',
width: 900,
scrollOffset:0,
hidegrid: false,
colNames:['id','Project', 'Assigned To','Dev','Approve','Due Date','Attachments','Notes','App','mydate2',""],
colModel :[
{name:'id', index:'id', width:28, align: 'center'},
{name:'name', index:'name', width:170, align:'left',editable:true, editoptions:{
size:60} },
{name:'id_continent', index:'id_continent', width:50, align:'right',editable:true,edittype:'select',
editoptions:{value: "Henry:Henry; Ramon:Ramon; Paul:Paul" },mtype:'POST' },
{name:'lastvisit', index:'lastvisit', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',editable:true, edittype: 'text',mtype:'POST' , editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,
{name:'cdate', index:'cdate', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy', edittype: 'text',editable:true ,mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,
{name:'ddate', index:'ddate', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',date:'true',editable:true, edittype: 'text',editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,
{name:'email', index:'email', width:50,align:'center',sortable:false,mtype:'POST',formatter:function(cellvalue, options, rowObject) {
if (cellvalue === undefined || cellvalue === null || cellvalue === 'NULL') {
return ''; // or just ""
}
return '<a href="' + cellvalue + '"target="_blank"><img src="file.png"> </a>';
}},
{name:'notes', index:'notes', width:100, align:'left',sortable:false, editable:true,edittype:'textarea',formatter:'link', editoptions:{
rows:10,cols:60} },
{ name: "hello", index:'hello',width: 17, align: "right", formatter: "checkbox",
editable: true,
edittype: "checkbox",
editoptions: {
value: "Yes:No",
defaultValue: "Yes",
dataEvents: [
{
type: "change",
data: { uncheckedDate: "" },
fn: function (e) {
if ($(this).is(':checked')) {
var date = new Date(Date.now()),
strDate = (date.getMonth() + 1) + "/" +
date.getDate() + "/" +
date.getFullYear();
$("#mydate").text(strDate);
} else {
$("#mydate").text(e.data.uncheckedDate);
}
}
}
]
}},
{name:'mydate2', index:'mydate2', width:40, align:'left',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',date:'true',editable:false} ,
{name:'act',index:'act',width:30 ,align:'left', sortable:false,formatter: "actions",cellattr: function () { return ' title="Delete Project"'; },
formatoptions: {
keys: true,
deltitle: 'delete',
delbutton: true,
editbutton:false,
delOptions: {
url: 'delete-perm.php',
afterShowForm: function ($form) {
$("#dData", $form.parent()).click();
},
msg: "Remove Selected Project?",
bSubmit: "Remove",
bCancel: "Cancel"
}
}},
],
pager: '#pager',
rowNum:30,
rowList:[30,40,80],
sortname: 'ddate',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Current Assignments',
ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow', rowid,
{width:550,Height:550,recreateForm:true,closeAfterEdit:true,
closeOnEscape:true,reloadAfterSubmit:true, modal:true,mtype:'post',top:350,left: 30});}
});
jQuery.extend(jQuery.jgrid.nav, {
deltitle: '',
delcaption: 'Project Complete'
},{delicon: "ui-icon-circle-check",deltext: "Project Complete"});
$("#list").jqGrid("navGrid", "#pager", { add: false, search: false, refresh:false,edit:false }).navButtonAdd('#pager',{
caption:"Export to Excel",
buttonicon:"ui-icon-save",
onClickButton: function () {
jQuery("#list").jqGrid('excelExport', { url: 'ExportExcel.php' });
},
position:"last",
});
jQuery.extend(jQuery.jgrid.edit, {
recreateForm: true,
beforeShowForm: function ($form) {
$("<span id='mydate'></span>").insertAfter("#hello");
$("#hello").trigger("change"); // to set date
},
onclickSubmit: function () {
return {
mydate2: $("#mydate").text()
}
},
afterclickPgButtons: function () {
$("#hello").trigger("change"); // to set date
} });
// setup grid print capability. Add print button to navigation bar and bind to click.
setPrintGrid('list','pager','Current Assignments');
});
解决方案
有很多方法可以实现您的需求.第一个是edittype: "custom"的用法.它使您可以在编辑表单中创建任何编辑元素.内联编辑或搜索"对话框中也可以使用相同的方法. 该演示，来自这个旧的描述了所有更详细的信息.
另一种方法更容易.可以只添加一个控件，例如<span> 复选框.可以填充跨度并根据chackbox的更改对其进行更改. 该演示演示了该方法.该代码最重要的部分如下:
该网格具有可编辑的列，该列用edittype: "checkbox"关闭".我使用表单编辑来编辑网格.表单编辑会创建编辑控件，这些控件的ID与name属性的值相同.因此，用于编辑编辑表单中已关闭"列的复选框将具有id="closed".在beforeShowForm回调内部，我在复选框"closed"之后直接用id="mydate"插入了其他<span>元素:
beforeShowForm: function () {
$("<span id='mydate'></span>").insertAfter("#closed");
// we trigger change event on the chechbox only to execute once
// the custom event handler which fills the span #mydate
$("#closed").trigger("change");
}
网格的已关闭"列的定义包含editoptions.dataEvents，它定义了更改"事件的处理程序.事件处理程序根据复选框的状态用id="mydate"填充范围:
colModel: [
...
{ name: "closed", width: 70, align: "center", formatter: "checkbox",
editable: true,
edittype: "checkbox",
editoptions: {
value: "Yes:No",
defaultValue: "Yes",
dataEvents: [
{
type: "change",
data: { uncheckedDate: "9/11/1964" },
fn: function (e) {
if ($(this).is(':checked')) {
var date = new Date(Date.now()),
strDate = (date.getMonth() + 1) + "/" +
date.getDate() + "/" +
date.getFullYear();
$("#mydate").text(strDate);
} else {
$("#mydate").text(e.data.uncheckedDate);
}
}
}
]
},
stype: "select",
searchoptions: {
sopt: ["eq", "ne"],
value: ":Any;true:Yes;false:No"
}
},
结果表单如下图所示
其他编辑回调
afterclickPgButtons: function () {
$("#closed").trigger("change"); // to set date
}
在用户单击下一个/上一个记录"按钮后，刷新复选框的新日期.
要发送其他数据和madate <span>中的数据，我使用了onclickSubmit回调
onclickSubmit: function () {
return {
myDate: $("#mydate").text()
}
}
在提交编辑表单时将日期作为myDate参数发送.
I need to have an editype checkmark column where when checkmark is checked today's date automatically is added next to checkmark and after submit to cell and if unchecked the date is removed on editform and on submit sends "null" to leave cell empty. I know I can use use
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }
But I have no idea how to display the date next to the checkbox(like pic)and then add that date to cell on submit. Help please. My code as it currently as it exists UPDATED with answer:
`
<title>PWe</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/nhf.css" />
<script src="js/jquery-1.9.0.min.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-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'request.php',
editurl: "jqGridCrud.php",
datatype: 'xml',
mtype: 'GET',
height: 'AUTO',
width: 900,
scrollOffset:0,
hidegrid: false,
colNames:['id','Project', 'Assigned To','Dev','Approve','Due Date','Attachments','Notes','App','mydate2',""],
colModel :[
{name:'id', index:'id', width:28, align: 'center'},
{name:'name', index:'name', width:170, align:'left',editable:true, editoptions:{
size:60} },
{name:'id_continent', index:'id_continent', width:50, align:'right',editable:true,edittype:'select',
editoptions:{value: "Henry:Henry; Ramon:Ramon; Paul:Paul" },mtype:'POST' },
{name:'lastvisit', index:'lastvisit', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',editable:true, edittype: 'text',mtype:'POST' , editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,
{name:'cdate', index:'cdate', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy', edittype: 'text',editable:true ,mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,
{name:'ddate', index:'ddate', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',date:'true',editable:true, edittype: 'text',editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,
{name:'email', index:'email', width:50,align:'center',sortable:false,mtype:'POST',formatter:function(cellvalue, options, rowObject) {
if (cellvalue === undefined || cellvalue === null || cellvalue === 'NULL') {
return ''; // or just ""
}
return '<a href="' + cellvalue + '"target="_blank"><img src="file.png"> </a>';
}},
{name:'notes', index:'notes', width:100, align:'left',sortable:false, editable:true,edittype:'textarea',formatter:'link', editoptions:{
rows:10,cols:60} },
{ name: "hello", index:'hello',width: 17, align: "right", formatter: "checkbox",
editable: true,
edittype: "checkbox",
editoptions: {
value: "Yes:No",
defaultValue: "Yes",
dataEvents: [
{
type: "change",
data: { uncheckedDate: "" },
fn: function (e) {
if ($(this).is(':checked')) {
var date = new Date(Date.now()),
strDate = (date.getMonth() + 1) + "/" +
date.getDate() + "/" +
date.getFullYear();
$("#mydate").text(strDate);
} else {
$("#mydate").text(e.data.uncheckedDate);
}
}
}
]
}},
{name:'mydate2', index:'mydate2', width:40, align:'left',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',date:'true',editable:false} ,
{name:'act',index:'act',width:30 ,align:'left', sortable:false,formatter: "actions",cellattr: function () { return ' title="Delete Project"'; },
formatoptions: {
keys: true,
deltitle: 'delete',
delbutton: true,
editbutton:false,
delOptions: {
url: 'delete-perm.php',
afterShowForm: function ($form) {
$("#dData", $form.parent()).click();
},
msg: "Remove Selected Project?",
bSubmit: "Remove",
bCancel: "Cancel"
}
}},
],
pager: '#pager',
rowNum:30,
rowList:[30,40,80],
sortname: 'ddate',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Current Assignments',
ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow', rowid,
{width:550,Height:550,recreateForm:true,closeAfterEdit:true,
closeOnEscape:true,reloadAfterSubmit:true, modal:true,mtype:'post',top:350,left: 30});}
});
jQuery.extend(jQuery.jgrid.nav, {
deltitle: '',
delcaption: 'Project Complete'
},{delicon: "ui-icon-circle-check",deltext: "Project Complete"});
$("#list").jqGrid("navGrid", "#pager", { add: false, search: false, refresh:false,edit:false }).navButtonAdd('#pager',{
caption:"Export to Excel",
buttonicon:"ui-icon-save",
onClickButton: function () {
jQuery("#list").jqGrid('excelExport', { url: 'ExportExcel.php' });
},
position:"last",
});
jQuery.extend(jQuery.jgrid.edit, {
recreateForm: true,
beforeShowForm: function ($form) {
$("<span id='mydate'></span>").insertAfter("#hello");
$("#hello").trigger("change"); // to set date
},
onclickSubmit: function () {
return {
mydate2: $("#mydate").text()
}
},
afterclickPgButtons: function () {
$("#hello").trigger("change"); // to set date
} });
// setup grid print capability. Add print button to navigation bar and bind to click.
setPrintGrid('list','pager','Current Assignments');
});
解决方案
There are many ways to implement your requirements. The first one is the usage of edittype: "custom". It allows you to create any editing element in edit form. The same approach work in inline editing or in Searching dialog. The demo from the answer and this old one describes all more detailed.
Another way is more easy. One can just add one more control, for example <span> after the checkbox. One can fill the span and change it based on changes of the chackbox. The demo demonstrates the approach. The most important part of the code is the following:
The grid have the editable column "closed" with edittype: "checkbox". I use form editing to edit the grid. Form editing creates editing controls which ids are the same as the value of name property. So the checkbox for editing the column "closed" in the edit form will have the id="closed". Inside of beforeShowForm callback I insert additional <span> element with id="mydate" directly after the checkbox "closed":
beforeShowForm: function () {
$("<span id='mydate'></span>").insertAfter("#closed");
// we trigger change event on the chechbox only to execute once
// the custom event handler which fills the span #mydate
$("#closed").trigger("change");
}
The definition of the column "closed" of the grid contains editoptions.dataEvents which defines the handler of "change" event. The event handler fills the span with id="mydate" based on the state of the checkbox:
colModel: [
...
{ name: "closed", width: 70, align: "center", formatter: "checkbox",
editable: true,
edittype: "checkbox",
editoptions: {
value: "Yes:No",
defaultValue: "Yes",
dataEvents: [
{
type: "change",
data: { uncheckedDate: "9/11/1964" },
fn: function (e) {
if ($(this).is(':checked')) {
var date = new Date(Date.now()),
strDate = (date.getMonth() + 1) + "/" +
date.getDate() + "/" +
date.getFullYear();
$("#mydate").text(strDate);
} else {
$("#mydate").text(e.data.uncheckedDate);
}
}
}
]
},
stype: "select",
searchoptions: {
sopt: ["eq", "ne"],
value: ":Any;true:Yes;false:No"
}
},
As the result the form looks like on the picture below
Additional editing callback
afterclickPgButtons: function () {
$("#closed").trigger("change"); // to set date
}
refreshes the date new the checkbox after the user clicks next/previous record button.
To send additional data with the data from madate <span> I used onclickSubmit callback
onclickSubmit: function () {
return {
myDate: $("#mydate").text()
}
}
which send the date as myDate parameter during submitting of editing form.
这篇关于JqGrid如何添加将日期发布到列的edittype选中标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
