当我们想做一个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 条评论
与博主谈论人生经验?