jqgrid search popup allows all filters to be remov

2019-02-27 09:02发布

站内问答 / 前端开发
1859 1 4

I'm trying out very simple search popup on the JqGrid. Please see the code below. There are few issues:

  • The popup comes up with AND/OR and [+] controls at the very top. See screenshot below: (from FF 4)enter image description here

  • You can click on [-] button to remove the very first (and only) filter row. It shouldn't be allowed. First filter row should never be allowed to be removed.

  • Code:

    <!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>

标签： jqgrid
举报
1条回答
姐就是有狂的资本
2楼-- · 2019-02-27 09:28

I suggest to overwrite the internal reDraw method used by filtering (see my another answer for more description). To do this you should include in the searchOptions which you use the beforeShowSearch event handler with the following implementation:

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();
}

You can see the corresponding demo here.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)