正文

学会Bootstrap轻松实现列表多条件筛选查询技巧

/0 浏览量
0518

在Web开发中，列表多条件筛选查询是一个常见且实用的功能。Bootstrap框架凭借其简洁的代码和丰富的组件，可以帮助我们轻松实现这一功能。本文将详细介绍如何使用Bootstrap来构建一个具有多条件筛选查询的列表界面。

一、准备工作

在开始之前，请确保您已经安装了Bootstrap框架。您可以从Bootstrap的官方网站（https://getbootstrap.com/）下载最新版本的Bootstrap，并将其包含到您的项目中。

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- 引入Bootstrap JS 和依赖的 Popper.js 和 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

二、创建基础列表

首先，我们需要创建一个基础列表。这里以一个简单的用户列表为例。

<div class="container mt-5">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
        <th scope="col">性别</th>
      </tr>
    </thead>
    <tbody>
      <!-- 列表数据 -->
    </tbody>
  </table>
</div>

三、添加筛选条件

接下来，我们需要添加筛选条件。这里我们使用Bootstrap的表单组件来实现。

<div class="container mt-3">
  <form class="row g-3">
    <div class="col-md-4">
      <label for="name" class="form-label">姓名</label>
      <input type="text" class="form-control" id="name" placeholder="请输入姓名">
    </div>
    <div class="col-md-4">
      <label for="age" class="form-label">年龄</label>
      <input type="number" class="form-control" id="age" placeholder="请输入年龄">
    </div>
    <div class="col-md-4">
      <label for="gender" class="form-label">性别</label>
      <select class="form-select" id="gender">
        <option value="">请选择性别</option>
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </div>
    <div class="col-12">
      <button type="button" class="btn btn-primary" id="search">搜索</button>
    </div>
  </form>
</div>

四、编写筛选逻辑

接下来，我们需要编写筛选逻辑。这里我们使用JavaScript来实现。

document.getElementById('search').addEventListener('click', function() {
  var name = document.getElementById('name').value;
  var age = document.getElementById('age').value;
  var gender = document.getElementById('gender').value;
  
  var tbody = document.querySelector('.table tbody');
  tbody.innerHTML = '';
  
  // 假设我们有一个包含所有用户数据的数组
  var users = [
    { name: '张三', age: 25, gender: 'male' },
    { name: '李四', age: 30, gender: 'female' },
    // ... 更多用户数据
  ];
  
  for (var i = 0; i < users.length; i++) {
    var user = users[i];
    if ((name ? user.name.includes(name) : true) &&
        (age ? user.age == age : true) &&
        (gender ? user.gender == gender : true)) {
      var tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${user.name}</td>
        <td>${user.age}</td>
        <td>${user.gender}</td>
      `;
      tbody.appendChild(tr);
    }
  }
});

五、总结

通过以上步骤，我们成功使用Bootstrap实现了一个具有多条件筛选查询的列表界面。在实际项目中，您可以根据需求对筛选条件进行扩展，例如添加时间、地址等筛选条件。希望本文对您有所帮助！

-- 展开阅读全文 --