带分页的 jQuery EasyUI 数据网格过滤器

问题描述 投票:0回答:3

我想使用 EasyUI 在数据网格中实现搜索功能。 我遇到了这个提供内置过滤的扩展http://www.jeasyui.com/extension/datagrid_filter.php

每当我使用此扩展激活过滤时,分页就会停止工作。 我看不到页面更改时对服务器的调用。 似乎是一个错误。有人可以帮忙吗?

我的数据网格列是动态的,所以我无法实现带有用于过滤的搜索按钮的自定义文本框。还有其他方法可以实现吗?

jquery jquery-easyui
3个回答
0
投票

您应该将数据网格属性 remoteFilter 设置为 true。


0
投票

要在分页网格上使用数据过滤器,您应该过滤记录并获取总记录,以便为分页提供总记录大小。这是我如何解决这个问题的示例。可能不是有史以来最好的代码,但运行良好:)

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

希望对大家有帮助

问候,


0
投票

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

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

假设我有一个数据网格,我有一个 loadFilter 方法来处理来自远程的自定义数据格式,我还想在数据网格中的列上设置过滤器,然后就会出现一些严重的问题。

我会提到问题以及最后我是如何让它工作的(以防万一其他人也需要这种组合来工作)

问题是: 1. 问题:在您定义数据网格和 url 后不久,如果您通过 dg.datagrid('enableFilter'); 启用则立即那么即使完成对 url 的调用,数据也不会呈现在数据网格中。

但是,如果您有分配的预加载数据,则此方法有效,例如:“data: {total: xxx, rows: [{id:'1', name:'abc'},{id:'1', name:' abc'}] }”。这可能是因为滤镜的渲染干扰了数据的渲染。

所以“dg.datagrid('enableFilter');”不能紧跟在你的 javscript 中的数据网格定义之后

  1. 但是如果您希望使用 url 属性加载数据网格,那么您应该放置过滤器启用代码“$(this).datagrid('enableFilter');”在“onLoadSuccess”函数中。然后数据网格中的数据也被加载,过滤器也被渲染。 问题:但是当您尝试输入并调用过滤时,过滤器将无法工作并且网格会挂起......我不知道为什么会这样。

  2. 您可以通过将“$(this).datagrid('enableFilter');”在您返回之前的“”“loadFilter”函数中; 然后过滤工作正常。 问题:现在当您在一些记录更新后在数据网格上调用“重新加载”时,网格将无法在网格上呈现新数据。

我是如何让这个工作的

  1. 我定义了一个单独的函数(比如:“loadAndSetGridData()”)来使用“$.ajax”为网格加载我的数据
  2. 删除了“url”属性并删除了这些函数:onLoadSuccess、loadFilter。这些现在不相关,因为我们没有“url”属性。
  3. 使用“dg.datagrid('enableFilter');”在数据网格定义之后立即启用过滤器
  4. 使用数据网格的“loadData”方法手动设置数据网格上的数据。我在收到 ajax 调用的响应后执行此操作
  5. 更新后您重新加载数据网格数据(即“dg.datagrid('reload')”)的所有那些地方,将其替换为调用新方法,即“loadAndSetGridData()”
  6. 最后,为了使分页栏上的刷新图标起作用,在网格定义的“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 开发人员提供了足够的信息,让他们了解潜在的问题并解决它。

干杯, 拉姆

© www.soinside.com 2019 - 2024. All rights reserved.