【问题标题】:Using Free jqGrid 4.15, can't filter checkboxes on false使用 Free jqGrid 4.15,无法过滤 false 上的复选框
【发布时间】:2017-12-18 22:39:07
【问题描述】:

我使用的是 Free jqGrid 4.15.0,我有三个由三个布尔值填充的复选框列。使用过滤器工具栏,“All”选项有效,“True”选项有效,但“False”选项永远不会匹配任何内容。我尝试将布尔值转换为整数(0、1)并相应地设置搜索选项,但直到我将布尔值/整数转换为字符串(“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

【问题讨论】:

    标签: javascript checkbox jqgrid free-jqgrid


    【解决方案1】:

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

    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"。它允许简化列 ShippedExportFlag 的定义

    {
        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" 以在第一次单击stype: "checkbox" 创建的树状态复选框时搜索true

    【讨论】:

    • 谢谢奥列格。我昨天尝试了工具栏中的三态复选框,但仍然有问题。现在我已经添加了“sorttype:boolean”,一切都很好。我在其他任何示例中都没有看到这一点。它可能在那里,但我没有看到它。再次感谢您。
    • @GarlandDuvall:不客气!我建议您查看来自README4.14.1.mdREADME4.14.0.md 的演示jsfiddle.net/OlegKi/su7ebs65jsfiddle.net/OlegKi/yvbt6w54。演示展示了template: "booleanCheckbox"generateValue: truegenerateDatalist: true 等的用法......
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-10
    • 2012-02-06
    相关资源
    最近更新 更多