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

Question

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

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

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

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

默认情况下，空的 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"/>

Answer 1

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