在引导模式中显示隐藏

问题描述 投票：0回答：3
javascript ajax bootstrap-modal
3个回答
0
投票

只需从 Bootstrap 文档中复制一个 example modals 并将您的表格元素插入其中。您可能需要通过添加 

modal-xl
和 
modal-dialog-scrollable
类来自定义模式以显示大表格。或者，Bootstrap Accordion 可能比桌子更好用。

例子：

查看并运行代码以了解其工作原理。单击全页链接以获得更好的视图。

let table;
const show = (data) => {
  table.innerHTML = data
    .map(({
      id,
      name,
      email,
      gender,
      status
    }) => `<tr>
      <td> ${name}</td>
      <td> <button class="btn btn-light btn-sm" data-id="${id}">View</button></td>
      <td hidden id="email">${email}</td>
      <td hidden id="gender">${gender}</td>
      <td hidden id="status">${status}</td>
      </tr>`)
    .join("");
};
const load = () => {
  fetch("https://gorest.co.in/public/v2/users")
    .then(result => result.json())
    .then(show);
};

window.addEventListener("DOMContentLoaded", () => {
  
  table = document.getElementById('table');
  
  table.addEventListener("click", (e) => {
    const tgt = e.target.closest("button");
    if (!tgt) return;
    tgt.closest("tr").querySelectorAll("td").forEach(td => td.hidden = false);
  })
  load();
});
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal modal-xl modal-dialog-scrollable fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Users</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <!-- Add user table here -->

        <table id="table" class="table table-light table-striped table-sm">   
        </table>
        
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap 5 -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

0
投票

只需从 Bootstrap 文档中复制一个 example modals 并将您的表格元素插入其中。您可能需要通过添加 

modal-xl
和 
modal-dialog-scrollable
类来自定义模式以显示大表格。或者，Bootstrap Accordion 可能比桌子更好用。

例子：

查看并运行代码以了解其工作原理。单击全页链接以获得更好的视图。

let table;
const show = (data) => {
  table.innerHTML = data
    .map(({
      id,
      name,
      email,
      gender,
      status
    }) => `<tr>
      <td> ${name}</td>
      <td> <button class="btn btn-light btn-sm" data-id="${id}">View</button></td>
      <td hidden id="email">${email}</td>
      <td hidden id="gender">${gender}</td>
      <td hidden id="status">${status}</td>
      </tr>`)
    .join("");
};
const load = () => {
  fetch("https://gorest.co.in/public/v2/users")
    .then(result => result.json())
    .then(show);
};

window.addEventListener("DOMContentLoaded", () => {
  
  table = document.getElementById('table');
  
  table.addEventListener("click", (e) => {
    const tgt = e.target.closest("button");
    if (!tgt) return;
    tgt.closest("tr").querySelectorAll("td").forEach(td => td.hidden = false);
  })
  load();
});
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal modal-xl modal-dialog-scrollable fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Users</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <!-- Add user table here -->

        <table id="table" class="table table-light table-striped table-sm">   
        </table>
        
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap 5 -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

0
投票

未说明使用 Bootstrap 5 作为版本。很多示例代码引用自 Bootstrap 站点.

这里的方法是使用一个模态和交换数据，而不是每个记录一个模态。

将表格中的按钮替换为Bootstrap版本，但在数据属性中添加了一些记录数据。这样做是为了快速，但更好的选择是将数据放在一个对象中并通过 

data-id
.

引用它 
       <button type="button"
                class="btn btn-primary more"
                data-bs-toggle="modal"
                data-bs-target="#exampleModal"
                data-id="${id}"
                data-name="${name}"
                data-email="${email}"
                data-gender="${gender}"
                data-status="${status}">
          View More
        </button>

添加引导模式 html

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div id="modalDynamicContent" class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

最后添加 

show.bs.modal
事件侦听器，以便在单击任何 
View More
按钮打开模式时进行侦听。


const myModalEl = document.getElementById('exampleModal');
const myModalContent = document.getElementById('modalDynamicContent');

myModalEl.addEventListener('show.bs.modal', event => {
    // Button that triggered modal
    viewMoreButton = event.relatedTarget;
    
    // Get data
    id = viewMoreButton.dataset.id;
    email = viewMoreButton.dataset.email;
    gender = viewMoreButton.dataset.gender;
    status = viewMoreButton.dataset.status;

    myModalContent.innerHTML = `
          <p>
            Email: <span id="email">${email}</span>
          </p>
          <p>
            Gender: <span id="gender">${gender}</span>
          </p>
          <p>
            Status: <span id="status">${status}</span>
          </p>
    `
});


let table;
const show = (data) => {
  //console.table(data);
  table.innerHTML = data
    .map(({id,name,email, gender,status}) => `<tr>
      <td> ${name}</td>
      <td>
        <button type="button"
                class="btn btn-primary more"
                data-bs-toggle="modal"
                data-bs-target="#exampleModal"
                data-id="${id}"
                data-name="${name}"
                data-email="${email}"
                data-gender="${gender}"
                data-status="${status}">
          View More
        </button>
      </td>
      <td hidden id="email">${email}</td>
      <td hidden id="gender">${gender}</td>
      <td hidden id="status">${status}</td>
      </tr>`)
    .join("");
};

const load = () => {
  fetch("https://gorest.co.in/public/v2/users")
    .then(result => result.json())
    .then(show);
};
window.addEventListener("DOMContentLoaded", () => {
  table = document.getElementById('table');
  //table.addEventListener("click", (e) => {
    //const tgt = e.target.closest("button");
    //if (!tgt) return;
    //tgt.closest("tr").querySelectorAll("td").forEach(td => td.hidden = false);
  //})
  load();
});

const myModalEl = document.getElementById('exampleModal');
const myModalContent = document.getElementById('modalDynamicContent');

myModalEl.addEventListener('show.bs.modal', event => {
    // Button that triggered modal
    viewMoreButton = event.relatedTarget;

    // Get data
    id = viewMoreButton.dataset.id;
    email = viewMoreButton.dataset.email;
    gender = viewMoreButton.dataset.gender;
    status = viewMoreButton.dataset.status;

    myModalContent.innerHTML = `
          <p>
            Email: <span id="email">${email}</span>
          </p>
          <p>
            Gender: <span id="gender">${gender}</span>
          </p>
          <p>
            Status: <span id="status">${status}</span>
          </p>
    `
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
    

<table id='table'>
</table>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div id="modalDynamicContent" class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.