jqgrid search popup позволяет удалить все фильтры! - PullRequest
2 голосов
/ 20 мая 2011

Я пробую очень простое всплывающее окно поиска в JqGrid. Пожалуйста, смотрите код ниже. Есть несколько вопросов:

  • Всплывающее окно содержит элементы управления AND / OR и [+] в самом верху. Смотрите скриншот ниже: (из FF 4) enter image description here

  • Вы можете нажать кнопку [-], чтобы удалить самую первую (и единственную) строку фильтра. Это не должно быть разрешено. Никогда нельзя удалять первую строку фильтра.

  • Код:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html>
    <head>
    <title>JQGRID Test</title>      
    <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
    
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
    
    <script type="text/javascript">
        $(function() {
            createGrid();
        });
        function createGrid() {
            $("#jqgrid-table").jqGrid({
                colNames:['First Name', 'Last Name', 'Age', 'IQ', 'Type'],
                colModel:[
                    {name:'firstName',index:'firstName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'age', index:'age', width:50},
                    {name:'iq', index:'iq', width:50, stype:'select', searchoptions: {dataUrl:'/api/domains/putcalldomain'}},
                    {name:'type', index:'type', width: 56}
                ],
                width: 800,
                datatype:'local',                   
                pager: '#pager2',
                viewrecords: true,
                caption:"JSON Example"
            });
            var searchOptions = {
                caption: 'Filter...',
                multipleSearch:true,
                closeAfterSearch:true,
                closeAfterReset:true,
                Find: 'Filter'
            };                
            jQuery("#jqgrid-table").jqGrid('navGrid',
                                    '#pager2', 
                                    {search:true, edit:false, add:false, del:false, refresh:false}, 
                                    null, null, null, searchOptions
                                    );
            var data = getData();
            for(var i =0; i < data.length; i++) {
                var r = data[i];
                jQuery("#jqgrid-table").addRowData(r.id, r);
            }
        }
        function getData() {
            return [
                   {id:1, firstName: 'John', lastName: 'XXX',  age:'30',  iq:'200', type: 'Nice'},
                   {id:2, firstName: 'Ashley', lastName:'YYY', age:'31', iq:'210', type:'Nicer'},
                   {id:3, firstName:'Smith', lastName:'ZZZ', age:'23', iq:'90', type:'Nicest'}
                ];
       }
    
    </script>
    </head>
    <body>
      <div id='jqgrid-div'>
          <table id='jqgrid-table'></table>
         <div id="pager2"></div>
      </div>
    </body>
    </html>
    

1 Ответ

0 голосов
/ 25 мая 2011

Я предлагаю перезаписать внутренний reDraw метод, используемый при фильтрации (см. мой другой ответ для более подробного описания). Для этого вы должны включить в searchOptions, который вы используете обработчик событий beforeShowSearch со следующей реализацией:

beforeShowSearch: function($form) {
    var searchDialog = $form[0],
        oldrReDraw = searchDialog.reDraw, // save the original reDraw method
        doWhatWeNeed = function() {
            $('input.delete-rule:first',searchDialog).unbind('click');

            // set fucus in the last input field
            setTimeout(function() {
               // set fucus in the last input field
               $('input[type="text"]:last',searchDialog).focus();
            }, 50);
        }
    searchDialog.reDraw = function() {
        oldrReDraw.call(searchDialog);    // call the original reDraw method
        doWhatWeNeed();
    }
    doWhatWeNeed();
}

Вы можете увидеть соответствующую демонстрацию здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...