Bagaimana saya bisa menampilkan data menggunakan modal saat mengklik baris tabel menggunakan bootstrap?

Question

Saat melakukan operasi CRUD, saya telah melihat bahwa pemula selalu merasa kesulitan untuk melakukan operasi Edit dan Perbarui, alasan yang jelas adalah tidak dapat mengambil nilai baris tabel yang dipilih dan menampilkannya dalam bentuk yang diperbarui

Table of Contents Show

Bagaimana cara menampilkan data dalam modal Bootstrap?
Bagaimana cara menampilkan data dalam popup modal?
Bagaimana cara mendapatkan data dinamis dalam modal Bootstrap?
Bagaimana cara membuat baris yang dapat diklik di Bootstrap?

Hari ini, saya membagikan cuplikan JQuery yang sangat mudah yang akan membantu Anda seumur hidup apakah Anda bekerja dengan Tabel Html normal atau Tabel Data Jquery, Anda akan dapat dengan mudah menampilkan data baris yang dipilih pada Formulir dan nantinya Anda dapat dengan mudah

Langkah 1. Buat tabel dengan tombol Edit di setiap baris

Saya menggunakan Asp. Net MVC, Anda bebas menggunakan kerangka kerja apa pun, untuk ini saya membuat dua Metode Tindakan, satu metode akan mengembalikan tampilan yang memiliki detail Karyawan dalam tabel Html, dan metode kedua memperlihatkan data Karyawan. Modelnya sederhana dengan hanya tiga properti

Model


 namespace jquery.Models
 {
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Salary { get; set; }
    }
 }

Pengontrol


namespace jquery.Controllers
{
    public class TableController : Controller
    {
        //
        // GET: /Table/
        public ActionResult Index()
        {
            var emps = GetEmployee();
            return View(emps);
        }

        public List<Employee> GetEmployee()
        {
            List<Employee> emps = new List<Employee>()
            {
                new Employee(){Id=1,Name="Michael",Salary=2000},
                 new Employee(){Id=2,Name="John",Salary=3400},
                  new Employee(){Id=3,Name="Tina",Salary=45000},
                   new Employee(){Id=4,Name="Saleem",Salary=43000},
                   new Employee(){Id=5,Name="Smith",Salary=65000},
            };
            return emps;
        }

	}
 }

_

Melihat


@model IEnumerable<jquery.Models.Employee>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div>
        <table class="table table-bordered table-responsive" id="myTable">
            <thead class="bg-dark text-white">
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Salary</th>
                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.Name</td>
                        <td>@item.Salary</td>
                        <td><button class="btnEdit btn btn-primary">Edit</button></td>
                    </tr>
                }
            </tbody>

        </table>
    </div>
</body>
</html>

Langkah 2. Rancang Dialog Modal Bootstrap untuk Mengedit detail


 <div class="modal" tabindex="-1" role="dialog" id="EditModal">
        <form method="post" action="/Table/Update">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Details</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="txtName">Name</label>
                            <input type="text" class="form-control" id="txtName" placeholder="Enter name" name="Name">
                        </div>
                        <div class="form-group">
                            <label for="txtName">Salary</label>
                            <input type="number" class="form-control" id="txtSalary" placeholder="Enter salary" name="Salary">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

tabel HTML

Langkah 3. Isi kotak teks pada Edit Klik dan Buka munculan Modal


  <script>
        $(".btnEdit").click(function () {
            debugger;
            var currentTds = $(this).closest("tr").find("td"); // find all td of selected row
            var cell2 = $(currentTds).eq(1).text(); // eq= cell , text = inner text
            var cell3 = $(currentTds).eq(2).text();
            $("#txtName").val(cell2);
            $("#txtSalary").val(cell3);
            $("#EditModal").modal('show');
        });
    </script>

_

Pahami kode JQuery menggunakan diagram di bawah ini

Ambil nilai sel baris yang dipilih

Sekarang, jalankan aplikasi dan klik tombol Edit, popup modal yang bagus akan terbuka dengan data baris saat ini

Untuk memicu jendela modal, Anda perlu menggunakan tombol atau tautan. Kemudian sertakan dua atribut data-*. data-toggle="modal" membuka jendela modal . data-target="#myModal" menunjuk ke id modal .

Tampilkan data dinamis pada modal popup menggunakan php .

Langkah 1. - Sebelum menggunakan Bootstrap untuk membuat popup modal, library Bootstrap dan jQuery perlu disertakan terlebih dahulu. .

Langkah 2. - Buat tabel untuk menampilkan data. .

Langkah 3. - Membuat tabel pengguna di database. .

Langkah 4. - Buat koneksi ke database dalam file php

Muat Konten Dinamis dari Database di Bootstrap Modal . By clicking the Open Modal ( . openBtn ), konten dinamis dimuat dari file PHP lain ( getContent. php ) berdasarkan ID dan ditampilkan di popup modal ( #myModal ).

Bagaimana cara membuat baris yang dapat diklik di Bootstrap?

Anda dapat membuat baris dasar Bootstrap yang seluruhnya dapat diklik sebagai tautan memanfaatkan fungsi "onclick" JavaScript . Menyajikan tautan dalam baris adalah cara yang baik untuk mengatur bagian tautan Anda dan ide itu terlihat menyenangkan secara visual.

kode bootstrap