使用Free jqGrid 4.15，无法过滤false的复选框

Posted 2021-04-19

我使用免费的jqGrid 4.15.0，我有三个复选框列填充三个bool。使用过滤器工具栏“全部”选项有效，“真实”选项有效，但“假”选项永远不会匹配任何内容。我尝试将bools转换为int（0,1）并相应地设置searchoptions，但直到我将bools / ints转换为字符串（“true”，“false”）并对字符串进行过滤，我才能得到“False” “在过滤器中选择工作。

复选框成功填写，只是过滤不起作用。

使用先前版本的jqGrid（4.5.2），此屏幕工作正常。

有没有人有任何想法是什么问题？如果您还需要查看其他内容，请与我们联系。

我的类是JSON并传递给网格：

public class DelForDetails
{
    public long ScheduleId { get; set; }
    public DateTime? ShipmentDate { get; set; }
    public string PurchaseOrderNumber { get; set; }
    public string ProductNumber { get; set; }
    public string ScheduleIdentifier { get; set; }
    public Decimal? ShipmentQuantity { get; set; }
    public string CommitmentLevel { get; set; }
    public string ConsumerName { get; set; }
    public string ShipToFacilityNumber { get; set; }
    public bool Shipped { get; set; }
    public bool ExportFlag { get; set; }
    public bool MissingDateFlag { get; set; }
    public string StatusForSchedule { get; set; }
}

网格：

$('#scheduleGrid').jqGrid({
    url: url,
    datatype: 'json',
    mtype: 'GET',
    colModel: [
        { name: 'ScheduleId', label: $('#ScheduleIdHeaderText').text(), width: 100, hidden: true, editable: true },
        {
            name: 'ShipmentDate', label: $('#ShipmentDate').text(), width: 100, align: 'center', editable: true,
            formatter: stdDateFormatter, stype: 'text'
        },
        { name: 'PurchaseOrderNumber', label: $('#PurchaseOrderNumber').text(), width: 150, align: 'left', editable: true },
        { name: 'ProductNumber', label: $('#ProductNumber').text(), width: 100, align: 'left', editable: false },
        { name: 'ScheduleIdentifier', label: $('#ScheduleIdentifierHeaderText').text(), width: 150, align: 'right', hidden: false },
        {
            name: 'ShipmentQuantity', label: $('#ShipmentQuantity').text(), width: 80, align: 'center', hidden: false, formatter: 'number',
            formatoptions: { decimalPlaces: 4, thousandsSeparator: '' }
        },
        { name: 'CommitmentLevel', label: $('#CommittmentLevelHeaderText').text(), width: 80, align: 'left', hidden: false },
        { name: 'ConsumerName', label: $('#CustomerName').text(), width: 150, align: 'left', hidden: false },
        { name: 'ShipToFacilityNumber', label: $('#ShipToCode').text(), width: 100, align: 'center', hidden: false },
        {
            name: 'Shipped', label: $('#ShippedHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
            stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
        },
        {
            name: 'ExportFlag', label: $('#ExportFlagHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
            stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
        },
        {
            name: 'MissingDateFlag', label: $('#MissingDateFlagHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
            stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
        }
    ],
    jsonReader: {
        repeatitems: false,
        id: 'ScheduleId'
    },
    pager: '#schedulePager',
    altRows: true,
    altclass: 'harmony-schedule-grid-altrow-class',
    ignoreCase: true,
    multiselect: true,
    cellEdit: false,
    rowNum: 15,
    rowList: [15, 30, 50],
    loadonce: true,
    loadui: 'disable',
    sortable: true,
    sortname: 'ShipmentDate',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    autoencode: true,
    height: 'auto',
    autowidth: true,
    subGrid: true,
    loadComplete: function () {
        $('#LoadingPanel').hide();
        $('td[aria-describedby="scheduleGrid_subgrid"]').addClass('harmony-schedule-background-color');
        $('td[aria-describedby="scheduleGrid_cb"]').addClass('harmony-schedule-background-color');
    },
    subGridRowExpanded: function (subgrid_id, row_id) {
        ...
    }
})
.navGrid('#schedulePager', { del: false, add: false, edit: false, search: false })
.navButtonAdd('#schedulePager', { } })
.filterToolbar({ stringResult: true, searchOnEnter: false, autosearchDelay: 1000, defaultSearch: 'cn' });

View of checkboxes

答案

如果我正确理解了问题，那么你应该添加

sorttype: "boolean"

列中的属性，哪些数据应解释为布尔值。它应该解决你的问题。

或者你可以考虑改变

stype: 'select',
searchoptions: {
    sopt: ['eq', 'ne'],
    value: ':All;true:True;false:False'
}

至

sorttype: "boolean",
stype: "checkbox",
searchoptions: {
    sopt: ["eq"],
    value: "true:false"
}

使用stype: "checkbox"而不是stype: "select"。您可以使用列形式的简短形式：template: "booleanCheckbox"。它允许简化列Shipped和ExportFlag的定义

{
    name: 'Shipped', label: $('#ShippedHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
    stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
},
{
    name: 'ExportFlag', label: $('#ExportFlagHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
    stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
}

至

{
    name: 'Shipped', label: $('#ShippedHeaderText').text(), width: 80, 
    template: "booleanCheckbox"
},
{
    name: 'ExportFlag', label: $('#ExportFlagHeaderText').text(), width: 80,
    template: "booleanCheckbox"
}

我个人主要将firstsortorder: "desc"属性添加到template: "booleanCheckbox"，以便在第一次点击true创建的树状态复选框时搜索stype: "checkbox"。