運(yùn)用bootstrap,jquery和ajax顯示一些數(shù)據(jù),附加刪除功能并且點(diǎn)擊能彈出模態(tài)框詳情功能
主頁(yè)面main.php
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>無(wú)標(biāo)題文檔/title>
link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件
script src="../FENGZHUANG/jquery-3.1.1.min.js">/script> //先引入jquery的js文件
script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js">/script> //再引入其它的js文件
style type="text/css">
.xq{ margin-left:30px}
/style>
/head>
body>
div class="page-header">
h1>顯示數(shù)據(jù)
/h1>
/div>
table class="table table-hover">
thead>
tr>
th width="30%">代號(hào)/th>
th width="30%">名稱(chēng)/th>
th width="40%">操作/th>
/tr>
/thead>
tbody id="tb">
//用js向其中添加內(nèi)容
/tbody>
/table>
!-- 模態(tài)框(Modal) -->
div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
div class="modal-dialog">
div class="modal-content">
div class="modal-header">
button type="button" class="close" data-dismiss="modal" aria-hidden="true">times;/button>
h4 class="modal-title" id="myModalLabel">詳細(xì)信息/h4>
/div>
div class="modal-body" id="nr">
/div>
div class="modal-footer">
button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉/button>
/div>
/div>!-- /.modal-content -->
/div>!-- /.modal -->
/div>
/body>
script type="text/javascript">
//加載數(shù)據(jù)
Load();
//加載數(shù)據(jù)的方法
function Load()
{
$.ajax({
url:"jiazai.php",
dataType:"TEXT",
success: function(data){
var str = "";
var hang = data.split("|"); //根據(jù)字符串中的|分解
for(var i=0;ihang.length;i++)
{
var lie = hang[i].split("^"); //根據(jù)字符串中的^分解
str = str+"tr>td>"+lie[0]+"/td>td>"+lie[1]+"/td>td>button type='button' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>刪除/button>button type='button' class='btn btn-primary btn-sm xq' code='"+lie[0]+"'>查看/button>/td>/tr>";
}
$("#tb").html(str); //向tbody中輸出內(nèi)容
addshanchu();
addxiangqing();
}
});
}
//給刪除按鈕加事件的方法
function addshanchu()
{
//刪除事件
$(".sc").click(function(){
var code = $(this).attr("code"); //獲取刪除按鈕所在的數(shù)據(jù)的code
$.ajax({
url:"shanchu.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success: function(d){
if(d.trim()=="OK")
{
alert("刪除成功");
Load(); //刪除完需要加載數(shù)據(jù)
}
else
{
alert("刪除失敗");
}
}
});
})
}
//給查看詳情加事件的方法
function addxiangqing()
{
$(".xq").click(function(){
//顯示模態(tài)框
$('#myModal').modal('show');
//在模態(tài)框里面顯示內(nèi)容
var code = $(this).attr("code"); //獲取哪一條數(shù)據(jù)
$.ajax({
url:"xiangqing.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success:function(data){
var lie = data.split("^");
var str = "div>民族代號(hào):"+lie[0]+"/div>div>民族名稱(chēng):"+lie[1]+"/div>";
$("#nr").html(str);
}
});
})
}
/script>
/html>
加載數(shù)據(jù)的頁(yè)面jiazai.php
?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation order by code ASC";
$arr = $db->Query($sql);
// 下面實(shí)現(xiàn)的字符串是類(lèi)似這樣的n001^漢族|n002^回族|n003^苗族
$str = "";返回主頁(yè)面的數(shù)據(jù)是TEXT型,得轉(zhuǎn)換一下
foreach($arr as $v)
{
$str = $str.implode("^",$v)."|"; //拼接字符串
}
$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。
echo $str;
刪除處理頁(yè)面shanchu.php
?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "delete from nation where code='{$code}'";
if($db->Query($sql,0))
{
echo "OK";
}
else
{
echo "NO";
}
查看詳情頁(yè)面xiangqing.php
?php
$code = $_POST["code"];
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation where code='{$code}'";
echo $db->StrQuery($sql);
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
您可能感興趣的文章:- jQuery+css3實(shí)現(xiàn)Ajax點(diǎn)擊后動(dòng)態(tài)刪除功能的方法
- ajax php實(shí)現(xiàn)給fckeditor文本編輯器增加圖片刪除功能
- 基于php(Thinkphp)+jquery 實(shí)現(xiàn)ajax多選反選不選刪除數(shù)據(jù)功能
- Ajax bootstrap美化網(wǎng)頁(yè)并實(shí)現(xiàn)頁(yè)面的加載刪除與查看詳情
- JQuery DataTable刪除行后的頁(yè)面更新利用Ajax解決
- Ajax添加數(shù)據(jù)與刪除篇實(shí)現(xiàn)代碼
- jQuery之a(chǎn)jax刪除詳解
- jquery ajax實(shí)現(xiàn)批量刪除具體思路及代碼
- PHP+ajax 無(wú)刷新刪除數(shù)據(jù)
- Ajax方式刪除表格一行數(shù)據(jù)示例代碼