javascript - 使用免费的 jqGrid 4.15，无法过滤 false 的复选框

Question

我正在使用免费的 jqGrid 4.15.0，我有三个由三个 bool 值填充的复选框列。使用过滤器工具栏，“全部”选择​​有效，“真”选择有效，但“假”选择从不匹配任何内容。我尝试将 bool 值转换为整数(0, 1)并相应地设置搜索选项，但是直到我将 bool 值/整数转换为字符串(“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

Answer 1

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

sorttype: "boolean"

列中的属性，哪些数据应解释为 bool 值。它应该可以解决您的问题。

或者你可以考虑改变

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 from

的定义

{
    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" 创建的树状复选框。