我需要完成两项工作，
1.在其中一列的jqgrid的过滤器工具栏中添加datepicker。因此，当我选择datepicker时，我将过滤日期列。
2.当我点击网格中的行的编辑时，将显示一个弹出窗口，其中我们将拥有所有列值。在那一个值是DateTime所以我需要在该字段中的datepicker所以在更新期间我可以使用指定列的datepicker。
我正在动态添加标头值，类型和网格值。
//代码：
var colname = [];
var colHeader = [];
$.ajax({
url: '@(Url.Action("LoadColumns", "Home"))',
datatype: 'json',
mtype: 'GET',
success: OnComplete,
error: OnFail
});
function OnComplete(result) {
$.each(result.rows, function (inx,val) {
colHeader.push(this.Name);
switch (this.Datatype) {
case 'int':
colname.push({ name: this.Name, index: this.Name, width: 200, align: 'left', sortable: true, editable: false, sorttype: 'int' });
break;
case 'String':
colname.push({ name: this.Name, index: this.Name, width: 200, align: 'left', sortable: true, editable: true });
break;
case 'DateTime':
colname.push({
name: this.Name, index: this.Name, width: 200, align: 'left', sortable: true, editable: true, sorttype: 'date',
formatter: 'date', formatoptions: { newformat: 'm-d-Y' }, datefmt: 'm-d-Y'
});
break;
case 'dropdown':
if (this.ValueList != null && this.ValueList != '') {
var ValueListArray = this.ValueList.split(" ");
var valueListItems = '';
$.each(ValueListArray, function (index, values) {
valueListItems = valueListItems + values + ":" + values + ";";
});
}
colname.push({
name: this.Name, index: this.Name, width: 200, edittype: "select", formatter: 'select',
editoptions: { value: valueListItems.slice(0, -1) }, stype: 'select'
, searchoptions: { value: ':All;' + valueListItems.slice(0, -1) }, align: 'left', sortable: true, editable: true
});
break;
}
});
jQuery("#jQGridDemo").jqGrid({
url: '@(Url.Action("LoadData", "Home"))',
datatype: "json",
mtype: 'GET',
colNames: colHeader,
colModel: colname,
jsonReader: {
root: 'rows',
id: 'ProductId',
repeatitems: false
},
rowNum: 10,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
sortname: '_id',
viewrecords: true,
loadonce: true,
sortorder: 'desc',
caption: "Grid",
gridview: true,
autoencode: true,
ignoreCase: true,
editurl: '@(Url.Action("EditData", "Home"))'
});
jQuery("#jQGridDemo").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{ //EDIT
// height: 300,
// width: 400,
// top: 50,
// left: 100,
// dataheight: 280,
closeOnEscape: true, //Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
debugger;
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeAfterAdd: true, //Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
alert(response);
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true}]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{//SEARCH
closeOnEscape: true
}
);
}
function OnFail(result) {
alert('Failed');
}
不确定我错在哪里或在哪里添加datepicker。有什么帮助吗？