从 JSON 数据源加载到列表：Bootstrap 模态窗口的强大功能

2024-03-24 16:21:21

使用 Bootstrap 模态窗口加载 JSON 数据到列表中

在构建现代化的 Web 应用程序时，处理和显示复杂数据至关重要。Bootstrap 模态窗口是一个强大且灵活的组件，可以用来展示额外的信息，而不会使页面混乱。本文将深入探讨如何利用 Bootstrap 模态窗口从 JSON 数据源加载信息到列表中。

准备工作

在开始之前，我们需要以下组件：

HTML 文档： 包含一个用于显示列表的 <ul> 元素和一个用于触发模态窗口的 <a> 元素。
Bootstrap 库： 包括 CSS、JavaScript 和字体文件。
JSON 数据文件： 存储有关列表项的信息。

创建列表

第一步是使用 JavaScript 创建列表并加载 JSON 数据：

加载 JSON 数据文件。
遍历数据，为每个项目创建一个列表项。
为每个列表项添加点击事件处理程序。
将列表项添加到列表中。

加载数据到模态窗口

当用户点击列表项时，我们希望模态窗口显示该项的数据：

将数据绑定到模态窗口中的元素。
显示模态窗口。

代码示例

$(document).ready(function() {
  // 加载 JSON 数据
  $.getJSON('data.json', function(data) {
    // 遍历 JSON 数据
    $.each(data, function(index, person) {
      // 创建列表项
      var li = $('<li class="project span3" data-type="pfa"></li>');

      // 为列表项添加点击事件处理程序
      li.click(function() {
        // 将数据绑定到模态窗口
        $('#myModal .modal-title').text(person.first_name + ' ' + person.last_name);
        $('#myModal .name').text(person.first_name + ' ' + person.last_name);
        $('#myModal .age').text(person.age);
        $('#myModal .race').text(person.race);
        $('#myModal .state').text(person.state);

        // 显示模态窗口
        $('#myModal').modal('show');
      });

      // 添加列表项到列表中
      $('#list').append(li);
    });
  });
});