我想使用 EasyUI 在数据网格中实现搜索功能。 我遇到了这个提供内置过滤的扩展http://www.jeasyui.com/extension/datagrid_filter.php
每当我使用此扩展激活过滤时,分页就会停止工作。 我看不到页面更改时对服务器的调用。 似乎是一个错误。有人可以帮忙吗?
我的数据网格列是动态的,所以我无法实现带有用于过滤的搜索按钮的自定义文本框。还有其他方法可以实现吗?
您应该将数据网格属性 remoteFilter 设置为 true。
要在分页网格上使用数据过滤器,您应该过滤记录并获取总记录,以便为分页提供总记录大小。这是我如何解决这个问题的示例。可能不是有史以来最好的代码,但运行良好:)
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);
}
}
希望对大家有帮助
问候,
我知道现在有点晚了......我也遇到了这个问题然后开始工作。 我的解决方案在 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 中的数据网格定义之后
但是如果您希望使用 url 属性加载数据网格,那么您应该放置过滤器启用代码“$(this).datagrid('enableFilter');”在“onLoadSuccess”函数中。然后数据网格中的数据也被加载,过滤器也被渲染。 问题:但是当您尝试输入并调用过滤时,过滤器将无法工作并且网格会挂起......我不知道为什么会这样。
您可以通过将“$(this).datagrid('enableFilter');”在您返回之前的“”“loadFilter”函数中; 然后过滤工作正常。 问题:现在当您在一些记录更新后在数据网格上调用“重新加载”时,网格将无法在网格上呈现新数据。
我是如何让这个工作的
示例代码(逻辑代码):
// ------------------------------
// 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 开发人员提供了足够的信息,让他们了解潜在的问题并解决它。
干杯, 拉姆