如何在 MVC 中的 cshtml 文件中通过 Jquery 在 JQGrid 中搜索（过滤）

Question

我是 jquery 的新手，也是 web 开发和 jqgrid 的新手。我正在尝试实现“过滤器”或“使用 Jquery 在 JQGrid 中搜索任何列值。

代码如下。有人可以帮助我如何通过下面的 5 列值实现过滤器吗？

<script>

        $(function() {
              $.ajax({
                cache: false, 
                url: "@Url.Action("GetMovies", "Home")",  
                dataType: "json",
                success: function (result) {

                    $("#list2").jqGrid(
                    {
                        datatype: "local",
                        colNames: ['MovieId', 'Title', 'Genre','ReleaseDate','Classification'],
                        colModel:
                        [
                            { name: 'MovieId', index: 'MovieId', width: 30},
                            { name: 'Title', index: 'Title', width: 190 },
                            { name: 'Genre', index: 'Genre', width: 130 },
                            { name: 'ReleaseDate', index: 'ReleaseDate', width: 100 },
                            { name: 'Classification', index: 'Classification', width: 130 }
                        ],
                        rowNum: 10,
                        rowList: [10, 20, 30,40],
                        pager: '#pager2',
                        sortname: 'MovieId', sortorder: "asc",
                        viewrecords: true, loadonce: true,
                        caption: "MoVies Collections",
                        findByName:"Title"
                    });

                    $("#list2").jqGrid('navGrid', '#pager2', { edit: true, add: true, del: false });
                    $("#list2").jqGrid("inlineNav", "#pager2", { addParams: { position: "last" } });

                    for (var i = 0; i <= result.length; i++)
                        $("#list2").jqGrid('addRowData', i + 1, result[i]);

                }
            });
        });
    </script>

Answer 1

您可以使用jqGrid“Toolbar”搜索或设置search:true in 'navGrid'

$("#list2").jqGrid('navGrid', '#pager2', { edit: true, add: true, del: false,search:true });

一个小的search icon将显示在底部的左侧。

或者我们可以有toolbar search.

jQuery("#list2").jqGrid('filterToolbar', { searchOperators: true});

如果您不想在colModel 中搜索特定列集'search:false'

查看“搜索”标签下的示例演示。

http://trirand.com/blog/jqgrid/jqgrid.html

更多 jqGrid 选项，请查看以下链接。

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options