Блог

Я новичок в jquery, а также в веб-разработке и jqgrid. Я пытаюсь реализовать «фильтр» или «Поиск любых значений столбцов в jqGrid с помощью Jquery.

Код — это beow. Может ли кто-нибудь помочь мне, как реализовать фильтр по значениям 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>
  

Вы можете использовать поиск по jqGrid « Toolbar » или задать search:true в ‘ navGrid ‘

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

С левой стороны внизу будет отображаться небольшой search icon символ.

Или мы можем иметь toolbar search.

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

если вы не хотите выполнять поиск по определенному набору столбцов 'search:false' в colModel

Смотрите примеры демонстрационных версий на вкладке «Поиск».

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

Для получения дополнительных параметров jqGrid проверьте ссылку ниже.

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