使用免费的jqGrid 4.15,无法过滤复选框

时间:2017-12-18 22:39:08

标签: javascript checkbox jqgrid free-jqgrid

我正在使用Free jqGrid 4.15.0,我有三个bool填充的复选框列。使用过滤器工具栏"全部"选择有效," True"选择有效,但是"错误"选择从不匹配任何东西我尝试将bools转换为整数(0,1)并相应地设置搜索选项,但直到我将bools / ints转换为字符串(" true"," false")并过滤字符串,我永远不会得到" False"在过滤器中选择工作。

复选框已成功填写,它只是不起作用的过滤。

此屏幕使用先前版本的jqGrid(4.5.2)工作正常。

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

我的班级是JSON' d并传递给网格:

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

1 个答案:

答案 0 :(得分:0)

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

sorttype: "boolean"
列中的

属性,哪些数据应解释为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",以便在第一次点击由true创建的树状态复选框时搜索stype: "checkbox"