Xem chỉnh sửa và xóa bằng cách sử dụng phương thức trong PHP MySQL

Hướng dẫn này sẽ giải thích về Bootstrap Datatable với Thêm, chỉnh sửa và xóa bản ghi. Ở đây chúng tôi sẽ giải thích hoạt động của Mysql CRUD trong Bootstrap Datatable. Hành động Thêm, chỉnh sửa và xóa này xảy ra khi sử dụng AJAX. Ở đây chúng ta sẽ sử dụng một Bootstrap Modal Popup đơn giản để tạo biểu mẫu thêm và chỉnh sửa

(Cũng đọc. Bootstrap DataTable Sử dụng PHP, Mysql, Ajax, Json với tập lệnh phía máy chủ)

CHÚNG TA LÀM GÌ HÔM NAY ĐÂY

Vài tháng trước, chúng tôi đã xuất bản một bài báo về Bootstrap với php, mysql server side script. Dựa trên bài viết trước về Bootstrap datatable, chúng ta sẽ tạo một datatable đơn giản với các tùy chọn thêm, chỉnh sửa và xóa. Bảng sẽ được sửa đổi bởi jQuery thông qua AJaX và PHP với MySQL trên phần phụ trợ. Chúng tôi sử dụng mã từ bài báo trước và thay đổi

Giải trình

MỞ RỘNG HTML & JAVASCRIPT & PHP

Trước hết, chúng tôi cần 2 cửa sổ phương thức mới để thêm mục mới và chỉnh sửa các mục hiện có

Để Thêm và chỉnh sửa, chúng tôi sử dụng Bootstrap Popup Modal bên dưới

×
Edit selected row




Firstname





E-mail





Mobile






Close
Save changes













×
Add new row




Firstname





E-mail





Mobile






Close
Save changes

Sau đó, đặt một nút thêm vào góc trên bên phải, nút này sẽ mở cửa sổ thêm phương thức. Biểu mẫu nhập mới sẽ lưu dữ liệu qua jQuery và sau đó thêm hàng mới vào bảng. Sau đó, chúng ta cần viết một số PHP

Bước tiếp theo là chỉnh sửa các hàng hiện tại. Chúng tôi đã đặt một nút chỉnh sửa ở cuối mỗi hàng. Khi người dùng nhấp vào nút này, editRow(id) sẽ được gọi

function editRow(id) {
if ( 'undefined' != typeof id ) {
$.getJSON('datatable.php?edit=' + id, function(obj) {
$('#edit-id').val(obj.id);
$('#firstname').val(obj.name);
$('#email').val(obj.email);
$('#mobile').val(obj.mobile);
$('#edit-modal').modal('show')
}).fail(function() { alert('Unable to fetch data, please try again later.') });
} else alert('Unknown row id.');
}

Chức năng này cũng cần một số tập lệnh PHP ở phía máy chủ, như sau

Bây giờ chúng ta có thể thêm các mục mới và chỉnh sửa các mục hiện có. Nhưng nếu chúng ta cần xóa một mục nhập thì sao? . tạo một chức năng loại bỏ. Bên cạnh các nút chỉnh sửa, hãy tạo một nút xóa sẽ gọi hàm removeRow(id)

function removeRow(id) {
if ( 'undefined' != typeof id ) {
$.get('datatable.php?remove=' + id, function() {
$('a[data-id="row-' + id + '"]').parent().parent().remove();
}).fail(function() { alert('Unable to fetch data, please try again later.') });
} else alert('Unknown row id.');
}

Và như bạn đoán, chúng tôi cũng cần một số tập lệnh phía máy chủ

BẢN TÓM TẮT

Vì vậy, chúng tôi tiếp tục bài viết trước và mở rộng nó. Bây giờ chúng tôi có thể tạo các mục mới, chỉnh sửa các mục hiện có hoặc xóa chúng. Các chức năng này được xử lý thông qua AJaX, vì vậy bạn không phải tải lại trang web mỗi khi gửi biểu mẫu

Bootgrid là một plugin lưới jQuery mạnh mẽ giúp chuyển đổi một bảng HTML đơn giản thành một lưới với các tính năng mạnh mẽ như sắp xếp, phân trang, tìm kiếm, thêm bản ghi, chỉnh sửa bản ghi và chức năng xóa bản ghi. Sử dụng PHP, MySQL và ajax

Chúng tôi sẽ đi qua các tính năng được liệt kê dưới đây. Tôi đã tìm kiếm rất nhiều nhưng không thể tìm thấy bất kỳ ví dụ nào có các đặc điểm sau

• Liệt kê Bootgrid Sử dụng Ajax
• Danh sách Bootgrid với phía máy chủ tìm kiếm bằng Ajax
• Kích hoạt phân trang ajax
• Bật sắp xếp
• Kích hoạt nút Command với chức năng quan trọng
• Bật phân trang động phía máy chủ
• Thêm bản ghi bằng bootstrap ModalBox và ajax
• Chỉnh sửa bản ghi bằng bootstrap ModalBox và ajax
• Xóa bản ghi bằng cách sử dụng bootstrap ModalBox và ajax

Trong bootgrid, bạn có thể liên kết dữ liệu theo hai cách. phía máy chủ (thông qua dịch vụ REST) ​​để truy vấn nguồn dữ liệu động như cơ sở dữ liệu hoặc phía máy khách (thông qua dữ liệu trong bộ nhớ đơn giản)

jQuery và Bootstrap là các thư viện phụ thuộc của Bootgrid. Chúng ta sẽ tìm hiểu cách sử dụng PHP, MySQL và ajax để thêm, chỉnh sửa và xóa các bản ghi trong bootgrid

Thêm, chỉnh sửa và xóa bản ghi bằng Bootgrid, PHP và MySQL

Tôi đang sử dụng các tệp và thư mục sau

• thư mục dist. Thư mục này sẽ chứa tất cả các lib css và js của jquery, bootstrap và bootgrid
• thư mục phông chữ. Thư mục này sẽ chứa tất cả các tệp liên quan đến phông chữ
• mục lục. php. Tệp này sẽ được sử dụng để tạo bố cục HTML và xử lý phản hồi ajax
• sự liên quan. php. Tập tin này sẽ sử dụng để tạo kết nối cơ sở dữ liệu
• phản ứng. php. Tệp này sẽ sử dụng để xử lý tất cả các chức năng phía máy chủ. Tôi sẽ tạo thêm, chỉnh sửa, xóa các phương thức hành động và trả lại phản hồi json cho phương thức ajax

Liên kết được Tài trợ

Ngoài ra, hãy xem các hướng dẫn khác về lưới,

• Ví dụ đơn giản Bootgrid (Phía máy chủ) với PHP, MySQL và Ajax
• Cách thêm, chỉnh sửa và xóa một hàng trong jQuery Flexigrid bằng PHP và MySQL
• Phân trang, sắp xếp và tìm kiếm dữ liệu – Phía máy chủ (PHP/MySQl) bằng Ajax

Cách thêm danh sách trong Bootgrid

Bước 1. Đã tạo tệp kết nối để xử lý kết nối cơ sở dữ liệu và trả về đối tượng kết nối cơ sở dữ liệu

Liên kết được tài trợ

servername, $this->username, $this->password, $this->dbname) or die("Connection failed: " . mysqli_connect_error());

		/* check connection */
		if (mysqli_connect_errno()) {
			printf("Connect failed: %s\n", mysqli_connect_error());
			exit();
		} else {
			$this->conn = $con;
		}
		return $this->conn;
	}
}

?>

Ở đâu

1. tên máy chủ $. Biến này chứa tên máy chủ db MySQL của bạn
2. $tên người dùng. Đây là tên người dùng cơ sở dữ liệu MySQL
3. $mật khẩu. Đây là mật khẩu cơ sở dữ liệu MySQL
4. $dbname. Đây là tên cơ sở dữ liệu MySQL

Bước 2. Bao gồm tất cả các tệp

9 và

 Record




Empid
Name
Salary
Age
Commands

0 vào tiêu đề của tệp

 Record




Empid
Name
Salary
Age
Commands

1

Bước 3. Đã tạo một bảng HTML để hiển thị dữ liệu danh sách vào tệp

 Record




Empid
Name
Salary
Age
Commands

1

________số 8

Ở đây, chúng tôi đã thêm một nút

 Record




Empid
Name
Salary
Age
Commands

3 sẽ được sử dụng để tạo một bản ghi mới và một bảng để liệt kê các bản ghi

Bước 4. Đã áp dụng phương thức khởi tạo Bootgrid trên bảng HTML. Phương thức Bootgrid biến một bảng HTML thành một danh sách dạng lưới đẹp mắt

Liên kết được tài trợ

4

Tôi đã thêm mã jquery ở trên vào cuối tệp

 Record




Empid
Name
Salary
Age
Commands

1

Bước 5. Hãy thêm phương thức xử lý hành động vào tệp

 Record




Empid
Name
Salary
Age
Commands

5

7

Cách thêm bản ghi chèn vào Bootgrid

Bước 1. Trong tệp

 Record




Empid
Name
Salary
Age
Commands

1, tôi đã thêm hộp Bootstrap add modal để thêm bản ghi

9

Bước 2. Để mở hộp thêm phương thức, tôi đã thêm phương thức gọi lại vào nút

 Record




Empid
Name
Salary
Age
Commands

7

function editRow(id) {
if ( 'undefined' != typeof id ) {
$.getJSON('datatable.php?edit=' + id, function(obj) {
$('#edit-id').val(obj.id);
$('#firstname').val(obj.name);
$('#email').val(obj.email);
$('#mobile').val(obj.mobile);
$('#edit-modal').modal('show')
}).fail(function() { alert('Unable to fetch data, please try again later.') });
} else alert('Unknown row id.');
}

1

Bước 3. Đã thêm sự kiện nút gửi để thêm giá trị đầu vào theo phương thức

function editRow(id) {
if ( 'undefined' != typeof id ) {
$.getJSON('datatable.php?edit=' + id, function(obj) {
$('#edit-id').val(obj.id);
$('#firstname').val(obj.name);
$('#email').val(obj.email);
$('#mobile').val(obj.mobile);
$('#edit-modal').modal('show')
}).fail(function() { alert('Unable to fetch data, please try again later.') });
} else alert('Unknown row id.');
}

2

Bước 4. Đã thêm phương thức

 Record




Empid
Name
Salary
Age
Commands

8, sẽ gửi yêu cầu ajax đến máy chủ. Sử dụng công nghệ ajax, chúng tôi sẽ gửi dữ liệu json đến máy chủ

function editRow(id) {
if ( 'undefined' != typeof id ) {
$.getJSON('datatable.php?edit=' + id, function(obj) {
$('#edit-id').val(obj.id);
$('#firstname').val(obj.name);
$('#email').val(obj.email);
$('#mobile').val(obj.mobile);
$('#edit-modal').modal('show')
}).fail(function() { alert('Unable to fetch data, please try again later.') });
} else alert('Unknown row id.');
}

4

Bước 5. Đã thêm tùy chọn chuyển đổi trong tệp

 Record




Empid
Name
Salary
Age
Commands

5

function editRow(id) {
if ( 'undefined' != typeof id ) {
$.getJSON('datatable.php?edit=' + id, function(obj) {
$('#edit-id').val(obj.id);
$('#firstname').val(obj.name);
$('#email').val(obj.email);
$('#mobile').val(obj.mobile);
$('#edit-modal').modal('show')
}).fail(function() { alert('Unable to fetch data, please try again later.') });
} else alert('Unknown row id.');
}

6

Bước 6. Trong tệp

 Record




Empid
Name
Salary
Age
Commands

5, một phương thức hành động thêm đã được thêm vào sẽ chèn một bản ghi vào cơ sở dữ liệu MySQL và gửi trạng thái

0

Cách thêm Chỉnh sửa bản ghi trong Bootgrid

Bước 1. Đã thêm hộp phương thức chỉnh sửa Bootstrap vào tệp

 Record




Empid
Name
Salary
Age
Commands

1 để cập nhật bản ghi

1

Bước 2. Đã thêm phương thức gọi lại trong sự kiện của Bootgrid contsructor,

2

Chúng tôi đang thu thập tất cả dữ liệu từ hàng được nhấp mà bạn muốn chỉnh sửa và hiển thị trong hộp phương thức

Bước 3. Để chỉnh sửa các giá trị đầu vào theo phương thức, một sự kiện nhấp vào nút gửi đã được thêm vào

3

Bước 4. Đã thêm tùy chọn chuyển đổi trong tệp

 Record




Empid
Name
Salary
Age
Commands

5

4

Bước 5. Trong tệp

 Record




Empid
Name
Salary
Age
Commands

5, một phương thức hành động bổ sung đã được thêm vào sẽ cập nhật bản ghi trong cơ sở dữ liệu MySQL và gửi trạng thái

Liên kết được tài trợ

5

Cách thêm Xóa bản ghi trong Bootgrid

Trước tiên, bạn phải chọn một hàng trong Bootgrid, sau đó nhấp vào biểu tượng nút xóa bản ghi. Mỗi hàng trong Bootgrid có biểu tượng chỉnh sửa và xóa hàng cũng như hành động bị ràng buộc

Bước 1. Đã thêm xóa phương thức gọi lại trong hàm khởi tạo bootgrid,

6

Bước 2. Đã thêm tùy chọn chuyển đổi trong tệp

 Record




Empid
Name
Salary
Age
Commands

5

7

Bước 3. Trong tệp

 Record




Empid
Name
Salary
Age
Commands

5, một phương thức hành động thêm đã được thêm vào sẽ xóa một bản ghi khỏi cơ sở dữ liệu MySQL và gửi trạng thái

8

Bạn có thể tải xuống mã nguồn và Bản demo từ liên kết bên dưới

Bản thử trực tiếp

Tải xuống mã nguồn

Cách sử dụng mã nguồn đã tải xuống

Sự kết luận

Trong hướng dẫn trước, chúng ta đã tìm hiểu danh sách bootgrid với PHP, MySQL và AJAX. Hướng dẫn này giúp thêm chức năng crud với bootgrid bằng cách sử dụng ajax. Tôi đã trình bày về cách thêm, chỉnh sửa và xóa hàng bằng cách sử dụng php, mysql và ajax

Cách chỉnh sửa và xóa bản ghi khỏi cơ sở dữ liệu trong PHP?

Làm cách nào để cập nhật dữ liệu bằng Modal trong PHP?

Làm cách nào tôi có thể chuyển đổi phương thức trong PHP?

Cách lấy dữ liệu từ cơ sở dữ liệu theo phương thức trong PHP?