前言
项目用的前端框架比较老,在做项目迭代的时候,前台表格的数据无分页并已经为固定数据,搜索条件想要在前台进行筛选。
在官网进行搜索,官网给出的FilterRow并不适用,该筛选方式仍旧需要调用后台接口传参进行筛选,如图所示。
然后想到了之前前台筛选treeGrid的方式,进行了尝试,果然异曲同工。
实现方式
方式一
该方式简单粗暴,根据筛选条件直接将现有的data进行匹配对比,然后重新使用grid.loadData(datas)的方式进行加载数据。
方式二
查询前
查询后
全部代码
整段代码如下,可以直接复制到官网的在线演示示例里面运行一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataGrid 数据表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="../demo.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/boot.js" type="text/javascript"></script>
<script src="js/ColumnsMenu.js" type="text/javascript"></script>
</head>
<body>
<h1>DataGrid 数据表格</h1>
<div style="width:800px;">
<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
<table style="width:100%;">
<tr>
<td style="white-space:nowrap;">
<input id="name" class="mini-textbox" emptyText="请输入姓名" style="width:150px; "/>
<a class="mini-button" onclick="search()">查询</a>
<a class="mini-button" onclick="clear()">清空</a>
</td>
</tr>
</table>
</div>
</div>
<div id="nameGrid" class="mini-datagrid" style="width:800px;height:280px;" allowResize="true" idField="id" multiSelect="true">
<div property="columns">
<div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
</div>
</div>
<script type="text/javascript">
mini.parse();
var datas=[{'name':'张三'},{'name':'李四'},{'name':'王五'}];
var grid = mini.get("nameGrid");
grid.loadData(datas);
//查询
function search() {
var name=mini.get("name").getValue();
if(name !=null && name !=""){
grid.filter(function (e) {
if(e.name.indexOf(name)==-1){
return false;
}
return true;
});
}
}
//清空
function clear() {
mini.get("name").setValue("");
grid.loadData(datas);
}
</script>
<div class="description">
<h3>Description</h3>
</div>
</body>
</html>
关键代码
function search() {
//筛选条件
var name=mini.get("name").getValue();
if(name !=null && name !=""){
//grid中的现有数据进行过滤
grid.filter(function (e) {
//e是每一行数据 这里为 {name: "张三", _id: 1, _uid: 1}
//返回值是一个boolean 如果为true 这一行数据就显示,如果为false 这一行数据就不显示
if(e.name.indexOf(name)==-1){
return false;
}
return true;
});
}
}