Вы должны создать сетку с $("#list").jqGrid({...}) и добавить кнопки навигации с navGrid только один раз . Я полагаю, что ваша функция BindGrid будет вызываться дважды в вашей программе, поэтому у вас есть все кнопки два раза. Вы можете легко проверить это, добавив дополнительную alert("in BindGrid"); где-то внутри BindGrid функции.
ОБНОВЛЕНО : Я прочитал ваш код и вот мое предложение:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$("#StartDate").datepicker({
changeMonth: false,
changeYear: false
});
$("#EndDate").datepicker();
var checkMileageLimit = function(value, colname) {
alert($("#TotalMileage").val());
if (value > $("#TotalMileage").val()) {
alert(false);
return ["false", "value shuld be less"];
} else {
alert(true);
return ["true",""];
}
};
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: {
StartDate: function() { return $('#StartDate').val(); },
EndDate: function() { return $('#EndDate').val(); },
siteId: function() { return $('#ListFacility') ? $('#ListFacility').val() : -1; }
},
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time',
'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM',
'TouchLimit AM', 'Total Touches', 'Total Mileage', 'WeekDay'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, /* key: true,*/editable: false, editrules: { edithidden: false }, hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text', editrules: { required: true, date: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, editable: true, edittype: 'select', formatter: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' }, editoptions: { value: { o: 'Open', c: 'closed'}} },
{ name: 'StartTime', index: 'StartTime', width: 100, editable: true, formatter: 'date', masks: 'ShortTime', edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, editable: true, edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50, editable: true,
edittype: 'text', editrules: { custom: true, custom_func: checkMileageLimit,
required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'WeekDay', index: 'WeekDay', width: 200, editable: false, hidden: false}
],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: false,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend) {
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}
}).navGrid('#listPager',
{ edit: true, add: false, del: false, search: false, refresh: true }
);
$('#btnSubmit').click(function () {
$("#list").trigger("reloadGrid");
});
});
//]]>
</script>
Я рекомендую вам использовать postData со свойствами в качестве функций , тогда при каждом обновлении будет вызываться функция, и вы можете получить фактические значения из соответствующих элементов управления HTML. Вы можете прочитать больше о технике в моем старом ответе . Другие небольшие изменения вы, вероятно, найдете сами.
Более того, заявление
$('#ListFacility') ? $('#ListFacility').val() : -1;
мне кажется неправильным, потому что $('#ListFacility') всегда будет объектом. Потому что вы не публикуете и HTML-код, я не могу это исправить. Ты должен сделать это сам.
Более того, возможно, у вас будет лучшая производительность в вашей сетке, если вы будете использовать gridview:true и установить цвет внутри функции loadComplete вместо использования функции afterInsertRow. См. этот старый ответ в качестве примера и описания опции gridview .