javascript - 应用 jqgrid 搜索过滤器工具栏

Question

我是 jqGrid 的初学者，我遇到了 2 个问题。

首先，我想在我的网格中实现一个搜索工具栏，如下图所示。

我进行了分析，发现使用下面的代码行可以启用搜索工具栏。但我尝试放置它，没有预期的输出。

 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">&times;</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><br/>
</div>
</div>
</div>

第二个问题是，其他页面上的搜索工具栏不适用于日期字段列。它确实适用于“包含”和“不包含”，因为“等于”和其他搜索操作会导致空白输出。

我尝试使用 this 中描述的 srcformats并通过 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",

为了使适当的功能正常工作，我还需要做些什么？

Answer 1

1. 何时将执行代码 $("#overviewJqGrid").jqGrid('navGrid', '#jqGridPager', ...); ？您应该验证它将在之后创建网格以解决您的第一个问题。
2. 强烈推荐使用idPrefix用于子网格数据以防止 id 重复(例如 idPrefix: "s_" + row_id + "_" )。
3. 将子网格数据与主数据一起加载可能更有效
4. 如果$('#DiscoveryReportModel').on('show.bs.modal', ...可以调用更多一次，那么你应该包括 GridUnload 的调用而不是 setGridParam .重要的是要了解 $("#overviewJqGrid").jqGrid({...})将转换空 <table id="overviewJqGrid"></table>相对复杂的div和表格结构。因此，有两个主要选项可以在下次调用时刷新数据:setGridParam更改一些选项并触发 "reloadGrid"或使用 GridUnload 销毁先前创建的网格然后使用 $("#overviewJqGrid").jqGrid({...}) 在同一个地方创建新网格. setGridParam的用法之前$("#overviewJqGrid").jqGrid({...})不会一起工作。

最后一个使用“等于”操作搜索日期的问题在我看来是完全独立的问题。您使用完整的日期时间作为输入数据并以“m/d/Y h:i:s A”格式显示。用户输入带时间的完整日期非常不舒服。输入数据中毫秒的存在可能会产生额外的问题。该解决方案可能在很大程度上取决于您的确切要求和您使用的 jqGrid 的分支。大约一年以来，我开发了免费的 jqGrid 分支。我实现了自定义排序操作​​，它允许您准确定义需要如何比较数据。例如，您可以使用 Date only "equal" 比较日期您只比较 date 部分而忽略时间部分。 The old demo ，这是我为 the old issue 创建的演示该功能。可以在演示中输入(或选择)“04/15/2015”，过滤后的数据将是包含“4/15/2015 9:15:40 PM”、“4/15/2015 3:31”的树状线条: 49 PM”和“4/15/2015 12:00:00 AM”:

最后，我想再引用一次 the old answer它演示了 jqGrid 关于 directive 的用法垂钓者。该示例可能对您也有帮助。