bootstrap学习笔记（2）--json数据处理（图书列表）

最新推荐文章于 2023-06-18 10:40:21 发布
最新推荐文章于 2023-06-18 10:40:21 发布
阅读量1.8k 收藏 3
点赞数 1
分类专栏： bootstrap 文章标签： json bootstrap 折叠面板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011662320/article/details/61618273
版权

json数据，采用折叠面板展示书单。

1.html代码：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<!-- 父路径 -->
		<!-- <base href="/demo/"> -->
		<!-- 页面编码 -->
		<meta charset="UTF-8">
		<!-- 响应式布局 -->
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<!-- Bootstrap样式文件 -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
		<!-- 自定义样式文件 -->
		<link rel="stylesheet" href="styles/site.css">
		<!-- Jquery脚本文件 -->
		<script src="scripts/jquery.min.js"></script>
		<!-- Bootstrap脚本插件文件 -->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<!-- 标签名称 -->
		<title>component</title>
	</head>
	<body class="container">
		<header class="page-header">
			<h1 class="text-capitalize">skiff</h1>
		</header>

		<div>

			<div class="row">
				<div class="col-sm-3">
					<!-- 折叠面板 -->
					<div class="panel-group" id="accordion">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#comp"> 计算机类 </a></h4>
							</div>
							<div id="comp" class="panel-collapse collapse in">
								<div>

								</div>
							</div>
						</div>
						<div class="panel panel-info">
							<div class="panel-heading">
								<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#cult"> 文学类 </a></h4>
							</div>
							<div id="cult" class="panel-collapse collapse">
								<div>

								</div>
							</div>
						</div>
						<div class="panel panel-success">
							<div class="panel-heading">
								<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#chrd"> 儿童类 </a></h4>
							</div>
							<div id="chrd" class="panel-collapse collapse">
								<div>

								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-9">
					<div class="panel panel-info">
						<div class="panel-heading">

						</div>
						<div class="panel-body">
							<blockquote>
								<h2><span id="title"></span></h2>
								<footer>
									作者：<span id="author"></span>
								</footer>
							</blockquote>
							<div class="row">
								<div class="col-sm-6">
									<img id="img" alt="" class="img-responsive img-rounded">
								</div>
								<div class="col-sm-6">
									<p class="lead">
										价格：
										<span class="glyphicon glyphicon-usd"></span>
										<span id="price"></span>
									</p>
									<p class="lead">
										出版日期：
										<code>
											<span id="pubdate"></span>
										</code>
									</p>
									<p class="lead">
										类别：
										<span id="category"></span>
									</p>
									<p class="text-right">
										<button type="button" class="btn btn-primary btn-block btn-lg">
											<span class="glyphicon glyphicon-shopping-cart"></span>
											Add to cart
										</button>
									</p>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			<script>
				var comps = new Array();
				var cults = new Array();
				var chrds = new Array();//儿童类
				var a = 0;
				var b = 0;
				var c = 0;
				function showBookInfo(book) {
					$("#title").html(book.Title);
					$("#author").html(book.Author);
					$("#price").html(book.Price);
					$("#pubdate").html(book.PubDate);
					$("#category").html(book.Category.Name);
					$("#img").attr("src", "images/Koala.jpg");
				}

				$(function() {
					$.getJSON("json/books.json", null, function(data) {

						$(data).each(function(index, book) {
							if (book.Category.Id == 1) {
								comps[a++] = book;
							}
							if (book.Category.Id == 2) {
								cults[b++] = book;
							}
							if (book.Category.Id == 3) {
								chrds[c++] = book;
							}
						});
						
						$(comps).each(function(index, book) {
							$("#comp").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() {
								var b = $(this).data("b");
								showBookInfo(b);
							})));
						});
						$(cults).each(function(index, book) {
							$("#cult").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() {
								var b = $(this).data("b");
								showBookInfo(b);
							})));
						});
						$(chrds).each(function(index, book) {
							$("#chrd").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() {
								var b = $(this).data("b");
								showBookInfo(b);
							})));
						});
						$("a[href='#comp']").append($("<span>").addClass("badge pull-right").html(comps.length));
						$("a[href='#cult']").append($("<span>").addClass("badge pull-right").html(cults.length));
						$("a[href='#chrd']").append($("<span>").addClass("badge pull-right").html(chrds.length));
					});
				});
			</script>

		</div>

		<footer class="navbar-fixed-bottom text-center">
			&copy; 2015 <span class="glyphicon glyphicon-copyright-mark"></span>
		</footer>
	</body>
</html>

2.json数据： 

[
    {
        "Id": 1,
        "Title": "JAVA LOGIC",
        "Author": "Oracle",
        "Price": 10.99,
        "PubDate": "2010-01-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 2,
        "Title": "HTML",
        "Author": "W3C",
        "Price": 20.99,
        "PubDate": "2010-02-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 3,
        "Title": "SQL BASIC",
        "Author": "Microsoft",
        "Price": 30.99,
        "PubDate": "2010-03-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 4,
        "Title": "C# LOGIC",
        "Author": "Microsoft",
        "Price": 40.99,
        "PubDate": "2010-04-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 5,
        "Title": "JAVA OOP",
        "Author": "Oracle",
        "Price": 50.99,
        "PubDate": "2010-05-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 6,
        "Title": "JAVASCRIPT",
        "Author": "W3C",
        "Price": 10.99,
        "PubDate": "2010-01-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 7,
        "Title": "JSP",
        "Author": "Oracle",
        "Price": 20.99,
        "PubDate": "2010-02-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 8,
        "Title": "SQL ADVANCE",
        "Author": "Microsoft",
        "Price": 30.99,
        "PubDate": "2010-03-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 9,
        "Title": "C# OOP",
        "Author": "Microsoft",
        "Price": 40.99,
        "PubDate": "2010-04-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 10,
        "Title": "NTIER",
        "Author": "Microsoft",
        "Price": 50.99,
        "PubDate": "2010-05-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 11,
        "Title": "ASP.NET",
        "Author": "Microsoft",
        "Price": 10.99,
        "PubDate": "2010-01-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 12,
        "Title": "AJAX",
        "Author": "Microsoft",
        "Price": 20.99,
        "PubDate": "2010-02-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 13,
        "Title": "HIBERNATE",
        "Author": "Oracle",
        "Price": 30.99,
        "PubDate": "2010-03-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 14,
        "Title": "STRUTS",
        "Author": "Oracle",
        "Price": 40.99,
        "PubDate": "2010-04-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 15,
        "Title": "SPRING",
        "Author": "Oracle",
        "Price": 50.99,
        "PubDate": "2010-05-01",
        "Category": {
            "Id": 1,
            "Name": "计算机类"
        }
    },
    {
        "Id": 16,
        "Title": "西游记",
        "Author": "吴承恩",
        "Price": 10.99,
        "PubDate": "2010-01-01",
        "Category": {
            "Id": 2,
            "Name": "文学类"
        }
    },
    {
        "Id": 17,
        "Title": "三国演义",
        "Author": "罗贯中",
        "Price": 20.99,
        "PubDate": "2010-02-01",
        "Category": {
            "Id": 2,
            "Name": "文学类"
        }
    },
    {
        "Id": 18,
        "Title": "水浒传",
        "Author": "施耐庵",
        "Price": 30.99,
        "PubDate": "2010-03-01",
        "Category": {
            "Id": 2,
            "Name": "文学类"
        }
    },
    {
        "Id": 19,
        "Title": "红楼梦",
        "Author": "曹雪芹",
        "Price": 40.99,
        "PubDate": "2010-04-01",
        "Category": {
            "Id": 2,
            "Name": "文学类"
        }
    },
    {
        "Id": 20,
        "Title": "傲慢与偏见",
        "Author": "简奥斯汀",
        "Price": 10.99,
        "PubDate": "2010-01-01",
        "Category": {
            "Id": 2,
            "Name": "文学类"
        }
    },
    {
        "Id": 21,
        "Title": "呼啸山庄",
        "Author": "艾米莉勃朗特",
        "Price": 20.99,
        "PubDate": "2010-02-01",
        "Category": {
            "Id": 2,
            "Name": "文学类"
        }
    },
    {
        "Id": 22,
        "Title": "战争与和平",
        "Author": "列夫托尔斯泰",
        "Price": 30.99,
        "PubDate": "2010-03-01",
        "Category": {
            "Id": 2,
            "Name": "文学类"
        }
    },
    {
        "Id": 23,
        "Title": "红与黑",
        "Author": "司汤达",
        "Price": 40.99,
        "PubDate": "2010-04-01",
        "Category": {
            "Id": 2,
            "Name": "文学类"
        }
    },
    {
        "Id": 24,
        "Title": "灰姑娘",
        "Author": "格林",
        "Price": 10.99,
        "PubDate": "2010-01-01",
        "Category": {
            "Id": 3,
            "Name": "儿童类"
        }
    },
    {
        "Id": 25,
        "Title": "卖火柴的小女孩",
        "Author": "格林",
        "Price": 20.99,
        "PubDate": "2010-02-01",
        "Category": {
            "Id": 3,
            "Name": "儿童类"
        }
    },
    {
        "Id": 26,
        "Title": "白雪公主",
        "Author": "格林",
        "Price": 30.99,
        "PubDate": "2010-03-01",
        "Category": {
            "Id": 3,
            "Name": "儿童类"
        }
    },
    {
        "Id": 27,
        "Title": "睡美人",
        "Author": "格林",
        "Price": 40.99,
        "PubDate": "2010-04-01",
        "Category": {
            "Id": 3,
            "Name": "儿童类"
        }
    },
    {
        "Id": 28,
        "Title": "小红帽",
        "Author": "安徒生",
        "Price": 10.99,
        "PubDate": "2010-05-01",
        "Category": {
            "Id": 3,
            "Name": "儿童类"
        }
    },
    {
        "Id": 29,
        "Title": "拇指姑娘",
        "Author": "安徒生",
        "Price": 20.99,
        "PubDate": "2010-06-01",
        "Category": {
            "Id": 3,
            "Name": "儿童类"
        }
    },
    {
        "Id": 30,
        "Title": "青蛙王子",
        "Author": "安徒生",
        "Price": 30.99,
        "PubDate": "2010-07-01",
        "Category": {
            "Id": 3,
            "Name": "儿童类"
        }
    },
    {
        "Id": 31,
        "Title": "海的女儿",
        "Author": "安徒生",
        "Price": 40.99,
        "PubDate": "2010-08-01",
        "Category": {
            "Id": 3,
            "Name": "儿童类"
        }
    }
]

3.效果图：


无悔_一叶扁舟
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
json获取数据库的信息在前端页面显示方法
10-18
今天小编就为大家分享一篇json获取数据库的信息在前端页面显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
json数据在Html页面格式化显示
11-01
json数据在Html页面，采用光标事件格式化展示，方便用户查看对比接口文档
startbootstrap-sb-admin-2-master
09-26
大名鼎鼎的 sb 模板，这个我就不做太多的介绍了，用上就知道了。 demo：https://blackrockdigital.github.io/startbootstrap-sb-admin/
bootstrap-table动态加载json数据并且支持分页
03-16
bootstrap-table动态加载json数据并且支持分页。摘要必须大于50个字节！
bootstrap学习笔记-html5
12-22
bootstrap学习笔记-html5 各类简单案例，适合初学者
图书信息（展示图书的详细信息）
最新发布
m0_63647278的博客
06-18 223
var jsonArray = [{'booksrc':'images/简爱.png','bookId':'b001','bookName':'简爱','publish':'万卷出版公司','price':'32.00元'},{'booksrc':'images/老人与海.png','bookId':'b002','bookName':'老人与海','publish':'万卷出版公司','price':'3.00元'},
Django案例：显示图书信息
zxd4088的博客
06-07 328
显示图书信息
C#中使用Newtonsoft.Json(Json.NET)的创建Json文件和解析
CoffeMilk的博客
05-27 1万+
一、添加引用 using Newtonsoft.Json; 二、调用代码： //获取图书列表 List<BookInfo> bookList = GetBookList(); //将图书列表转换成Json string bookListJson = JsonConvert.SerializeObject(bookList); //将Json转换回图书列表...
Bootstrap展开收缩显示表格json格式数据.zip
05-23
Bootstrap展开收缩显示表格json格式数据基于Bootstrap3.3.5制作，自适应分辨率，JS函数调用json，动态获取表格数据，双击表格行可折叠关闭表格数据显示。
bootstrap treeview 无限子级菜单展示与JSON处理 完整
cm777的博客
07-20 7754
这几天上网找了bootstrap treeview例子 但是看别人写的/贴的代码都是模棱两可思路也说的让人摸不着头脑 只言片语 索性自己写一个 在此整理一下希望可以帮助一些需要使用bootstrap treeview但又不太会处理的同学 也帮助自己更好的记忆 架构用的maven + spring + spring MVC + mybatis 这里不展现架构 只展现部分重要内容 下面展...
bootstrap-table-fixed-columns-master.zip
05-13
bootstrap-table样式固定列js插件，在网上看到下载资源比较少，免费提供给大家下载使用，方便开发进度。
Angular2中Bootstrap界面库ng-bootstrap详解
01-19
准备 Angular 2 环境 ng-bootstrap 是基于 Angular 2 的， 因此需要先准备 Angular 2 的环境。 使用 ng-bootstrap 下载 ng-bootstrap ng-bootstrap 使用 bootstrap 4.0 alpha2 ， 因此需要先下载 bootstrap ， 推荐使用 npm 包的形式： npm install bootstrap@4.0.0-alpha.2 --save 接着下载 ng-bootstrap ， 同样使用 npm 包的形式： npm install @ng-bootstrap/ng-bootstrap --save
简单图书管理通过AJAX查询数据库JSON返回到前台显示
星辰里的月光
10-26 1719
jQuery 使用AJAX提交到后台代码处理，然后以json方式返回到前台并显示在页面 JSON下载：http://repo1.maven.org/maven2/com/alibaba/fastjson/ 结构： 效果图： 分了三个层，没这么细，bean，servlet，util；没太大必要 数据库： Book.java: package com.chaz.bean; public clas...
基于html+css+js的图书管理系统
热门推荐
毕业作品网站
09-18 2万+
本项目是用html，css，js语言编写的图书管理系统，用jquery进行页面的加工，ajax异步读取信息，json数据存储相关信息。用户在搜索框输入书名/作者/出版社信息，点击搜索按钮，弹出该图书的详细信息，如果没有搜索到，就弹出提示。（3）主界面：主要包含一个图书信息的表格，添加图书的输入框，搜索框，管理系统的标题，页脚。用户输入用户名，密码，与已存储的json数据进行验证，验证成功进入主界面，不成功弹出警告。点击图书表格上每条图书后的删除按钮，删除单条图书信息，新添加后的图书信息也可以删除。
【项目实战】nodejs 实战-图书管理系统
weixin_41033048的博客
04-05 9344
第一步：新建js文件先安装这两个指令
java 发送http请求获得json 以及解析json
卤小蛋学编程
07-03 1万+
博主在做一款图书app的后台，最近遇到的一个需求： 前端向后端返回图书的isbn码，后端向前端返回该isbn对应图书的信息，例如书名、作者、出版社、简介等。 后端实现的逻辑： 读取isbn码，判断是否为空，为空则报错 查看数据库是否有与该isbn匹配的图书信息，如果有则直接返回 如果没有，则利用豆瓣开发者工具，进行查找，通过对接收到的信息进行解析，并插入到数据库中 前两步都没有问题，问...
html表格接收json数据,Bootstrap-table如何显示后台传过来的JSON数据？
weixin_32121331的博客
06-08 1192
大致懂了……可能是对JS不太了解吧，没有返回object，下面是成功代码：$(function () {//初始化Tablevar teacherTable = new TableInit();teacherTable.Init();});var TableInit = function () {var oTableInit = new Object();//初始化TableoTableInit....
记录bootstraptable解析json格式的二级或多级数组及显示 （java+jsp+js）
期何
08-08 2817
首先，理清思路，我们的目标：在bootstrap上显示后台回传的json数据里的多级数组。 这里的步骤可以大致分为：一、在后套controller中写好方法，向前台return一个JSONString 二、在前台jsp中，使用ajax接收后台数据 $.ajax({ type: "post", url: projectName + '/se...
bootstrap学习笔记（1）--form表单之注册
为梦想而奋斗，无悔_一叶扁舟的点滴成长！
03-11 3433
用bootstrap和html5写的form表单，里面自带了验证和提示功能，字体悬浮。 form form Email <input type="email"
bootstrap学习笔记
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值