Я пытаюсь получить параметры поиска для даты истечения срока действия. Я настроил сетку ниже, и когда страница загружается, я вижу выбор по умолчанию "> =", но когда я нажимаю на него, все, что я вижу, это маленький кружок рядом с дисплеем "> =". Я думаю, что это проблема таблицы стилей, но я не могу понять, в чем проблема.
$(document).ready(function () {
$("#ckRecentViewed").on('change', function (e) {
loadGrid();
});
$("#ckCanceled").on('change', function (e) {
loadGrid();
});
$("#ckExpired").on('change', function (e) {
loadGrid();
});
$("input:radio:checked").data("chk", true);
$("input:radio").click(function () {
$("input[name='" + $(this).attr("name") + "']:radio").not(this).removeData("chk");
$(this).data("chk", !$(this).data("chk"));
$(this).prop("checked", $(this).data("chk"));
$(this).button('refresh'); // in case you change the radio elements dynamically
loadGrid();
});
$("#chkInMyStep").on('change', function (e) {
loadGrid();
});
$('#dvWrapperFilter').on('click', function () {
$("#dvFilters").slideToggle(function () {
if ($('#imgHdrPlusMinus').attr('src').indexOf("plus") > 0) {
$('#imgHdrPlusMinus').attr('src', $('#imgHdrPlusMinus').attr('src').replace("plus", "minus"));
} else {
$('#imgHdrPlusMinus').attr('src', $('#imgHdrPlusMinus').attr('src').replace("minus", "plus"));
}
});
});});
var statusIds = '0,1,3,4,5,6';
var cols = [
{ label: 'CTSID', index: 'CTSID', name: 'CTSID', align: 'left', sortable: true, search: true, width: '20%' },
{ label: 'Customer Name', index: 'CustomerName', name: 'CustomerName', align: 'left', sortable: true, search: true, width: '60%' },
{ label: 'Terr', index: 'Territory', name: 'Territory', align: 'center', sortable: true, search: true, width: '20%' },
{ label: 'Zone Manager', index: 'CZMName', name: 'CZMName', align: 'left', sortable: true, search: true, width: '50%' },
{ label: 'Status', index: 'StatusName', name: 'StatusName', align: 'left', sortable: true, width: '30%' },
{ label: 'Version', index: 'VersionNumber', name: 'VersionNumber', align: 'center', sortable: true, search: true, width: '18%' },
{ label: 'Workflow Step', index: 'WorkflowName', name: 'WorkflowName', align: 'left', sortable: true, width: '30%' },
{
label: 'Expiration Date', index: 'EffectiveEndDate', name: 'EffectiveEndDate', sortable: true, width: '40%', sorttype: "date", formatter: 'date', search: true, formatoptions: { newformat: 'm/d/y' }, align: 'center',
searchoptions: {
searchOperators: true,
sopt: ["ge", "lt", "eq", "le"],
dataInit: function (element) {
var self = $("#gridWorkflowDashboard"); // save the reference to the grid
$(element).datepicker({
dateFormat: 'mm/dd/yy',
changeYear: true,
changeMonth: true,
//showButtonPanel: true,
id: 'CreateDate_datepicker',
showOn: 'focus',
onSelect: function (dataText, inst) {
self.triggerToolbar();
}
});
}
}
},
{
label: '', index: 'action', name: 'action', sortable: false, align: 'center', search: false, width: '20%', formatter: addLink, cellattr: function () {
return "title=\"Click to view quote details\"";
}
}
];
var actionUrl = 'Dashboard/GetUserWorkflowDashboard';
var getUniqueNames = function (columnName, mydata) {
var texts = $.map(mydata, function (item) {
return item[columnName];
}),
uniqueTexts = [], textsLength = texts.length, text, textsMap = {}, i;
for (i = 0; i < textsLength; i++) {
text = texts[i];
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
},
buildSearchSelect = function (uniqueNames) {
var values = "";
$.each(uniqueNames, function () {
values += this + ":" + this + ";";
});
return values.slice(0, -1);
},
initMultiselect = function (searchOptions) {
var $elem = $(searchOptions.elem),
options = {
selectedList: 2,
height: "auto",
checkAllText: "all",
uncheckAllText: "no",
noneSelectedText: "Any",
open: function () {
var $menu = $(".ui-multiselect-menu:visible");
$menu.addClass("ui-jqdialog").width("auto");
$menu.find(">ul").css("maxHeight", "200px");
}
};
if (searchOptions.mode === "filter") {
options.minWidth = "auto";
}
$elem.multiselect(options);
$elem.siblings("button.ui-multiselect").css({
width: "100%",
margin: "1px 0",
paddingTop: ".3em",
paddingBottom: "0"
});
},
setSearchSelect = function (columnName, data) {
var values = buildSearchSelect(getUniqueNames.call(this, columnName, data));
$(this).jqGrid("setColProp", columnName, {
stype: "select",
searchoptions: {
value: values,
sopt: ["in"],
attr: {
multiple: "multiple",
size: 4
},
selectFilled: initMultiselect
}
});
},
myDefaultSearch = "cn",
beforeProcessingHandler1 = function (data) {
var $this = $(this), p = $this.jqGrid("getGridParam");
// !!! it will be called only after loading from the server
// datatype is always "json" here
setSearchSelect.call(this, "WorkflowName", data);
setSearchSelect.call(this, "StatusName", data);
setSearchSelect.call(this, "CZMName", data);
if (this.ftoolbar === true) {
//if the filter toolbar is not already created
$("#gs_" + this.id + "WorkflowName").multiselect("destroy");
$this.jqGrid('destroyFilterToolbar');
$("#gs_" + this.id + "StatusName").multiselect("destroy");
$this.jqGrid('destroyFilterToolbar');
$("#gs_" + this.id + "CZMName").multiselect("destroy");
$this.jqGrid('destroyFilterToolbar');
}
if (p.postData.filters) {
p.search = true;
}
$this.jqGrid("filterToolbar", {
stringResult: true,
defaultSearch: myDefaultSearch,
searchOperators: true,
beforeClear: function () {
$(this.grid.hDiv)
.find(".ui-search-toolbar button.ui-multiselect")
.each(function () {
$(this).prev("select[multiple]").multiselect("refresh");
});
$(this.grid.hDiv)
.find(".ui-search-toolbar button.ui-multiselect")
.each(function () {
// synchronize jQuery UI Multiselect with <select>
$(this).prev("select[multiple]").multiselect("refresh");
}
).css({
width: "98%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}
});
};
$(function () {
//Initialize jqgrid
$("#gridWorkflowDashboard").jqGrid({
datatype: 'json',
url: actionUrl,
mType: 'GET',
colModel: cols,
rowList: [25, 50, 100],
pager: "#dvDashboardPager",
forceClientSorting: true,
loadonce: true,
beforeProcessing: beforeProcessingHandler1,
sortname: "EffectiveEndDate",
sorttype: "date",
sortorder: "desc",
rownumbers: false,
rowNum: 25,
gridview: true,
hidegrid: false,
height: "100%",
autowidth: true,
search: true,
altRows: true,
altclass: "GridRows",
recreateFilter: true,
hoverrows: true,
viewsortcols: [true, 'vertical', true],
ignoreCase: true,
viewrecords: true,
loadtext: "Please, wait...",
loadui: "enable"
}).jqGrid("navGrid", { add: false, edit: false, del: false, search: false, refresh: true }
});
function loadGrid() {
page = $("#gridWorkflowDashboard").getGridParam('page');
var ids = statusIds;
var pExperationDate = $('input:radio[name="rdExpiration"]:checked').val();
var pToDate = $("#datepickerTo").val();
var pFromDate = $("#datepickerFrom").val();
var pRecentView = $("#ckRecentViewed")[0].checked;
var pInMyStep = $("#chkInMyStep")[0].checked;
var pCanceled = $("#ckCanceled")[0].checked;
var pExpired = $("#ckExpired")[0].checked;
if (pCanceled) {
ids += ',-1';
}
else {
ids = statusIds;
}
if (pExpired) {
ids += ',2';
}
else {
ids = statusIds;
if (pCanceled) {
ids += ',-1';
}
}
var data = { ExperationDays: pExperationDate, toDate: pToDate, fromDate: pFromDate, recentView: pRecentView, InMyStep: pInMyStep, StatusIds: ids };
$.ajax(actionUrl, {
contentType: 'application/json',
type: 'GET',
datatype: 'json',
loadonce: true,
data: data,
success: function (result) {
$("#gridWorkflowDashboard").jqGrid('clearGridData');
$("#gridWorkflowDashboard").jqGrid('setGridParam',
{
datatype: 'local',
data: result
}).trigger("reloadGrid", [{ page: page }]);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
//var p = $(this).jqGrid("getGridParam"),
// $errorDiv = $(this.grid.eDiv),
// $errorSpan = $errorDiv.children(".ui-jqgrid-error");
//$errorSpan.html("Error loading Dashboard. Please contact IT Support.");
//$errorDiv.show();
//if (p.errorDisplayTimeout) {
// setTimeout(function () {
// $errorSpan.empty();
// $errorDiv.hide();
// }, p.errorDisplayTimeout);
//}
}
});
}
function addLink(cellvalue, options, rowObject) {
return "<input type='button' class='btn btn-info btn-xs grid-btn' value='View' onclick='ViewQuote(\"" + rowObject.CTSID + "\")'\>";
}
function ViewQuote(value) {
window.location.href = '/CPQ/Quote/EditQuote/' + value;
}
$(function () {
$("#datepickerFrom").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/dd/yy',
minDate: "-8Y",
maxDate: "0Y",
onClose: function (dateText, inst) {
loadGrid();
}
});
$("#datepickerTo").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/dd/yy',
minDate: "-8Y",
maxDate: "0Y",
onClose: function (dateText, inst) {
loadGrid();
}
});
});
function PerformListingExport() {
if ($("#gridWorkflowDashboard").jqGrid("getGridParam", "postData").filters !== undefined) {
var tdata = JSON.stringify(JSON.parse($("#gridWorkflowDashboard").jqGrid("getGridParam", "postData").filters).rules);
}
var url = "/GetWorkflowDashboardExport";
var pExperationDate = $('input:radio[name="rdExpiration"]:checked').val();
var pToDate = $("#datepickerTo").val();
var pFromDate = $("#datepickerFrom").val();
var pRecentView = $("#ckRecentViewed")[0].checked;
var pInMyStep = $("#chkInMyStep")[0].checked;
var pCanceled = $("#ckCanceled")[0].checked;
var pExpired = $("#ckExpired")[0].checked;
if (pCanceled) {
ids += ',-1';
}
else {
ids = statusIds;
}
if (pExpired) {
ids += ',2';
}
else {
ids = statusIds;
if (pCanceled) {
ids += ',-1';
}
}
var data = { GridSearchFilters: tdata, ExperationDays: pExperationDate, toDate: pToDate, fromDate: pFromDate, recentView: pRecentView, InMyStep: pInMyStep, StatusIds: ids };
dataType = "json";
var async = true;
var success = function (data, xhttp) {
try {
var ExportResult = xhttp.getResponseHeader("RequestResultStatus");
if (ExportResult === "Success") {
ExcelBlob = new Blob([xhttp.response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
var filename = 'QuoteDashboard_Export_' + new Date().getFullYear().toString() + '' + (new Date().getMonth() + 1).toString() + '' + new Date().getDate().toString() + '.xlsx';
try {
window.navigator.msSaveOrOpenBlob(ExcelBlob, filename);
}
catch (err) {
var myURL = window.URL || window.webkitURL;
var csvUrl = myURL.createObjectURL(ExcelBlob);
}
} else {
var status = "The export failed. Please contact IT support for assistance.";
showMessage(status);
}
}
catch (err) {
$("#loadingModal").modal("hide");
}
$("#loadingModal").modal("hide");
};
var error = function (xhttp, status) {
showMessage(status);
};
var responseType = "arraybuffer";
AJAXPost(url, async, data, dataType, success, error, responseType);
}
//function AJAXPost(pURL, pASYNC, pData, pDataType, pSuccess, pError, pResponseType, pUploadProgressFlag, pUploadProgressBarType) {
function AJAXPost(pURL, pASYNC, pData, pDataType, pSuccess, pError, pResponseType) {
var xhttp = new XMLHttpRequest();
pURL = pURL.replace('/CPQ', '').replace('/CPQ/', '');
pURL = GetSessionURL() + pURL;
try {
//If upload progress bar parameter is true, then show progress bar graphic.
//if (pUploadProgressFlag) {
try {
xhttp.upload.addEventListener("progress", function (evt) {
try {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$("#loadingModal").modal("show");
}
}
catch (err) {
//Do Nothing.
}
}, false);
}
catch (err) {
//Do Nothing.
}
//}
xhttp.onreadystatechange = function () {
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
try {
$("#loadingModal").modal("Hide");
}
catch (err) {
//Do Nothing.
}
if (pSuccess !== null) {
if (xhttp.responseType === 'arraybuffer') {
pSuccess(null, xhttp);
} else {
try {
pSuccess(xhttp.responseText, xhttp);
}
catch (AJAXSuccessException) {
//TODO:
}
}
}
} else {
try {
$("#loadingModal").modal("Hide");
}
catch (err) {
//Do Nothing.
}
if (pError !== null) {
pError(xhttp, xhttp.status);
}
}
}
};
xhttp.onerror = function () {
try {
$("#loadingModal").modal("Hide");
}
catch (err) {
//Do Nothing.
}
if (pError !== null) {
pError(xhttp, xhttp.status);
}
};
xhttp.open("POST", pURL, pASYNC);
if (pResponseType !== null) {
xhttp.responseType = pResponseType;
}
xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send(JSON.stringify(pData));
}
catch (err) {
pError(xhttp, err.message);
}
return xhttp;
}
function GetSessionURL() {
try {
var URLPath = window.location.pathname;
URLPath = URLPath.replace('/CPQ/', '').replace('/CPQ/', '');
var SessionID = URLPath.substring(0, (URLPath.indexOf('/') !== -1) ? URLPath.indexOf('/') : URLPath.length);
return window.location.protocol + '//' + window.location.host + '/CPQ/' + SessionID;
} catch (err) {
return "";
}
}
function showMessage(msg) {
$('#loadingModalBody').html('<p>' + msg + '</p>');
$("#loadingModal").modal("show");
}
Вот снимок экрана того, как выглядит пользовательский интерфейс после выбора параметров фильтра. Как видите, под значком «>» есть маленький кружок.
Что не так с моим кодом?