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

时间:2012-10-31 10:51:18

标签: jquery jquery-plugins jqgrid

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

(注意每行中的第一个空td。)

jqGrid now

我想要的是这样的搜索网格(如下),其中:

  1. 第一个td用“和/或”填写。
  2. 相应的搜索过滤器也是以这种方式构建的。
  3. jqGrid want

    默认情况下,空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 个答案:

答案 0 :(得分:0)

没关系,发现它 - 只需要使用multipleGroup:true