Question

我想使用EasyUI在datagrid中实现搜索功能。我遇到了这个扩展程序，它提供了内置过滤http://www.jeasyui.com/extension/datagrid_filter.php

每当我使用此扩展程序激活过滤时，分页都会停止工作。我无法在页面更改时看到对服务器的调用。看起来像一个bug。任何人都可以帮忙吗？

我的datagrid列是动态的，因此我无法使用搜索按钮实现自定义文本框进行过滤。还有其他方法可以实现吗？

Answer 1

你应该将datagrid属性remoteFilter设置为true。

Answer 2

要在分页网格上使用datafilter，您应该过滤记录并获取总记录，以便为总记录大小分页。以下是我如何解决此问题的示例。可能不是最好的代码，但运作良好:)）

function getPhrasesGrid($page,$rows,$sort,$order,$filter='') {
    //This part is calculating filtered total record
    $where = $this->prepareFilterString($filter);
    if($where != '') $this->db->where($where);
    $this->db->select('*');
    $this->db->from('phrasesview');
    $q = $this->db->get();
    if($q->num_rows() != 0) { $total = $q->num_rows(); } else { return array("total"=>0,"rows"=>array()); }


    // And than I'm preparing the return data
    $offset = ($page-1)*$rows;

    $this->db->from('phrasesview');
    if($where != '') { $this->db->where($where); }
    $this->db->order_by($sort,$order);
    $this->db->limit($rows,$offset);
    $query = $this->db->get();

    if($query->num_rows() != 0) {
      $rows = $query->result_array();
      return array('total'=>$total,'rows'=>$rows);
    }
}

希望它可以帮助任何人

此致

Answer 3

我知道现在有点晚了......我也遇到了这个问题，然后才开始工作。我的解决方案在JEasyUI论坛帖子

上

http://www.jeasyui.com/forum/index.php?topic=4303.0

假设我有一个数据网格，并且我有一个loadFilter方法来处理来自远程的自定义数据格式，我还希望在数据网格中的列上有过滤器，然后存在一些严重的问题。

我会提到这些问题，最后我是如何让它工作的（以防万一其他人也需要这种组合才能工作）

问题是： 1.问题：将数据网格与url一起定义后不久，然后立即启用by dg.datagrid（'enableFilter'）;那么即使对url的调用完成，数据也不会在数据网格中呈现。

但是，如果您有预先加载的数据，例如：“data：{total：xxx，rows：[{id：'1'，name：'abc'}，{id：'1'，name ：'abc'}]}“。这可能是因为过滤器的渲染干扰了数据的渲染。

所以“dg.datagrid（'enableFilter'）;”无法在javscript

中的datagrid定义之后出现

但是如果你想使用url属性加载datagrid，那么你应该放置过滤器启用代码“$（this）.datagrid（'enableFilter'）;”在“onLoadSuccess”功能中。然后，还加载数据网格中的数据，并且还渲染过滤器。问题：但是当你尝试输入并调用过滤时，过滤器将无法工作并且网格类型会挂起...我不知道为什么会发生这种情况。
您可以通过设置“$（this）.datagrid（'enableFilter'）;”来解决这个问题。“在你返回之前的“”loadFilter“函数中; 然后过滤工作正常。问题：现在，当您在更新记录后在数据网格上调用“重新加载”时，网格将无法在网格上呈现新数据。

我是如何工作的

我定义了一个单独的函数（比如：“loadAndSetGridData（）”）来使用“$ .ajax”加载我的网格数据
删除了'url'属性并删除了这些函数：onLoadSuccess，loadFilter。这些现在不相关，因为我们没有'url'属性。
使用“dg.datagrid（'enableFilter'）;”
使用datagrid的'loadData'方法在datagrid上手动设置数据。在得到我的ajax电话回复后，我这样做了
您在更新后重新加载数据网格数据的所有地方（即“dg.datagrid（'reload'）”），将其替换为调用新方法，即“loadAndSetGridData（）”
最后，为了使分页栏上的刷新图标起作用，请在网格定义的“onBeforeLoad”中再次调用“loadAndSetGridData（）”。

示例代码（逻辑代码）：

    // ------------------------------
    // the data-grid definition section ( this assumes that you already have the relevant html table with id "my-dg" ) without the 'url' of-course 
    // ------------------------------

   var dg = $("#my-dg").datagrid({
      loadMsg: "Loading data",
      onDblClickRow: function(index, row){
         // custom code
      },
      onSelect: function(index, row){
         // custom code
      }
      ,onBeforeLoad: function(){
         loadAndSetGridData(); // this will take care of loading the data via ajax separately and setting it to the datagrid
      }

   });

   dg.datagrid('enableFilter'); // Okay to enable the filter here now



    // ------------------------------
    // the data loader function
    // ------------------------------
    var loadAndSetGridData = function(dg){
                var listUrl = "my data-url url";
                $("my-dg").datagrid('loading');  // show the loading msg
                $.ajax({
                    url:     listUrl,
                    type:    'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    error: function(xhr,status,err){
                        $("my-dg").datagrid('loaded');  // close the loading msg
                        // showWarningMessage("status : " + status + "<br/>" + "Error:" + err);

                        $("my-dg").datagrid('loadData',
                            {
                                total : 0
                                , rows: []
                            }
                        );

                    },
                    success: function(response){
                        $("my-dg").datagrid('loaded');
                   // this is custom code on what you do after you get back the response
                        if (response.success){

                            $("my-dg").datagrid('loadData',
                                {
                                    total: (response.dataList!=null)?response.dataList.length:0
                                    , rows: (response.dataList!=null)?response.dataList:[]
                                }
                            );

                        } else {
                            // showWarningMessage(response.message); // custom code

                            $("my-dg").datagrid('loadData',
                                {
                                    total : 0
                                    , rows: []
                                }
                            );

                        }
                    }
                });


            };


    // ------------------------------
    // replace with this in all places where you were dong $("my-dg").datagrid('reload'); or  $("my-dg").datagrid('load');
    // ------------------------------
    loadAndSetGridData();

这个有效!!但我相信原来的问题必须得到解决。在此之前，这就是解决方法。

希望我已经为JEasy-UI开发人员提供了足够的信息，以便他们了解底层问题并进行修复。

欢呼声，拉姆

jQuery EasyUI数据网格过滤器与分页

3 个答案: