显示详情

Posted 2020-10-22 navyyouth

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了显示详情相关的知识，希望对你有一定的参考价值。

当页面内容显示不全时点击详情可以查看详细内容

首先引入js包和bootstrap包

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../jquery-3.3.1.min.js"></script>
<script src="../bootstrap.min.js"></script>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

做样式用bootstrap

<body>

<table class="table table-striped">
  <caption>汽车信息表</caption>
  <thead>
    <tr>
      <th>汽车名称</th>
      <th>上市时间</th>
      <th>价格（万）</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    
    <?php
    require_once "../DBDA.class.php";
	$db = new DBDA();
	$sql = "select * from car";
	$arr = $db->query($sql);
	foreach($arr as $v){
		echo "<tr>
      <td>{$v[1]}</td>
      <td>{$v[3]}</td>
      <td>{$v[7]}</td>
      <td><button type=\'button\' class=\'btn btn-primary btn-xs xq\' code=\'{$v[0]}\'>查看详情</button></td>
    </tr>";
	}
    ?>
  </tbody>
</table>

<!-- 模态框（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">×</button>
                <h4 class="modal-title" id="myModalLabel">汽车详细信息</h4>
            </div>
            <div class="modal-body" id="neirong"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>    
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>





</body>

js代码

<script type="text/javascript">
$(".xq").click(function(){
	//取主键值
	var code = $(this).attr("code");
	//读数据
	$.ajax({
		url:"xiangqingchuli.php",
		data:{code:code},
		type:"POST",
		dataType:"JSON",
		success: function(data){
			//打开模态框
			$(\'#myModal\').modal(\'show\');
			
			//向模态框里面扔内容
			var str = "<div>汽车代号："+data[0].Code+"</div><div>汽车名称："+data[0].Name+"</div><div>系列代号："+data[0].Brand+"</div><div>上市时间："+data[0].Time+"</div><div>汽车油耗："+data[0].Oil+"</div><div>汽车功率："+data[0].Powers+"</div><div>汽车排量："+data[0].Exhaust+"</div><div>汽车价格："+data[0].Price+"</div>";//取json里面索引为0的小json数据
			$("#neirong").html(str);
			
		}
	});
})
</script>

处理页面

<?php
require_once "../DBDA.class.php";
$db = new DBDA();
$code = $_POST["code"];
$sql = "select * from car where code=\'{$code}\'";
echo $db->jsonquery($sql);//返回JSON数据

DADA封装的方法（添加返回json的方法）

<?php
class DBDA{
	public $host="localhost"; //服务器地址
	public $uid="root"; //用户名
	public $pwd="123"; //密码
	public $dbname="crud"; //数据库名称
	
	/*
		执行一条SQL语句的方法
		@param sql 要执行的SQL语句
		@param type SQL语句的类型，0代表查询 1代表增删改
		@return 如果是查询语句返回二维数组，如果是增删改返回true或false
	*/
	public function query($sql,$type=0){
		$db = new mysqli($this->host,$this->uid,$this->pwd,$this->dbname);
		$result = $db->query($sql);
		if($type){
			return $result;
		}else{
			return $result->fetch_all();
		}
	}
	public function strquery($sql,$type=0){
        　　$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        　　$result = $db->query($sql);
        　　if($type){
            　　return $result;
            }else{
                $arr = $result->fetch_all();
                $str = "";
                foreach($arr as $v){
                    $str .= implode("^",$v)."|";
                    }
                $str = substr($str,0,strlen($str)-1);
                return $str;
                }
        }
	//返回json数据的方法
	public function jsonquery($sql,$type=0){
		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
		$result = $db->query($sql);
		if($type){
			return $result;
		}else{
			$arr = $result->fetch_all(MYSQLI_ASSOC);//关联数组
			return json_encode($arr);//转换json
			//json_decode()分解json
		}
	}
}

以上是关于显示详情的主要内容，如果未能解决你的问题，请参考以下文章

VSCODE snippets的使用

详情显示及点赞实现《iVX低代码/无代码个人博客制作》

Sphinx、reStructuredText 显示/隐藏代码片段

执行代码时有时不显示对话框片段

如何在 Resharper IntelliSense 中显示所有 Visual Studio 代码片段？

CSS 显示代码片段：使用PRE标记包裹长行