javascript - jqGrid 在按钮单击时动态更改搜索运算符类型

Question

这是我的jqgrid

网格相关代码

var lastsel2;
var containsOrNot = 'contains';
jQuery(document).ready(function(){
    jQuery("#list").jqGrid({
        url: "{{ asset('/app_dev.php/_thrace-datagrid/data/item_lookup_management') }}",
        postData: {
            masterGridRowId: {{ VPK }}
        },
        datatype: "json",
        mtype: 'POST',
        colNames: ['Item No', 'Description 1', 'Vendor Item No','Report Dec','Location','On Hand','Exp balance','Available now','Lead Time','Type', 'Vendor #', 'Status', 'Stocked', 'Product Line', 'Creator'],
        colModel: [
            {
                name: "I_ItemNumID",
                index: "u.I_ItemNumID",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '70'
            },
            {
                name: "I_Desc1",
                index: "u.I_Desc1",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '70'
            },
            {
                name: "I_VendorItemNum",
                index: "u.I_VendorItemNum",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '100'
            },
            {
                name: "I_ReportDec",
                index: "u.I_ReportDec",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '100'
            },
            {
                name: "I_BinNum",
                index: "u.I_BinNum",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '100'
            },
            {
                name: "I_OnHandTotal",
                index: "u.I_OnHandTotal",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '100'
            },
            {
                name: "R_ClosingBalance",
                index: "u.R_ClosingBalance",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '100'
            },
            {
                name: "R_BalanceActual",
                index: "u.R_BalanceActual",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '100'
            },
            {
                name: "I_LeadTime",
                index: "u.I_LeadTime",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '100'
            },
            {
                name: "I_ItemType",
                index: "u.I_ItemType",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '100'
            },
            {
                name: "I_VendorNumID",
                index: "u.I_VendorNumID",
                editable: false,
                align: 'left',
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                width: '100'
            },
            {
                name: "I_Status",
                index: "u.I_Status",
                editable: false,
                width: 100,
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                align: 'left'
            },
            {
                name: "I_isStocked",
                index: "u.I_isStocked",
                editable: false,
                width: 100,
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                align: 'left'
            },
            {
                name: "I_ProductLine",
                index: "u.I_ProductLine",
                editable: false,
                width: 150,
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                align: 'left'
            },
            {
                name: "I_CreatedSysUser",
                index: "u.I_CreatedSysUser",
                editable: false,
                width: 100,
                searchoptions:{sopt:['cn','eq','ne','lt','le','gt','ge','bw','ew','nc']},
                align: 'left'
            }
        ],
        ondblClickRow: function(rowid) {
            var rowData = jQuery('#list').jqGrid ('getRowData', rowid);
            window.opener.document.getElementById('productDetail_V_PK').value = rowid;
            window.opener.document.getElementById('productDetail_V_Desc').value = rowData.I_ItemNumID;
            window.close();
        },
        height: 400,
        rowNum: 50,
        rowTotal: 1000000,
        width: 3000,
        gridview: true,
        autoencode: false,
        pager: '#pager',
        shrinkToFit: true,
        sortable: true,
        sortname:"u.id",
        sortorder: "desc",
        viewrecords: true,
        //multiselect: true,
        loadonce:false,
        onCellSelect: function(row, col, content, event) {
            var cm = jQuery("#list").jqGrid("getGridParam", "colModel");
            //alert(cm[col].name);
            if (window.getSelection) {
                selection = window.getSelection();
            } else if (document.selection) {
                selection = document.selection.createRange();
            }
            selectionColumn = cm[col].name;
            selection.toString() !== '' && $("#gs_"+selectionColumn).val(selection.toString());
        },
        rowList: [50, 100, 500, 1000]
    });
    jQuery("#list").jqGrid('navGrid',"#pager",{ del:false, add:false, edit:false},{multipleSearch:true}).navButtonAdd('#pager',{
        caption: "Select",
        buttonicon:"ui-icon-disk",
        onClickButton: function(){
            var myGrid = $('#list');
            selectedRowId = myGrid.jqGrid ('getGridParam', 'selrow');
            var rowData = jQuery('#list').jqGrid ('getRowData', selectedRowId);
            if(selectedRowId != null)
            {
                window.opener.document.getElementById('productDetail_V_PK').value = selectedRowId;
                window.opener.document.getElementById('productDetail_V_Desc').value = rowData.I_ItemNumID;
                window.close();
            }
            else
            {
                $(function() {
                    $( "#dialog-message" ).dialog({
                        modal: true,
                        buttons: {
                            Ok: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    });
                });
            }
        },
        position:"last"
    });
    jQuery("#list").jqGrid('filterToolbar',{
        searchOperators: true,
        stringResult: true,
        searchOnEnter : true,
        sopt: ['cn','eq','ne','lt','le','gt','ge','bw','ew','nc'],
        beforeSearch: function(){
            if(containsOrNot == "notContains" && containsOrNot != "contains")
            {
                //CODE FOR EXCLUDE EXECUTE HERE
                var i, l, rules, rule, $grid = $('#list'),
                        postData = $grid.jqGrid('getGridParam', 'postData'),
                        filters = $.parseJSON(postData.filters);
                if (filters && typeof filters.rules !== 'undefined' && filters.rules.length > 0) {
                    rules = filters.rules;
                    for (i = 0; i < rules.length; i++) {
                        rule = rules[i];
                        console.log(rule.op);
                        if (rule.op === 'cn') {
                            // change contains to does not contain
                            rule.op = 'nc';
                        }
                    }
                    postData.filters = JSON.stringify(filters);
                }
            }
        }}).navButtonAdd('#pager',{
        caption: "Contains",
        buttonicon:"ui-icon-disk",
        onClickButton: function(){
            containsOrNot = 'contains';
            $("#list")[0].triggerToolbar();
        },
        position:"last"
    }).navButtonAdd('#pager',{
        caption: "Excludes",
        buttonicon:"ui-icon-disk",
        onClickButton: function(){
            containsOrNot = 'notContains';
            $("#list")[0].triggerToolbar();
        },
        position:"last"
    });
    jQuery('#list').jqGrid('gridResize');
});

我的网格已经有用于触发工具栏搜索的代码。$("#list")[0].triggerToolbar(); 正在通过单击页 footer 分中定义的按钮进行工具栏搜索。

当前搜索默认为contains。因此，当我从任何列中选择文本时，该列的过滤器将填充所选文本。当我按下“包含”按钮时，triggerToolbar 会正确触发。

我想做什么？当我单击“排除”按钮时，它应该触发另一个触发器工具栏，但带有“不包含过滤器”。如何动态更改特定列上的默认过滤器？

编辑 jqGrid 版本 4.8.2

更新奥列格的另一个答案here目前的答案我能够实现这一点。代码已更新并按要求运行。

Answer 1

你想要的并不容易。您必须在每个搜索字段中更改操作菜单中的操作。此外，您必须首先添加 searchoptions: { sopt: ['cn', 'nc']}选项在所有列，因为目前有很多字段没有 searchoptions.sopt 。这意味着只能通过 'cn' 进行搜索。 .

由于该方式的复杂性，我建议您选择其他方式。我建议您添加beforeSearch回调filterToolbar 。回调onClickButton对于 "Excludes"和"Contains"按钮应该将某些变量设置为不同的值。该变量应该在 beforeSearch 内可用filterToolbar的回调。 beforeSearch里面回调你可以实现以下逻辑。如果"Contains"单击按钮它应该返回 false (继续搜索)。如果是"Excludes"单击按钮应该转换字符串 postData.filters反对并遍历 rules 的每个元素并替换"cn" op 的值属性至"nc" 。最后应该将修改后的搜索规则从对象转换为 string并返回false也继续寻找。它应该可以工作。