Bootstrap表格对数据库批量操作

当我们想做一个PHP后端管理面板的时候，我们通常会想到使用Bootstrap框架的表格来查看某些数据库内容，并对数据进行操作
在这里我将会告诉你如何通过bootstrap的表格对MySQL数据库内容进行操作
(原理：bootstrap表格选中后对应行的类将会变为”selected”，并通过该类寻找出对应的id)

本来打算为10API的面板添加操作MySQL的功能，但是一直找不到解决方案而推迟。

上星期突发奇想，又开始捣鼓起了10API的面板。

首先，我生成表格的方式是MySQL数据表遍历然后输出

<?php
//查询对象
$sql = "SELECT * FROM WordAPI";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出每行数据
	while($row = $result->fetch_assoc()) {
	//单纯打印出数据内容
		echo('<tr id="' . $row["id"] . '" onclick = "selectRow(this);" >');
		//....
		echo("</tr>");
		//分这么多个echo输出是为了方便后续修改
		}
	} else {
}
?>

然后生成的效果就像这样：

然后只能浏览数据库内容。

于是我在后面增加多了一个按钮用于删除，PHP代码如下：

<?php 
//加入在遍历中
echo('<td><span class="ui-button" data-target="#myModal"><a onClick="delete_confirm" href="admin_edit.php?id='. $row["id"] .'" class="btn  btn-danger  glyphicon glyphicon-minus">删除</a>  </span></td>'); 
?>

原理是通过一个a标签转跳往 edit.php?id=? 这个地址

然后在这个php文件里添加数据库编辑的代码，然后再通过获取 $_GET[‘id’] 来获得需要删除的ID。

效果：

但是这样并不高效，于是衍生出下面的想法，通过选择表格的几行进行批量删除操作。

但是怎么获取选中的行对应在数据库里面的id呢？

在我F12大法的观察下，发现了bootstrap的表格在选中后，选中行的tr标签的类会变为 “selected”

于是便想到了使用js代码去遍历类为”selected”的标签，然后获取其ID值，存储在一个数组里，然后输出为 “id1,id2,id3,…”这样的格式，然后转跳往一个 edit.php?id=id1,id2,id3,…的地址以实现操作。

所以，贴上我们的js代码

<script>
		function GetID()
		{	
			var out="";
			$(".selected").each(function(i){
				out = out + this.id + ","
			})
			out = out.substr(0,out.length-1);//删去最后的 ","
			console.log(out);
			if(window.confirm('你确定要删除吗？')){  
				window.location.href="admin_edit.php?id=" + out;
              }else{
				out = "";
             }
		}
</script>

然后在做一个a标签，使其onclick=”GetID();”，如：

<a class="btn  btn-danger  glyphicon glyphicon-minus" onclick="GetID();">删除选中</a>

在这时候，我们的edit.php也应该要更改了。

在MySQL中，能够批量删除一些语句，其SQL命令为：

DELETE * FROM 数据库表 where id in (1,2,3,4,5,6)

于是我们的php就可以写成：

$sql = "DELETE FROM `WordAPI` WHERE `id` in (" . $_GET['id'] .")";

if ($conn->query($sql) === TRUE) {
    //echo "删除成功";
} else {
     //echo "删除失败";
}

那么，到这，大功告成。

效果：

最后，感谢点进来浏览啦~~

0 条评论

登录