Question

我有下一个jqGrid表。

我想从标题列中禁用过滤器功能，但将其保留在过滤器工具栏中。

有没有办法禁用[ -z abc ] && [ -w file ]但是将其保留在总列列表中？在本例中，例如 Notes 列。

如何以最方便的方式做到这一点？

UPD 我需要删除标有红色箭头的字段并留下绿色箭头字段

ui-search-input

$(function () {
        var grid_selector = "#grid-table",
            pager_selector = "#grid-pager",
            $jqGridReport = $(grid_selector),
            grid_data =
                [
                    {id: "1", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
                    {id: "2", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
                    {id: "3", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "4", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"},
                    {id: "5", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
                    {id: "6", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {
                        id: "7",
                        name: "Mobile Telephone",
                        note: "note",
                        stock: "Yes",
                        ship: "ARAMEX",
                        sdate: "2007-12-03"
                    },
                    {id: "8", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "9", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {
                        id: "10",
                        name: "Desktop Computer",
                        note: "note",
                        stock: "Yes",
                        ship: "FedEx",
                        sdate: "2007-12-03"
                    },
                    {id: "11", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
                    {id: "12", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "13", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"},
                    {id: "14", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
                    {id: "15", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {
                        id: "16",
                        name: "Mobile Telephone",
                        note: "note",
                        stock: "Yes",
                        ship: "ARAMEX",
                        sdate: "2007-12-03"
                    },
                    {id: "17", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "18", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {id: "19", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {
                        id: "20",
                        name: "Desktop Computer",
                        note: "note",
                        stock: "Yes",
                        ship: "FedEx",
                        sdate: "2007-12-03"
                    },
                    {id: "21", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
                    {id: "22", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "23", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"}
                ];


        //resize to fit page size
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        })
        //resize on sidebar collapse/expand
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                setTimeout(function () {
                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                }, 0);
            }
        })

        $jqGridReport.jqGrid({
            subGrid: false,

            data: grid_data,
            datatype: "local",
            height: 'auto',
            colNames: ['ID', 'Name', 'Ship via', 'Notes'],
            colModel: [
                {name: 'id', index: 'id', width: 60, search: true, sorttype: "int", editable: true},
                {name: 'name', index: 'name', width: 150, editable: true, editoptions: {size: "20", maxlength: "30"}},
                {
                    name: 'ship',
                    index: 'ship',
                    width: 90,
                    editable: true,
                    edittype: "select",
                    editoptions: {value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}
                },
                {
                    name: 'note',
                    index: 'note',
                    width: 150,
                    sortable: false,
                    editable: true,
                    edittype: "textarea",
                    editoptions: {rows: "2", cols: "10"}
                }
            ],

            viewrecords: true,
            rowNum: 10,
            rowList: [10, 25, 50, 100],
            pager: pager_selector,
            altRows: true,

            multiselect: false,
            multiboxonly: true,

            editurl: "/dummy.html",//nothing is saved
            caption: "jgGrid Example"
        });

        $(grid_selector).jqGrid('navGrid', pager_selector,
            { 	//navbar options
                edit: false,
                editicon: 'ace-icon fa fa-pencil blue',
                add: false,
                addicon: 'ace-icon fa fa-plus-circle purple',
                del: false,
                delicon: 'ace-icon fa fa-trash-o red',
                search: true,
                searchicon: 'ace-icon fa fa-search green',
                refresh: false,
                refreshicon: 'ace-icon fa fa-refresh green',
                view: false,
                viewicon: 'ace-icon fa fa-search-plus grey',
            },
            {},
            {},
            {},
            {
                //search form
                recreateForm: true,
                afterShowSearch: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    style_search_form(form);
                },
                afterRedraw: function () {
                    style_search_filters($(this));
                }
                ,
                multipleSearch: true,
                /**
                 multipleGroup:true,
                 showQuery: true
                 */
            },
            {}
        );

        function style_search_filters(form) {
            form.find('.delete-rule').val('X');
            form.find('.add-rule').addClass('btn btn-xs btn-primary');
            form.find('.add-group').addClass('btn btn-xs btn-success');
            form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }

        function style_search_form(form) {
            var dialog = form.closest('.ui-jqdialog');
            var buttons = dialog.find('.EditTable')
            buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
        }

        $jqGridReport.jqGrid('filterToolbar', {autosearch: true, stringResult: false});
    });

预期结果

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/searchFilter.css">
<table id="grid-table"></table>
<div id="grid-pager"></div>

$(function () {
        var grid_selector = "#grid-table",
            pager_selector = "#grid-pager",
            $jqGridReport = $(grid_selector),
            grid_data =
                [
                    {id: "1", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
                    {id: "2", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
                    {id: "3", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "4", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"},
                    {id: "5", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
                    {id: "6", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {
                        id: "7",
                        name: "Mobile Telephone",
                        note: "note",
                        stock: "Yes",
                        ship: "ARAMEX",
                        sdate: "2007-12-03"
                    },
                    {id: "8", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "9", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {
                        id: "10",
                        name: "Desktop Computer",
                        note: "note",
                        stock: "Yes",
                        ship: "FedEx",
                        sdate: "2007-12-03"
                    },
                    {id: "11", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
                    {id: "12", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "13", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"},
                    {id: "14", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
                    {id: "15", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {
                        id: "16",
                        name: "Mobile Telephone",
                        note: "note",
                        stock: "Yes",
                        ship: "ARAMEX",
                        sdate: "2007-12-03"
                    },
                    {id: "17", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "18", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {id: "19", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
                    {
                        id: "20",
                        name: "Desktop Computer",
                        note: "note",
                        stock: "Yes",
                        ship: "FedEx",
                        sdate: "2007-12-03"
                    },
                    {id: "21", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
                    {id: "22", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
                    {id: "23", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"}
                ];


        //resize to fit page size
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        })
        //resize on sidebar collapse/expand
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                setTimeout(function () {
                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                }, 0);
            }
        })

        $jqGridReport.jqGrid({
            subGrid: false,

            data: grid_data,
            datatype: "local",
            height: 'auto',
            colNames: ['ID', 'Name', 'Ship via', 'Notes'],
            colModel: [
                {name: 'id', index: 'id', width: 60, search: true, sorttype: "int", editable: true},
                {name: 'name', index: 'name', width: 150, editable: true, editoptions: {size: "20", maxlength: "30"}},
                {
                    name: 'ship',
                    index: 'ship',
                    width: 90,
                    editable: true,
                    edittype: "select",
                    editoptions: {value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}
                },
                {
                    name: 'note',
                    index: 'note',
                    width: 150,
                    search: false,
                    sortable: false,
                    editable: true,
                    edittype: "textarea",
                    editoptions: {rows: "2", cols: "10"}
                }
            ],

            viewrecords: true,
            rowNum: 10,
            rowList: [10, 25, 50, 100],
            pager: pager_selector,
            altRows: true,

            multiselect: false,
            multiboxonly: true,

            editurl: "/dummy.html",//nothing is saved
            caption: "jgGrid Example"
        });

        $(grid_selector).jqGrid('navGrid', pager_selector,
            { 	//navbar options
                edit: false,
                editicon: 'ace-icon fa fa-pencil blue',
                add: false,
                addicon: 'ace-icon fa fa-plus-circle purple',
                del: false,
                delicon: 'ace-icon fa fa-trash-o red',
                search: true,
                searchicon: 'ace-icon fa fa-search green',
                refresh: false,
                refreshicon: 'ace-icon fa fa-refresh green',
                view: false,
                viewicon: 'ace-icon fa fa-search-plus grey',
            },
            {},
            {},
            {},
            {
                //search form
                recreateForm: true,
                afterShowSearch: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    style_search_form(form);
                },
                afterRedraw: function () {
                    style_search_filters($(this));
                }
                ,
                multipleSearch: true,
                columns: [{name: "id", sorttype: "int"}, {name: "name"}, {name: "ship"}, {name: "note"}]
                /**
                 multipleGroup:true,
                 showQuery: true
                 */
            },
            {}
        );

        function style_search_filters(form) {
            form.find('.delete-rule').val('X');
            form.find('.add-rule').addClass('btn btn-xs btn-primary');
            form.find('.add-group').addClass('btn btn-xs btn-success');
            form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }

        function style_search_form(form) {
            var dialog = form.closest('.ui-jqdialog');
            var buttons = dialog.find('.EditTable')
            buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
        }

        $jqGridReport.jqGrid('filterToolbar', {autosearch: true, stringResult: false});
    });

Answer 1

如果我正确理解了问题，那么您可以执行以下操作：

将search: false添加到您希望在过滤器工具栏中没有的列note。
将columns选项添加到navGrid的搜索选项中。例如，您可以使用columns: [{name: "id", sorttype: "int"}, {name: "name"}, {name: "ship"}, {name: "note"}]

澄清上述步骤：搜索对话框默认使用相同的列，如过滤器工具栏。列search: false中的属性note强制删除列note的搜索功能。添加columns选项允许包含一些独立于search属性值的列。另外，您可以指定搜索对话框中显示的列的顺序。

Answer 2

在我看来还有其他解决方案（如果我理解正确的话）这个想法是方法filterToolbar和navGrid的调用顺序。

最初在colModel中，不应出现在filterTollber中的字段应设置为search false

$jqGridReport..qGrid({
...
colModel [ 
    ...
    {name : 'note', ..., search : false...}
...
],
...

第二步是调用第一个过滤器工具栏

$jqGridReport.jqGrid('filterToolbar', {autosearch: true, stringResult: false});

使用setColProp将serch更改为true

$jqGridReport.jqGrid('setColProp', 'note', {search : true});

然后调用navGrid

$jqGridReport.jqGrid('navGrid', ...);

这种方式注释不会出现在标题搜索中，但在对话框搜索中可用

从标头过滤中禁用列，但保留在工具栏中

预期结果

2 个答案: