Jquery + Bootstrap 做的一个Expander Grid

最新推荐文章于 2024-05-04 14:33:04 发布
最新推荐文章于 2024-05-04 14:33:04 发布
阅读量3k 收藏
点赞数
分类专栏： Jquery 文章标签： Jquery bootstrap grid expander html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longaction2012/article/details/9493637
版权

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap/css/bootstrap-responsive.min.css" />
<link href="../bootstrap/css/docs.css" rel="stylesheet">
<style type="text/css"><!--
	.table th,.table td{
		text-align: center;
	}
	.checkbox {
	    min-height: 15px;
	    padding-left: 30px;
	}
	.selected{
		background-color : #E5F9FF
	}
</style>

</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar" style="background-position: 0 0px;padding:30px 0px 40px 0px;>
	<header class="">
		<div class="container">
			<div class="row">
				<div class="span4">
				</div>
				<div class="span8" style="text-align: right;">
					<h2>{Large School Test Suite Upgrade}</h2>
				</div>
			</div>
		</div>
	</header>
	<hr>
	<div class="container">
		<div class="row"><div class="span4"><h4>1. New templates in latest suite</h4></div></div>
	<table class="table table-bordered table-hover" style="cursor:pointer;">
		<thead>
			<th width="5%"><div class="icon-resize-full" id="newAllExpand"></div></th>
			<th width="5%"><label class="checkbox"><input type="checkbox" id="newAllCheck"></label></th>
			<th width="5%">#</th>
			<th width="48%">Role Name</th>
			<th width="48%">Crisis Name</th>
		</thead>
		<tbody id="newSuite">
			<tr>
				<td width="2%"><div class="icon-plus"></div></td>
				<td><label class="checkbox"><input type="checkbox" value=""></label></td>
				<td>1</td>
				<td>Row1</td>
				<td>Row1</td>
			</tr>
			<tr style="display:none;">
				<td colspan="5">
					<table width="80%" align="center" class="table-bordered">
					<caption class="text-error" ><strong>Checklists and Communication Message</strong></caption>
					<thead>
						<th width="5%">#</th><th width="65%">Step Name</td><th width="30%">Step Type</td>
					</thead>
					<tr>
						<td>1</td><td>asd s sa as ds ad s  sa</td><td>checkbox</td>
					</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td width="2%"><div class="icon-plus"></div></td>
				<td><label class="checkbox"><input type="checkbox" value=""></label></td>
				<td>2</td>
				<td>Row2</td>
				<td>Row2</td>
			</tr>
			<tr style="display:none;">
				<td colspan="5">adadsadas</td>
			</tr>
			<tr>
				<td width="2%"><div class="icon-plus"></div></td>
				<td><label class="checkbox"><input type="checkbox" value=""></label></td>
				<td>3</td>
				<td>Row3</td>
				<td>Row3</td>
			</tr>
			<tr style="display:none;">
				<td colspan="5">adadsadas</td>
			</tr>
		</tbody>
	</table>
	<div class="row"><div class="span5"><h4>2. Templates that are different form local templates</h4></div></div>
	<table class="table table-bordered table-hover" style="cursor:pointer;">
		<thead>
			<th width="5%"><div class="icon-resize-full" id="oldAllExpand"></div></th>
			<th width="5%"><label class="checkbox"><input type="checkbox" id="oldAllCheck"></label></th>
			<th width="5%">#</th>
			<th width="48%">Role Name</th>
			<th width="48%">Crisis Name</th>
		</thead>
		<tbody id="oldSuite">
			<tr>
				<td width="2%"><div class="icon-plus"></div></td>
				<td><label class="checkbox"><input type="checkbox" value=""></label></td>
				<td>1</td>
				<td>Row1</td>
				<td>Row1</td>
			</tr>
			<tr style="display:none;">
				<td colspan="5">adadsadas</td>
			</tr>
			<tr>
				<td width="2%"><div class="icon-plus"></div></td>
				<td><label class="checkbox"><input type="checkbox" value=""></label></td>
				<td>2</td>
				<td>Row2</td>
				<td>Row2</td>
			</tr>
			<tr style="display:none;">
				<td colspan="5">adadsadas</td>
			</tr>
			<tr>
				<td width="2%"><div class="icon-plus"></div></td>
				<td><label class="checkbox"><input type="checkbox" value=""></label></td>
				<td>3</td>
				<td>Row3</td>
				<td>Row3</td>
			</tr>
			<tr style="display:none;">
				<td colspan="5">adadsadas</td>
			</tr>
		</tbody>
	</table>
		<div><button class="btn btn-large btn-block btn-primary" type="button">UPGRADE SELECTED ITEMS</button></div>
	</div>
	<footer class="footer">
		<div class="container">
			<p style="text-align:center;">
				Designed and built with all the love in the world by <a
					href="http://www.edautomate.com" target="_blank">EdAutomate</a>.
			</p>
			<p style="text-align:center;">
				<a href="#">EdAutomate CrisisGo System V1.0</a>
			</p>
		</div>
	</footer>
	
<script style="text/javascript" src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script style="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
	$(function(){
		/************Expand all********************/
		if($("#newAllExpand")){
			$("#newAllExpand").click(function(){
				if(this.className == 'icon-resize-small'){
					this.className = 'icon-resize-full';
					$("#newSuite tr:even").each(function () {
						var node = $(this).find("td:eq(0)").children(".icon-minus");
						if(node[0]){
							node[0].className = 'icon-plus';
							$(this).next().css("display", "none");
						}
					});
				}else{
					this.className = 'icon-resize-small';
					$("#newSuite tr:even").each(function () {
						var node = $(this).find("td:eq(0)").children(".icon-plus");
						if(node[0]){
							node[0].className = "icon-minus";
							$(this).next().css("display", "");
						}
					});
				}
			});
		}

		if($("#oldAllExpand")){
			$("#oldAllExpand").click(function(){
				if(this.className == 'icon-resize-small'){
					this.className = 'icon-resize-full';
					$("#oldSuite tr:even").each(function () {
						var node = $(this).find("td:eq(0)").children(".icon-minus");
						if(node[0]){
							node[0].className = 'icon-plus';
							$(this).next().css("display", "none");
						}
					});
				}else{
					this.className = 'icon-resize-small';
					$("#oldSuite tr:even").each(function () {
						var node = $(this).find("td:eq(0)").children(".icon-plus");
						if(node[0]){
							node[0].className = "icon-minus";
							$(this).next().css("display", "");
						}
					});
				}
			});
		}
		
		/**************Selected all******************/
		if($("#newAllCheck")){
			$("#newAllCheck").click(function(){
				if(this.checked){
					$("#newSuite tr:even").each(function () {
						var inCheck = $(this).find("td:eq(1)").children("label").children("input");
						if(inCheck[0]){
							inCheck[0].checked = true;
							$(this).addClass("selected");
						}
					});
				}else{
					$("#newSuite tr:even").each(function () {
						var inCheck = $(this).find("td:eq(1)").children("label").children("input");
						if(inCheck[0]){
							inCheck[0].checked = false;
							$(this).removeClass("selected");
						}
					});
				}
			});
		}

		if($("#oldAllCheck")){
			$("#oldAllCheck").click(function(){
				if(this.checked){
					$("#oldSuite tr:even").each(function () {
						var inCheck = $(this).find("td:eq(1)").children("label").children("input");
						if(inCheck[0]){
							inCheck[0].checked = true;
							$(this).addClass("selected");
						}
					});
				}else{
					$("#oldSuite tr:even").each(function () {
						var inCheck = $(this).find("td:eq(1)").children("label").children("input");
						if(inCheck[0]){
							inCheck[0].checked = false;
							$(this).removeClass("selected");
						}
					});
				}
			});
		}
		/***********************Expand row for new suite table****************/
		if($(".icon-plus")){
			$(".icon-plus").bind("click", function(){
				if(this.className == 'icon-plus'){
					this.className = 'icon-minus';
				}else{
					this.className = 'icon-plus';
				}
				var nextTr = $(this).parent().parent().next();
				nextTr.toggle();
			});
		}
		/********************Select Row for new suite table******************/
		if($("input")){
			$("input").bind("click", function(){
				if($(this).parent().parent().is("td")){
					if(this.checked){
						$(this).parent().parent().parent().addClass("selected");
					}else{
						$(this).parent().parent().parent().removeClass("selected");
					}
				}
			});
		}
		
	});
</script>
</body>
</html>


效果：





凌兵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端项目-jquery-expander.zip
09-03
前端项目-jquery-expander,Expand and collapse HTML content
bootstrap-js组件-折叠效果
qq_39396275的博客
08-07 296
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, us
插件介绍:轻量级表格树treegrid, 支持bootstrap 风格
内沐的博客
03-15 3万+
官网:http://maxazan.github.io/jquery-treegrid/引入文件:<link rel="stylesheet" href="statics/treeGrid/jquery.treegrid.css"> <script type="text/javascript" src="statics/treeGrid/jquery.treegrid.js"></script>
jquery 封装插件---可参考
Cool的博客
03-15 920
(function ($) { "use strict"; $.fn.treegridData = function (options, param) { //如果是调用方法 if (typeof options == 'string') { debugger return $.fn.treegri...
树形表实现 bootstrap-table + treegrid
ai_goodStudent的博客
09-26 1481
一 . 首先展示一张效果图 二. 简单代码实现 直接在项目中复制粘贴以下代码即可使用 相关资料: jquery-treegrid 官网https://www.bootcdn.cn/jquery-treegrid/ <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset=...
bootstrap-table treegrid 放大/缩小网页折叠/展开图标消失问题
weixin_42468362的博客
12-25 939
最近使用bootstrap-table和treegrid做树形表格，结果引用jquery.treegrid.js后，当网页窗口发生变化，最左边表示展开和折叠的图标会消失。以下为解决办法。 在jquery.treegrid.js中的isExpanded函数中加入以下代码： 此方法解决了以上问题。 ...
使用jQuery EasyUI的 detailview创建分组表格
u012775558的博客
03-31 6170
使用jquery-easyui的 detailview创建分组表格
jQuery TreeGrid
低调的草原狼
12-26 2万+
为避免重复造轮子，今天简单看了下将jQuery的TreeGrid，现在将其记录如下，希望能够对大家有所帮助。 插件下载地址：http://plugins.jquery.com/treegrid/ TreeGrid特点 在HTML页面中的table元素中创建TreeGrid 简单灵活的javascript实现 兼容bootstrap2和3 能够保存树的状态
基于jQuery+bootstrap的评论回复代码
03-17
基于jQuery+bootstrap的评论回复代码 https://blog.csdn.net/chendongpu/article/details/123542951
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查 适用于学习ssm框架 jQuery 和 Bootstrap的案例
《jQuery+BootstrapWeb开发案例教程（在线实训版）》案例源码.zip
06-29
《jQuery+BootstrapWeb开发案例教程（在线实训版）》案例源码.zip
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
数据可视化大屏展示特效实例（jquery+bootstrap+echarts）
12-27
jquery+bootstrap+echarts数据可视化大屏展示特效实例 项目描述： 数据可视化大屏展示用的越来越多，自己也捣鼓做一个。 运行环境： Chrome 项目技术(必填)： jquery+bootstrap+echarts
JS组件系列——自己动手封装bootstrap-treegrid组件
weixin_34320159的博客
04-27 199
前言：最近产品需要设计一套相对完整的组织架构的解决方案，由于组织架构涉及到层级关系，在表格里面展示层级关系，自然就要用到所谓的treegrid。可惜的是，一些轻量级的表格组件本身并没有自带树形表格的功能，比如bootstrapTable就没有这个功能，怎么办呢？如果是jqgrid、easyUI的表格，treegrid的效果可以说是轻而易举就能解决，而项目目前用的就是bootstrapTable，不...
bootstrap-table（一）树状表（tree-grid）
热门推荐
天空影
04-09 3万+
因为项目有一个接口是多级组织架构的，所以需求是使用树状图表展示，然后表格控件用的bootstrap-table，通过官网的扩展地址找到了tree-grid 这个功能。 扩展地址：bootstrap-table扩展 建议经常使用这个控件的人fork 使用方法官网有，但是我这里还是贴一下，有一点提示大家：关系id 和 pid 是number数据类型，如果后台给的是string类型，记得转换一下，不...
构筑稳固基石：HTML网站架构与结构设计的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-04 1033
HTML架构与结构设计是构建高质量网站的基石，它不仅关乎技术实现，更是一种艺术，平衡着美观、功能与性能。在你的开发实践中，遇到了哪些挑战？有哪些独到的结构设计技巧愿意分享？欢迎在评论区留下你的见解，让我们共同探讨，推动Web发展的边界。💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
单片机开发资源：基于51单片机的开发程序
最新发布
05-07
单片机开发资源，基于51单片机的开发程序，供学习参考。
jquery+bootstrap+html5 源码
09-03
jQuery是一个功能强大的JavaScript库，它简化了JavaScript在网页开发中的使用。jQuery提供了许多用于操作HTML元素、处理事件和动画效果、发送网络请求等常用操作的方法，使得开发者能够更高效地编写交互性的网页应用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值