0
這是我的代碼。我有自定義搜索欄和按鈕。網格應該默認加載json數據。基於搜索字段，它應該重新加載搜索點擊。兩種方式，過濾器都不起作用。jqGrid客戶端過濾器不能正常工作
$(document).ready(function() {
var emptyMsgDiv = $('<div>No records found. Please refine your search and try again.</div>');
$("#requestGrid").jqGrid({
datatype: "json",
mtype: 'POST',
loanonce: true,
url: '@Url.Action("PerformRequestSearch", "FactoryRequest")',
postData: {
ccnID: function() {
return $('#ddlCCN option:selected').val();
},
facilityID: function() {
return $('#ddlfacility option:selected').val();
},
keyType: function() {
return $('#ddlKeyType option:selected').text();
},
fromDate: function() {
var fromDate = document.getElementById("dateFrom").value;
return fromDate;
},
toDate: function() {
var toDate = document.getElementById("dateTo").value;
return toDate;
},
},
colNames: ["CCN", "Facility", "Dell Part#", "Key Type", "Quantity", "Status", "Action", "Comment", "CustomName", "messageid", "CCNID", "FacilityID"],
colModel: [
{
name: "CCNName", index: "ccnname", width: 50, align: "right", editable: false
},
{ name: "FacilityName", width: 50, align: "right", editable: false },
{ name: "DellPartNumber", width: 60, align: "right", editable: false },
{ name: "KeyTypeDescription", width: 60, align: "right", editable: false },
{ name: "Quantity", formatter: "integer", width: 60, align: "right", editable: false },
{ name: "Status", width: 60, align: "right", editable: false },
{
name: "ActionValue", width: 40, align: "center",
sortable: true,
align: 'center',
editable: true,
cellEdit: true,
edittype: "select",
formatter: 'select',
search: false,
editoptions: {
value: statusList,
dataEvents: [{
type: 'change',
fn: function (e) {
var grid = $("#requestGrid");
var selRowId = grid.jqGrid("getGridParam", "selrow");
var rowData = grid.jqGrid("getRowData", selRowId);
//var cm = grid.jqGrid("getColProp", selRowId, "Remark");
var selectDOM = e.target,
selectedOptionDOM = selectDOM.options[selectDOM.selectedIndex];
switch (selectedOptionDOM.value) {
case "0":
grid.jqGrid('setColProp', selRowId, 'Remark', { editable: false });
break;
case "1":
grid.jqGrid('setColProp', selRowId, 'Remark', { editable: false });
break;
case "2":
grid.jqGrid('setColProp', selRowId, 'Remark', { editable: true });
break;
}
}
}]
}
},
{ name: "Remark", width: 70, align: "right", edittype: "textarea", search: false, editoptions: { rows: "2", cols: "30" }, editable: false },
{
name: 'CustomName', index: 'CustomName', width: 120, sortable: false, search: true, editable: false, hidden: true
},
{
name: 'messageID', width: 120, sortable: false, editable: false, hidden: true
},
{ name: "CCNID", width: 40, align: "center", editable: false, sortable: false, hidden: true },
{ name: "FacilityID", width: 60, align: "center", editable: false, sortable: false, hidden: true },
],
cmTemplate: {
editable: true, searchoptions: { clearSearch: false }, dataInit: function (elem) {
$(elem).height(18);
}
},
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pagerFactoryReq",
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: "CCNName",
viewrecords: true,
sortorder: "desc",
caption: "ODM PO Approval",
height: "100%",
emptyrecords: 'No records found. Please refine your search and try again.',
loadComplete: function() {
var count = $("#requestGrid").getGridParam();
var ts = $("#requestGrid")[0];
if (ts.p.reccount === 0) {
$("#requestGrid").hide();
emptyMsgDiv.show();
} else {
$("#requestGrid").show();
emptyMsgDiv.hide();
}
},
autowidth: true,
grouping: true,
gridview: true,
groupingView: {
groupField: ['CustomName'],
groupColumnShow: [false],
groupText: ["<b>{0}<b>"],
groupOrder: ["asc"],
groupCollapse: true,
groupDataSorted: true
},
onSelectRow: editRow
}).jqGrid("navGrid", "#pagerFactoryReq", { add: false, edit: false, del: false, search: true, refresh: true }, {
multipleSearch: true,
overlay: false,
onClose: function() {
// if we close the search dialog during the datapicker are opened
// the datepicker will stay opened. To fix this we have to hide
// the div used by datepicker
$("div#ui-datepicker-div.ui-datepicker").hide();
}
}).jqGrid("filterToolbar", { stringResult: true, defaultSearch: "cn" });
jQuery("#requestGrid").navButtonAdd('#pagerFactoryReq', {
caption: "",
buttonicon: "ui-icon-disk",
title: "Submit",
onClickButton: function() {
if (confirm('Are you sure to proceed?')) {
var requestGridData = $("#requestGrid").jqGrid("getRowData");
var dataToSend = JSON.stringify(requestGridData);
$.ajax({
type: "POST",
url: '@Url.Action("UpdateRequests", "FactoryRequest")',
dataType: "json",
data: dataToSend,
contentType: "application/json; charset=utf-8",
success: function (message) {
$("#SuccessMessage").html(message[0]);
$("#ErrorMessage").html(message[1]);
},
error: function (jqXHR, textStatus, errorThrown) {
$("#ErrorMessage").html(jqXHR + " " + textStatus + " " + errorThrown);
}
});
}
else { alert('Cancelled'); }
},
position: "last"
});
// place div with empty message insde of bdiv
emptyMsgDiv.insertAfter($("#requestGrid").parent());
});
var statusList = { '0': 'Select', '1': 'Approve', '2': 'Reject' };
function GetFacility(objCCN) {
var procemessage = "<option value='0'>Please wait...</option>";
$("#ddlfacility").html(procemessage).show();
$.ajax({
url: '@Url.Action("GetFacilityByCCNId", "FactoryRequest")',
data: { objCCN: objCCN },
cache: false,
type: "POST",
success: function (data) {
var markup = "<option value='0'>--Select Facility--</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
}
$("#ddlfacility").html(markup).show();
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
function ResetDropDownList() {
$("select").each(function() { this.selectedIndex = 0 });
}
function ResetGrid() {
jQuery("#requestGrid").jqGrid("clearGridData", true);
}
function ValidateDate() {
var today = new Date();
var test = today.getDate();
var startDate = document.getElementById("dateFrom").value;
var endDate = document.getElementById("dateTo").value;
if (startDate !== "") {
if ((startDate.match(/^\d\d?\/\d\d?\/\d\d\d\d$/))) {
}
else {
alert("Kindly provide a valid start date format(MM/DD/YYYY)");
document.getElementById(startDateTextBox).focus();
return false;
}
}
if (endDate !== "") {
if ((endDate.match(/^\d\d?\/\d\d?\/\d\d\d\d$/))) {
}
else {
alert("Kindly provide a valid end date format(MM/DD/YYYY)");
document.getElementById(endDateTextBox).focus();
return false;
}
}
if (new Date(endDate) < new Date(startDate)) {
alert("Kindly enter the end date greater than or equal to start date.");
document.getElementById("dateTo").select();
document.getElementById("dateTo").focus();
return false;
}
return true;
}
$('#btnSearch').click(function() {
var fromDate = document.getElementById("dateFrom").value;
var toDate = document.getElementById("dateTo").value;
if (ValidateDate()) {
var selectedKeyType, selectedCCNID, selectedCCNName, selectedFacilityID, selectedFacilityName;
if ($('#ddlCCN option:selected').val() != 0) {
selectedCCNID = $('#ddlCCN option:selected').val();
selectedCCNName = $('#ddlCCN option:selected').text();
}
if ($('#ddlfacility option:selected').val() != 0) {
selectedFacilityID = $('#ddlfacility option:selected').val();
selectedFacilityName = $('#ddlfacility option:selected').text();
}
if ($('#ddlKeyType option:selected').text() != "-- Select --")
selectedKeyType = $('#ddlKeyType option:selected').text();
jQuery("#requestGrid").clearGridData(true);
jQuery("#requestGrid").jqGrid('setGridParam',
{
datatype: "json", postdata: null,
postdata: { ccnID: selectedCCNID, facilityID: selectedFacilityID, keyType: selectedKeyType, fromDate: fromDate, toDate: toDate },
search:true
});
jQuery("#requestGrid")[0].refreshIndex();
jQuery("#requestGrid").trigger("reloadGrid");
}
});
$(function() {
// This will make every element with the class "date-picker" into a DatePicker element
$('.date-picker').datepicker();
});
var lastSelection;
function editRow(id) {
if (id && id !== lastSelection) {
var grid = $("#requestGrid");
grid.jqGrid('restoreRow', lastSelection);
var dropdownSelval = jQuery('#requestGrid').getCell(id, 'ActionValue');
var statusValue = jQuery('#requestGrid').getCell(id, 'Status');
if (statusValue == "-") {
if (dropdownSelval == "2") {
$(this).jqGrid('setColProp', 'ActionValue', { editable: true });
$(this).jqGrid('setColProp', 'Remark', { editable: true });
}
else {
$(this).jqGrid('setColProp', 'ActionValue', { editable: true });
$(this).jqGrid('setColProp', 'Remark', { editable: false });
}
}
else {
$(this).jqGrid('setColProp', 'ActionValue', { editable: false });
$(this).jqGrid('setColProp', 'Remark', { editable: false });
}
grid.jqGrid('editRow', id, {
keys: true,
});
lastSelection = id;
}
}
請到完整的腳本代碼此鏈接， –
https://gist.github.com/anonymous/47a977968e2aa6f9aab6f5885e8221d4 –
請註明總是對的jqGrid的**的**版本的信息，您可以使用它（可以使用） ，以及** jqGrid的fork **（[free jqGrid]（https://github.com/free-jqgrid/jqGrid），商業版[Guriddo jqGrid JS]（http://guriddo.net/?page_id=103334） ）或<= 4.7版本中的舊jaGrid）。您的代碼包含許多小（而不是小）錯誤。例如，在重新加載之前，您使用'setGridParam'的錯誤參數，使用'navGrid'的錯誤參數，使用'colModel'（'name：「CCNName」，index：「ccnname」 「'）連同本地數據（'loadonce：true'）... – Oleg