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

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

这是我的jqgrid

javascript - jqGrid在按钮单击时动态更改搜索运算符类型,enter image description here,第2张

网格相关代码

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();正在点击页脚部分中定义的按钮来执行我的工具分析。

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

我想做什么?当我点击Excludes按钮时,它应该触发另一个triggerToolbar,但不包含过滤器。如何动态更改特定列的默认过滤器?

编辑 jqGrid版本4.8.2

更新随着Oleg的另一个答案here和当前的答案,我能够实现这一目标。代码已更新并可根据需要运行。

最佳答案:

1 个答案:

答案 0 :(得分:1)

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

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

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
U19学习网站 » javascript - jqGrid在按钮单击时动态更改搜索运算符类型