2
Я начинаю работать в jqGrid, и у меня есть 2 проблемы.Применить панель инструментов поиска jqgrid
Во-первых,, я хочу реализовать панель инструментов поиска в моей сетке, как показано на рисунке ниже.
Я проделал анализ и обнаружил, что с помощью приведенной ниже строки кода будет включена панель инструментов поиска. Но я попытался разместить его, не ожидая выхода.
jQuery("#overviewJqGrid").jqGrid('navGrid', '#jqGridPager',
{ edit: false, add: false, del: false, search: true }, {}, {}, {}, { closeAfterSearch: true });
JS код:
app.controller('DiscoveryOverviewCtrl', function ($scope, $rootScope, $compile, localStorageService) {
var gwdth = $("#divGrid").width();
//TODO: Find a better solution
var WebApiServerUrl = $rootScope.WebApiURL;
$('#DiscoveryReportModel').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var reportId = button.data('id');
var machineName = button.data('machinename');
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('#titleSpan').text('Machine Name/IP Address: ' + machineName)
$("#tblDiscoveryReport").jqGrid('setGridParam', { url: $rootScope.WebApiURL + "/discovery/" + reportId, datatype: "json" }).trigger("reloadGrid");
$("#tblDiscoveryReport").jqGrid({
url: $rootScope.WebApiURL + "/discovery/" + reportId,
datatype: "json",
contentType: 'application/json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) { return JSON.stringify(postData); },
colNames: ['Attribute Name', 'Message', 'Attribute Value'],
colModel: [
{ name: 'attributeName', width: 130 },
{ name: 'message', width: 80 },
{ name: 'attributeValue', formatter: ReportItemStatusImage, width: 40, align: 'center' }
],
loadonce: true,
width: 550,
height: 200,
rowNum: 20,
rowList: [20, 30, 50],
sortname: 'Attribute Name',
viewrecords: true,
gridview: true,
sortable: true,
mtype: 'GET',
loadBeforeSend: function (xhr) {
var authData = localStorageService.get('authorizationData');
if (authData) {
xhr.setRequestHeader("Authorization", 'Bearer ' + authData.token);
}
return xhr;} });
function ReportItemStatusImage(cellvalue, options, rowObject) {
if (cellvalue == true) {
return "<img src='/assets/img/OK.png' height='16' width='16' />";
}
else {
return "<img src='/assets/img/NOK.png' height='16' width='16' />";
}
}
});
$scope.config = {
url: $rootScope.WebApiURL + '/discovery',
datatype: "json",
contentType: 'application/json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) { return JSON.stringify(postData); },
width: gwdth,
height: 550,
colNames: ['ID', 'Discovery Title', 'Requested Date', 'Completed Date', 'Owner', 'Discovery Status', 'Discoverd Machines'],
colModel: [
{ name: 'id', key: true, width: 50, sorttype: 'int' },
{ name: 'discoveryTitle', width: 80 },
{ name: 'createdDateTime', width: 80, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
{ name: 'discoveryEndDate', width: 80, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
{ name: 'createdByUser', width: 80 },
{ name: 'discoveryRequestStatus', width: 80 },
{ name: 'discoverdMachinesCount', width: 80, sorttype: 'int' }
],
loadonce: true,
rowNum: 10,
rowList: [20, 30, 50],
sortname: 'id',
sortorder: "asc",
viewrecords: true,
gridview: true,
mtype: 'GET',
subGrid: true,
sortable: true,
pager: true,
viewrecords: true,
gridview: true,
mtype: 'GET',
subGridRowExpanded: function (subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "'></div>");
$("#" + subgrid_table_id).jqGrid({
url: $rootScope.WebApiURL + '/discovery/' + row_id,
datatype: "json",
colNames: ["Id", 'Machine Name/IP Address', 'Status', 'Report'],
colModel: [
{ name: 'id', key: true, width: 50, sorttype: 'int' },
{ name: 'machineName', width: 200 },
{ name: 'isDiscovered', width: 80, edittype: 'image', formatter: isDiscoveredFormatter, align: "center", search: false },
{ name: 'id', label: 'report', formatter: reportFormatter, width: 75, fixed: true, align: 'center', search: false }
],
height: '100%',
loadonce:true,
rowNum: 10,
rowList: [20, 30, 50],
sortable: true,
sortname: 'num',
sortorder: "asc",
pager: pager_id,
loadBeforeSend: function (xhr) {
var authData = localStorageService.get('authorizationData');
if (authData) {
xhr.setRequestHeader("Authorization", 'Bearer ' + authData.token);
}
return xhr;
}
});
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
},
subGridOptions: {
// configure the icons from theme rolloer
plusicon: "ui-icon-triangle-1-e",
minusicon: "ui-icon-triangle-1-s",
openicon: "ui-icon-arrowreturn-1-e" },
loadBeforeSend: function (xhr) {
var authData = localStorageService.get('authorizationData');
if (authData) {
xhr.setRequestHeader("Authorization", 'Bearer ' + authData.token);
}
return xhr;
}};
var reportFormatter = function (id, cellp, rowData) {
var stateLink = "<button type=\"button\" class=\"btn btn-link\" data-toggle=\"modal\" data-target=\"#DiscoveryReportModel\" data-id=\"" + id + "\" data-machinename=\"" + rowData.machineName + "\">Report</button>";
return stateLink;
};
var isDiscoveredFormatter = function (cellvalue, options, rowObject) {
if (cellvalue == true)
return '<img src="\\assets\\img\\OK.png" height="16" width="16" />';
else
return '<img src="\\assets\\img\\NOK.png" height="16" width="16" />';
};
//Placed here
});
HTML код:
<div class="modal fade" id="DiscoveryReportModel" tabindex="-1" role="dialog" aria-labelledby="DiscoveryReportModelLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Discovery Report</h4>
</div>
<div class="modal-body">
<div class="well with-header with-footer">
<div class="header bordered-success">
<span id="titleSpan">Some title</span>
</div>
<div id="divReportGrid">
<table id="tblDiscoveryReport"></table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="row" ng-controller="DiscoveryOverviewCtrl"> <div class="col-xs-12 col-md-12"> <div class="widget"> <div class="widget-header bordered-bottom bordered-themeprimary"> <i class="widget-icon fa fa-tasks themeprimary"></i> <span class="widget-caption">Discovery Overview</span> </div> <div id="divGrid" class="widget-body"> <ng-jq-grid id="overviewJqGrid" config="config" api="api"></ng-jq-grid> <div id="jqGridPager"></div>
</div> </div> </div>
Вторая проблема заключается в том, что панель инструментов поиска на другой странице не работает для столбцов поля даты. Он работает для «содержит» и «не содержит», где «равно» и другие операции поиска приводят к пустым выводам.
Я пробовал использовать srcformats, описанные в this &, ссылаясь на документ this.
JS код
$("#jQGridMonitoredMachines").jqGrid({
url: $rootScope.WebApiURL + '/getallmonitoredmachinerequests',
datatype: "json",
contentType: 'application/json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
colNames: ['Id', 'Machine Name', 'IP Address', 'Discovered Date', 'Agent Install Status', 'Agent Installation Date', 'Agent Status', 'Agent Version', 'Last HeartBeat Received'],
colModel: [
{ name: 'id', hidden: false, width: 20, key: true, sorttype: 'int', search: true },
{ name: 'machineName', width: 120, search: true },
{ name: 'ipAddress', width: 60, search: true },
//{ name: 'discoveredDate', width: 110, formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'l, F d, Y' } },
//, searchoptions: { sopt: ['eq','ne'], dataInit : function (elem) { $(elem).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true})} } },
{ name: 'discoveredDate', width: 110, search: true, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
{ name: 'agentInstallStatus', width: 100, search: true },
{ name: 'agentInstallationDate', width: 110, search:true, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
{ name: 'agentStatusName', width: 60, search: true },
{ name: 'agentVersion', width: 50, search: true },
{ name: 'lastHeartBeatRecieved', width: 110, search:true,formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } }
],
rowattr: function (rd) {
if (rd.agentInstallStatus != 'Completed' && rd.agentInstallStatus != 'Upgrade Completed' && rd.agentInstallStatus != 'Uninstallation Failed') {
return {
"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"
};
}
},
sortname: 'id',
sortorder: 'asc',
loadonce: true,
viewrecords: true,
gridview: true,
width: gwdth,
height: 650,
sortable:true,
rowNum: 30,
rowList: [10, 20, 30],
mtype: 'GET',
multiselect: true,
multipleSearch: true,
pager: "#jqGridPager",
Что я должен сделать больше для того, чтобы получить соответствующую функциональность рабочего?
