1
저는 JQGrid를 처음 사용하기 때문에 JQ Grid에서 도구 모음을 사용하여 검색 작업을 수행해야하는 화면을 개발하고 있습니다. JqGrid에 날짜 필드가 있고 검색 옵션에 DtPicker도 추가했습니다. 그러나 DTPicker에서 날짜를 선택하면 선택한 날짜에 대한 검색이 수행되지 않습니다. 선택한 날짜를 검색하는 방법을 알려주세요.JQ Grid 도구 막대에서 날짜 열을 검색합니다.
<table id="test">
</table>
<div id="divtest">
</div>
<div>
<asp:Label ID="count" runat="server" Text="Label"></asp:Label>
</div>
<script type="text/javascript">
$(document).ready
(
function CreateGrid()
{
var lastSel,lastSel1, Status = ["All", "Active", "InActive"],defaultStatus="Active";
jQuery("#test").jqGrid
(
{
url:'Test.aspx',
datatype:'json',
contentType: "application/json; charset=utf-8",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colNames:[ 'EMPID',
'EMPName',
'DOB',
'Designation',
'Genders',
'Status',
'Remarks',
'EMPType',
''
],
colModel:
[
{
name:'EMPID',
index:'EMPID',
width:120,
sorttype:'int',
editable:false,
key:true,
sortable: true,
search:true,
editoptions:{readonly:true}
},
{
name:'EMPName',
index:'EMPName',
width:250,
sortable: true,
align:"left",
editable:true,
size:100,
editrule:{custom:true,custom_func:checkName}
},
{
name:'DOB',
index:'DOB',
width:250,
sortable: true,
align:"left",
size:100,
editable:true,
sorttype:"date",
formatter: "date",
formatoptions: {newformat:'m/d/Y'},
editrule:{custom:true,custom_func:checkName}
,editoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui){
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
}
,searchoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui) {
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
},
search:true
},
{
name:'Designation',
index:'Designation',
width:250,
align:"left",
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value:"0:select;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer; 6:Tester;7:Sales;8:Others"}
,editrule:{custom:true,custom_func:checkDropDown}
,stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer;6:Tester;7:Sales;8:Others"
}
},
{
name:'Gender',
index:'Gender',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Male;2:Female"},
editrule:{custom:true,custom_func:checkDropDown},
stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:Male;2:Female"
}
},
{
name:'Status',
index:'Status',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Active;2:InActive"}
,editrule:{custom:true,custom_func:checkDropDown},
stype:'select'
,searchoptions: {
sopt:['eq'],value:":All;1:Active;2:InActive"
}
},
{
name:'Remarks',
index:'Remarks',
width:150,
sortable: true,
align:"left",
editable:true,
edittype:"textarea",
editoptions:{rows:'3',cols:'10'},
size:100
},
{
name:'Emptype',
index:'Emptype',
sortable: true,
formatter:'checkbox',
editable:true,
edittype:"checkbox",
stype:'select',
searchoptions: {
sopt:['eq','ne'],value:":All;true:In;false:Out"
}
},
{
name:'action',
index: 'action',
sortable:false,
align:'center',
formatter:"actions",
formatoptions:{key:true},
search:false
}
],
rowNum:10,
rowList:[2,5,10,15],
pager:'#divtest',
viewrecords:true,
width:0.96*screen.width,height:0.42*screen.height,
caption:'jqGrid',
emptyrecords: "No Results Found",
sortable:true,
sortorder: "desc",
search:true,
ignoreCase:true,
loadonce:true,
multiselect: true,
shrinkToFit:true,forceFit:true
,editurl:"Test4.aspx",
onAfterSaveCell:
function reload(result)
{
$("#grid").trigger("reloadGrid");
}
,onSelectRow:
function (id)
{ var tr;
if (id && id !== lastSel)
{
if (typeof lastSel !== "undefined")
{
$("#test").jqGrid('restoreRow', lastSel);
$("#test").trigger("reloadGrid",[{current:true}]);
}
lastSel = id;
}
}
}
).jqGrid('navGrid','#divtest',
{ edit:false,
add:true,
del:false,
search:false
},
//for Edit
{
},
//for Add
{
top:0.20*screen.height,
left:(screen.width-(0.65*screen.width)),
width: 0.35*screen.width,
align:'Center',
resizeable: true,
closeAfterAdd:true,
reloadAfterSubmit:true,
serializeEditData: function(data)
{
return (data);
},
beforeShowForm: function(form)
{
$("#DOB").datepicker
({
changeMonth: true,
recreateForm: true,
changeYear: true
});
}
},
//for Delete
{
},
//for Search
{ multipleSearch: true,
multipleGroup:true,
//showQuery: true,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0,
beforeShowSearch:function()
{
$("#test")[0].toggleToolbar();
},
onClose: function()
{
$("#test")[0].toggleToolbar();
}
}
).jqGrid('navButtonAdd','#divtest',
{
caption:" ",
width:'15',
buttonicon:"ui-icon-search",
onClickButton: function()
{
$("#test")[0].toggleToolbar();
},
position:"last"
})
//For displaying the blank tool bar on the grid
.jqGrid('filterToolbar',
{
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
}
)
.jqGrid('inlineNav',"#pager",{
edit:false,
editicon: "ui-icon-pencil",
add:true,
addicon:"ui-icon-plus",
cancel: true,
cancelicon:"ui-icon-cancel",
save: true,
saveicon:"ui-icon-disk"
}
);
//The Date DTPicker field in the Edit portion.
var initDateEdit =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
,
//The Date DTPicker field in the Search portion.
//But not working in this.
initDateSearch =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
;
//To hide the check box or select box in the Header of the JQGrid.
var myGrid = $("#test");
$("#cb_"+myGrid[0].id).hide();
var grid = $("#test"),
getColumnIndexByName = function (grid, columnName)
{
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++)
{
if (cm[i].name === columnName)
{return i;}
}
return -1;
};
}
);
</script>
감사와 안부, NMB