jqGrid multiplesearch - 如何为每一行添加和/或列？

Posted 2023-05-09

【中文标题】jqGrid multiplesearch - 如何为每一行添加和/或列？

【英文标题】：jqGrid multiplesearch - How do I add and/or column for each row?

【发布时间】：2012-10-20 19:24:29

【问题描述】：

我有一个 jqGrid 多重搜索对话框，如下所示：

（注意每行中的第一个空 td）。

我想要的是这样的搜索网格（如下），其中：

第一个 td 相应地用“和/或”填充。 相应的搜索过滤器也是这样构建的。

默认情况下空的 td 在那里，所以我假设这是我可以打开的标准 jqGrid 功能，但我似乎无法在文档中找到它。

我的代码如下所示：

<script type="text/javascript">

    $(document).ready(function () 

        var lastSel;
        var pageSize = 10; // the initial pageSize

        $("#grid").jqGrid(
            url: '/Ajax/GetJqGridActivities',
            editurl: '/Ajax/UpdateJqGridActivities',
            datatype: "json",
            colNames: [
                'Id',
                'Description',
                'Progress',
                'Actual Start',
                'Actual End',
                'Status',
                'Scheduled Start',
                'Scheduled End'
            ],
            colModel: [
                 name: 'Id', index: 'Id', searchoptions:  sopt: ['eq', 'ne'] ,
                 name: 'Description', index: 'Description', searchoptions:  sopt: ['eq', 'ne'] ,
                 name: 'Progress', index: 'Progress', editable: true, searchoptions:  sopt: ['eq', 'ne', "gt", "ge", "lt", "le"] ,
                 name: 'ActualStart', index: 'ActualStart', editable: true, searchoptions:  sopt: ['eq', 'ne', "gt", "ge", "lt", "le"] ,
                 name: 'ActualEnd', index: 'ActualEnd', editable: true, searchoptions:  sopt: ['eq', 'ne', "gt", "ge", "lt", "le"] ,
                 name: 'Status', index: 'Status.Name', editable: true, searchoptions:  sopt: ['eq', 'ne'] ,
                 name: 'ScheduledStart', index: 'ScheduledStart', searchoptions:  sopt: ['eq', 'ne', "gt", "ge", "lt", "le"] ,
                 name: 'ScheduledEnd', index: 'ScheduledEnd', searchoptions:  sopt: ['eq', 'ne', "gt", "ge", "lt", "le"] 
            ],
            jsonReader: 
                root: 'rows',
                id: 'Id',
                repeatitems: false
            ,
            rowNum: pageSize, // this is the pageSize 
            rowList: [pageSize, 50, 100],
            pager: '#pager',
            sortname: 'Id',
            autowidth: true,
            shrinkToFit: false,
            viewrecords: true,
            sortorder: "desc",
            caption: "JSON Example",
            onSelectRow: function (id) 
                if (id && id !== lastSel) 
                    $('#grid').jqGrid('restoreRow', lastSel);
                    $('#grid').jqGrid('editRow', id, true);
                    lastSel = id;
                
            
        );

        // change the options (called via searchoptions)
        var updateGroupOpText = function ($form) 
            $('select.opsel option[value="AND"]', $form[0]).text('and');
            $('select.opsel option[value="OR"]', $form[0]).text('or');
            $('select.opsel', $form[0]).trigger('change');
        ;

        // $(window).bind('resize', function() 
        //    ("#grid").setGridWidth($(window).width());
        //).trigger('resize');

        // paging bar settings (inc. buttons)
        // and advanced search
        $("#grid").jqGrid('navGrid', '#pager', 
             edit: true, add: false, del: false , // buttons
            , // edit option - these are ordered params!
            , // add options
            , // del options            
            closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, onInitializeSearch: updateGroupOpText, afterRedraw: updateGroupOpText, // search options
            
        );


    // TODO: work out how to use global $.ajaxSetup instead
        $('#grid').ajaxError(function (e, jqxhr, settings, exception) 
            var str = "Ajax Error!\n\n";
            if (jqxhr.status === 0) 
                str += 'Not connect.\n Verify Network.';
             else if (jqxhr.status == 404) 
                str += 'Requested page not found. [404]';
             else if (jqxhr.status == 500) 
                str += 'Internal Server Error [500].';
             else if (exception === 'parsererror') 
                str += 'Requested JSON parse failed.';
             else if (exception === 'timeout') 
                str += 'Time out error.';
             else if (exception === 'abort') 
                str += 'Ajax request aborted.';
             else 
                str += 'Uncaught Error.\n' + jqxhr.responseText;
            
            alert(str);
        );


        $("#grid").jqGrid('bindKeys');
        $("#grid").jqGrid('inlineNav', "#grid");

    );

</script>


<table id="grid"/> <div id="pager"/>

【参考方案1】：

没关系，找到了——只需要使用 multipleGroup: true

【讨论】：

您还可以考虑改善复杂搜索对话框的外观。请参阅提供相应代码示例的the answer。 Another answer 展示了如何改进“-”按钮的行为。

谢谢，我也去看看。