关于miniui框架中的前台grid过滤

最新推荐文章于 2021-05-11 21:59:09 发布

junebubble

最新推荐文章于 2021-05-11 21:59:09 发布

阅读量1.2k

点赞数 1

分类专栏： miniui 文章标签：前端 javascript

本文链接：https://blog.csdn.net/junebubble/article/details/110954644

版权

miniui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于miniui框架中的前台grid过滤

前言
实现方式

前言

项目用的前端框架比较老，在做项目迭代的时候，前台表格的数据无分页并已经为固定数据，搜索条件想要在前台进行筛选。
在官网进行搜索，官网给出的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;
          });
      }
  }

junebubble

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于miniui框架中的前台grid过滤

关于miniui框架中的前台grid过滤前言实现方式方式一方式二查询前查询后全部代码关键代码前言项目用的前端框架比较老，在做项目迭代的时候，前台表格的数据无分页并已经为固定数据，搜索条件想要在前台进行筛选。在官网进行搜索，官网给出的FilterRow并不适用，该筛选方式仍旧需要调用后台接口传参进行筛选，如图所示。然后想到了之前前台筛选treeGrid的方式，进行了尝试，果然异曲同工。实现方式方式一该方式简单粗暴，根据筛选条件直接将现有的data进行匹配对比，然后重新使用grid.loadDa
复制链接

扫一扫