jquery - 将 'Search' 设为远程，并将 jqGrid 中的其他所有内容(排序、分页等)设为本地

Question

我正在开发一个 Django 项目，该项目使用 JQgrid 显示数据库中的数据。

我想要实现的是仅连接搜索选项来执行远程搜索，其中服务器将返回结果集，并且所有其他 jqgrid 选项(如列排序、分页等)在客户端执行。

我知道这可以通过设置 loadonce:true 并在 'local' 和 之间切换 'datatype' 参数来完成'json' 基于 .click() 事件，具体取决于我是否单击排序或下一页、搜索等。

还有其他方法可以做到这一点吗？如果没有，你们能建议一种干净的方法来完成上述黑客攻击吗？

谢谢!

Answer 1

我成功地完成了这项工作，我很高兴与大家分享这一点。我在解释下面发布了我的整个 jqgrid 代码，供您引用。

首先，我使用 JSON 来获取结果，因此使用 jsonReader。

接下来，以下是特定于实现 {{search: remote},{sorting: local}, {pagination: local}} 行为的设置。

1. 设置loadonce: false，否则点击“搜索”按钮将不会点击服务器，而是始终执行本地搜索。

2. 我想实现 jqGrid 的多重搜索功能，因此希望在寻呼栏中显示微小的“放大镜”。

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

3. 现在，我实现远程搜索功能的方法是在 onSearch 和 onClose 事件上将数据类型从 local 切换为 json。即，在触发搜索查询时(即单击“查找”按钮)，我将 loadonce 设置为 false，将数据类型设置为 json。这确保了远程搜索。现在我们的网格填充了远程搜索数据，我们必须切换回 datatype:local，但是显式设置它 onClose 不起作用，所以我设置了 loadonce: true ，稍后再设置 datatype: local 本身。另请注意，我有 closeAfterSearch: true、closeOnEscape: true，以便确保 onClose 事件在触发搜索查询后始终关闭。

   jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true,
                                                       onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'});
                                                                                       $("#list2").trigger("reloadGrid");                                  
                                                                                       },                                                              onClose: function(){$("#list2").trigger("reloadGrid");                                                                                  
                                                                                   $("#list2").setGridParam({loadonce: true});
                                                                                   $(".ui-icon-refresh").trigger('click');                                                                                 
                                                                                   }
                                                   });
   

$(".ui-icon-refresh").trigger('click'); 在加载结果后强制刷新。在某些情况下这是必要的(不知道为什么)。我只是自己偶然发现了这个修复程序，但我不确定它为什么有效。如果您有想法，我很想知道其背后的原因。

1. 最后，每次我的网格加载时，搜索框都会默认弹出。因此，我只需让 jquery 单击模式框的“x”按钮即可强制关闭它。哈克但有效! :P

   $(".ui-icon-closethick").trigger('click');
   

<<< 整个 jqGrid 代码 >>>

请原谅代码中的“xyz”。我在那里有一些 Django 代码，所以我只是用 xyz 替换它以避免任何混淆。

jQuery(document).ready(function(){ 

  $("#list2").jqGrid({

    url:'xyz',
    datatype: 'json',
    loadonce: false,
    mtype: 'GET',
    colNames:xyz
    colModel :xyz,
    jsonReader : {
                repeatitems: false,
                root: "rows",
                page: "page",
                total: "total",
                records: "records"
        },
    height: '100%',
    width: '100%',
    pager: '#pager2',
    rowNum:15,
    rowList:[10,15,30],
    viewrecords: true,
    caption: '&nbsp',
     autowidth: false,
     shrinkToFit: true,
     ignoreCase:true,
     gridview: true

   });
  jQuery("#list2").jqGrid('navGrid','#pager2',{ del:false,add:false,edit:false},{},{},{}, {multipleSearch:true});
  jQuery("#list2").jqGrid('navButtonAdd', '#pager2',
                         {
                             caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
                             onClickButton: function() {
                                 jQuery("#list2").jqGrid('columnChooser');
                            }
                         });
  jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true,
                                                        onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'});
                                                                                        $("#list2").trigger("reloadGrid");                                  
                                                                                        }, 

                                                        onClose: function(){$("#list2").trigger("reloadGrid");                                                                                  
                                                                                    $("#list2").setGridParam({loadonce: true});
                                                                                    $(".ui-icon-refresh").trigger('click');                                                                                 
                                                                                    }
                                                    });


  $(window).bind('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeGrids, 60);
    divwidth = $(".content-box-header").width() - 40;
    //alert(divwidth);
   $("#list2").setGridWidth(divwidth,true);

    }); 

    $(window).resize();
    $(".ui-icon-closethick").trigger('click');

});