jqgrid搜索弹出窗口允许删除所有过滤器！_Jqgrid

jqgrid搜索弹出窗口允许删除所有过滤器！

jqgrid

jqgrid搜索弹出窗口允许删除所有过滤器！,jqgrid,Jqgrid,我正在JqGrid上尝试非常简单的搜索弹出窗口。请参阅下面的代码。有几个问题：弹出窗口在最顶部显示AND/OR和[+]控件。见下面的屏幕截图：（摘自FF 4）您可以单击[-]按钮删除第一个（也是唯一一个）过滤器行。这是不允许的。不应允许删除第一个筛选器行代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

我正在JqGrid上尝试非常简单的搜索弹出窗口。请参阅下面的代码。有几个问题：

弹出窗口在最顶部显示AND/OR和[+]控件。见下面的屏幕截图：（摘自FF 4）
您可以单击[-]按钮删除第一个（也是唯一一个）过滤器行。这是不允许的。不应允许删除第一个筛选器行

代码：

<!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测试
$（函数（）{
createGrid（）；
});
函数createGrid（）{
$（“#jqgrid表”）.jqgrid({
colNames:['First Name'，'Last Name'，'Age'，'IQ'，'Type']，
colModel：[
{name:'firstName'，索引：'firstName'，宽度：100}，
{name:'lastName'，索引：'lastName'，宽度：100}，
{名称：'age'，索引：'age'，宽度：50}，
{name:'iq'，index:'iq'，width:50，stype:'select'，searchoptions:{dataUrl:'/api/domains/putcalldomain'}，
{名称：'type'，索引：'type'，宽度：56}
],
宽度：800，
数据类型：'local'，
传呼机：“#第2页”，
viewrecords：是的，
标题：“JSON示例”
});
var搜索选项={
标题：“过滤器…”，
多重搜索：对，
closeAfterSearch：没错，
closeAfterReset：正确，
查找：“过滤器”
};                
jQuery（“#jqgrid table”）.jqgrid（'navGrid'，
“#第2页”，
{搜索：true，编辑：false，添加：false，删除：false，刷新：false}，
null，null，null，searchOptions
);
var data=getData（）；
对于（变量i=0；i

我建议覆盖过滤使用的内部重画方法（有关更多说明，请参阅）。为此，您应在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();
}

您可以看到相应的演示。
我建议覆盖过滤所使用的内部重画方法（有关更多说明，请参阅）。为此，您应在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();
}

您可以看到相应的演示