`

php,jquery > 树枝状 ajax 加载数据或隐藏数据

 
阅读更多

 

<div id="main_2">
	<div class="content_header">
		ssss
	</div>
	<div class="content_box">
		<div class="content_box_title">			
			商品列表			
			<a href="javascript:dialog(400,210,'<?PHP echo site_url(); ?>/main/add_pro/1');" class="btn">+ 增加</a>
		</div>
		<?PHP foreach($root_pat_pro as $list): ?>
		<div class="content_box_list pro_list root_<?PHP echo $list->id; ?> range_0" alt="0" title="<?PHP echo $list->id; ?>" >
			<a href="javascript:opList(<?PHP echo $list->id; ?>);" title="展开" alt="1" class="list_show_<?PHP echo $list->id; ?>"><img src="<?PHP echo base_url(); ?>images/pro_list_show.png" class="map_btn" /></a>
			<a href="<?PHP echo site_url().'/fun/del_area/'.$list->id; ?>" title="区域坐标" ><img src="<?PHP echo base_url(); ?>images/map.png" class="map_btn" /></a>
			<a href="javascript:dialog(400,210,'<?PHP echo site_url().'/main/add_pro/'.$list->id; ?>');" title="添加子商品"><img src="<?PHP echo base_url(); ?>images/add.png" class="add_btn" /></a>
			<a href="<?PHP echo site_url().'/fun/del_pro/'.$list->id; ?>"  title="删除" onclick="{if(confirm('删除后将删除掉改商品类的所有子商品,确定删除?')){return true;}return false;}" ><img src="<?PHP echo base_url(); ?>images/delete.png" class="del_btn" /></a>
							
			<a href="javascript:dialog(400,210,'<?PHP echo site_url().'/main/add_pro/'.$list->pat.'/'.$list->id; ?>');"><?PHP echo $list->name; ?></a>
		</div>
		<?PHP endforeach; ?>
		<div class="content_box_footer">
			&nbsp;
		</div>		
	</div>
</div>

<script language="javascript">
<!--
	
	
	var doArr = [];
	var doArrLen = 0;
	var doneArrlen = 0;

	
	function opList(this_pat){
		var level = $(".root_"+this_pat).attr('alt');
		var this_list_show = $(".list_show_"+this_pat).attr('alt');
		if(this_list_show == '0'){
			$(".list_show_"+this_pat).attr('alt','1');
			$(".list_show_"+this_pat+" img").attr('src','<?PHP echo base_url(); ?>images/pro_list_show.png');
		   var h_start = false;
		    jQuery(".pro_list").each(function(){
		    	if(this_pat == parseInt($(this).attr('title'))){
		    		h_start = true;	
		    		return true;
		    	}
		    	if(h_start == true && parseInt($(this).attr('alt')) > level){
		    		$(this).remove();	
		    		return true;
		    	}
		    	if(h_start == true && parseInt($(this).attr('alt')) <= level){
		    		h_start =false;	
		    		return false;
		    	}
		        //.................
		    });			
		}else{
			$(".list_show_"+this_pat).attr('alt','0');
			$(".list_show_"+this_pat+" img").attr('src','<?PHP echo base_url(); ?>images/pro_list_hide.png');
			loadSons(this_pat);
		}
	}
	
	function loadSons(this_pat){


		var range = parseInt($(".root_"+this_pat).attr('alt'));
		range = range+1;
		$.ajax({
			type: "get",
			dataType: "json",
			url: "<?PHP echo site_url(); ?>/fun/get_sons/"+this_pat,
			complete :function(){
				if(doneArrlen < doArrLen){
					loadSons(doArr[doneArrlen]);
					doneArrlen++;
				}
			},
			success: function(data){
				if(data == '' || data == null){
					
				}else{
					var right_video_html = '';
					var left_video_html = '';
					var out_html = '';
					$.each(data, function(i,val){  //each = foreach, i= $key, val = $value    
						out_html +='<div class="content_box_list pro_list root_'+val.id+'  range_'+range+'" alt="'+(range)+'" title="'+val.id+'">';
						out_html +='<a href="javascript:opList('+val.id+');" title="展开" alt="1" class="list_show_'+val.id+'"><img src="<?PHP echo base_url(); ?>images/pro_list_show.png" class="map_btn" /></a>';
						out_html +='<a href="<?PHP echo site_url(); ?>/fun/del_area/'+val.id+'" title="区域坐标" ><img src="<?PHP echo base_url(); ?>images/map.png" class="map_btn" /></a>';
						out_html +='<a href="javascript:dialog(400,210,\'<?PHP echo site_url(); ?>/main/add_pro/'+val.id+'\');" title="添加子商品"><img src="<?PHP echo base_url(); ?>images/add.png" class="add_btn" /></a>';
						out_html +='<a href="<?PHP echo site_url(); ?>/fun/del_pro/'+val.id+'"  title="删除" onclick="{if(confirm(\'删除后将删除掉改商品类的所有子商品,确定删除?\')){return true;}return false;}" ><img src="<?PHP echo base_url(); ?>images/delete.png" class="del_btn" /></a>';
							
						out_html +=' <a href="javascript:dialog(400,210,\'<?PHP echo site_url(); ?>/main/add_pro/'+val.pat+'/'+val.id+'\');">'+val.name+'</a>';
						out_html +='</div>';
							
					});

				//\
				}
				$(".root_"+this_pat).after(out_html);	
				
			},
			error:function(){
			
			}

		});
	}
	$(document).ready(function(){
		<?PHP 
			if($pats != ''){				
				$pats_a = explode('|',$pats);
				$x = 0;
				$doarr = '[';
				foreach($pats_a as $pats_l){
					if($pats_l != '' && $pats_l != '1'){						
						if($x == 0){
							$firstPat = $pats_l;
						}else{
							$doarr .= $pats_l.',';
						}
						$x++;						
					}
				}
				$doarr = substr($doarr, 0, -1).']';
				if($doarr == ']'){
					$doarr = '""';	
				}
				
				echo '
					doArr = '.$doarr.';
					doArrLen = '.$x.';
					doneArrlen = 0;	
					loadSons('.$firstPat.');		
				';
			
			}
		?>
	});
	
//-->
</script>
 
</body>
</html>

 

 

css

 

*{
	margin:0px;
	padding:0px;
	border:0 none;
	text-decoration:none;
}
html,body{
    font-size: 12px;
	width:100%;
	height:100%;
}
ul{
	list-style:none;
}
.cls{
	clear:both;
}
.left{
	float:left;	
}
.right{
	float:right;	
}
.input_text{
	border:1px solid #aaa;
	padding:3px;
	color:#333;
}
.btn{
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border:1px solid #426300;
	padding:4px 8px;
	background:#669900;
	color:#fff;
	cursor: pointer;
}
#dialog{
	background:#fff;	
}
#dialog_body{
	padding:10px;	
}
.del_btn,.add_btn,.map_btn{
	vertical-align:middle;	
	width:20px;
}
.del_btn:hover{
	background:red;	
}
.add_btn:hover{
	background:green;		
}
.map_btn:hover{
	background:orange;		
}
#dialog_body table tr td{
	border-bottom:1px solid #efefef;
	padding:10px 0px;	
}
.btn:hover{
	background:#496e00;
}

#main_1{
	overflow:hidden;
	height:100%;
	float:left;
	background: #b0bec7; 
	width: 20%; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	-moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
}

#main_2{
	height:100%;
	width:80%;
	float:left;
	background:#e6eaed;
	white-space: nowrap;
	word-break: keep-all;
}
#main_2 .content_header{
	padding:12px 0px 12px 12px;
	background:#e8e8e8;
	font-size:14px;
	font-weight:bold;
	color:#444;
	border:1px solid #aaa;
	border-left:0 none;
	border-right:0 none;
}
.content_box {
	padding:15px;	

}

.content_box .content_box_title{
	background:#b2c1cb;
	padding:20px 0px 10px 10px;	
	-moz-border-radius-topright: 8px; 
	-webkit-border-top-right-radius: 8px; 
	border-top-right-radius: 8px;	
	-moz-border-radius-topleft: 8px; 
	-webkit-border-top-left-radius: 8px; 
	border-top-left-radius: 8px;		
}
.content_box .content_box_footer{
	background:#b2c1cb;
	padding:3px;	
	border:1px solid #b2c1cb;
	-moz-border-radius-bottomright: 8px; 
	-webkit-border-bottom-right-radius: 8px; 
	border-bottom-right-radius: 8px;	
	-moz-border-radius-bottomleft: 8px; 
	-webkit-border-bottom-left-radius: 8px; 
	border-bottom-left-radius: 8px;		
}
.content_box .content_box_list{
	padding:10px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}
.content_box .content_box_list a:hover{
	text-decoration:underline;	
}
.content_box .content_box_list:hover{
	background:#fffad6;	
}
.content_box .a0{
	background:#fff;	
}
.content_box  .a1{
	background:#f0f4f7;	
}
.content_box .content_box_list a{
	color:#0073C1;
}
.pro_list{
	background:#fff;
	border-bottom:1px dashed #aaa;	
	
}

#dilog{
	display:none;
	background:url('../images/loading.gif') no-repeat center center #fff;
	position:absolute;	
	border:10px solid #555;
	-webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	-moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;	
	top:50px;
	
}
#dilog_in{
	position:relative;	
}
#dilog .close_dialog{
	position:absolute;
	right:-40px;
	top:-40px;	
	width:50px;
	height:50px;
}


/* range class */
.range_1{padding-left:20px !important;}
.range_2{padding-left:40px !important;}
.range_3{padding-left:60px !important;}
.range_4{padding-left:80px !important;}
.range_5{padding-left:100px !important;}
.range_6{padding-left:120px !important;}
.range_7{padding-left:140px !important;}
.range_8{padding-left:160px !important;}
.range_9{padding-left:180px !important;}
.range_10{padding-left:200px !important;}
.range_11{padding-left:220px !important;}
.range_12{padding-left:240px !important;}
.range_13{padding-left:260px !important;}
.range_14{padding-left:280px !important;}
.range_15{padding-left:300px !important;}
.range_16{padding-left:320px !important;}
.range_17{padding-left:340px !important;}
.range_18{padding-left:360px !important;}
.range_19{padding-left:380px !important;}
.range_20{padding-left:400px !important;}
.range_21{padding-left:420px !important;}
.range_22{padding-left:440px !important;}
.range_23{padding-left:460px !important;}
.range_24{padding-left:480px !important;}
.range_25{padding-left:500px !important;}
.range_26{padding-left:520px !important;}
.range_27{padding-left:540px !important;}
.range_28{padding-left:560px !important;}
.range_29{padding-left:580px !important;}
.range_30{padding-left:600px !important;}
.range_31{padding-left:620px !important;}
.range_32{padding-left:640px !important;}
.range_33{padding-left:660px !important;}
.range_34{padding-left:680px !important;}
.range_35{padding-left:700px !important;}
.range_36{padding-left:720px !important;}
.range_37{padding-left:740px !important;}
.range_38{padding-left:760px !important;}
.range_39{padding-left:780px !important;}
.range_40{padding-left:800px !important;}
.range_41{padding-left:820px !important;}
.range_42{padding-left:840px !important;}
.range_43{padding-left:860px !important;}
.range_44{padding-left:880px !important;}
.range_45{padding-left:900px !important;}
.range_46{padding-left:920px !important;}
.range_47{padding-left:940px !important;}
.range_48{padding-left:960px !important;}
.range_49{padding-left:980px !important;}
.range_50{padding-left:1000px !important;}

 

分享到：
| html > 弹出框 有加载中loading...效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery+datatables插件实现ajax加载数据与增删改查功能示例

    标签中提到了知识点的关键词，包括“jQuery”、“datatables插件”、“ajax”、“加载数据”、“增删改查”。这些关键词代表了本文档所要讲述的主要内容。 从【部分内容】中，我们可以提取以下知识点： - 使用HTML...

    基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能

    在本项目中，我们利用jQuery Masonry插件来实现瀑布流效果，并结合Ajax技术实现动态加载数据，进一步提升用户体验。 jQuery Masonry插件是由David DeSandro开发的一个JavaScript库，它的主要功能是将网页中的元素以...

    php+ajax加载数据转圈动画图片.zip

    "ajax加载数据转圈动画图片.gif"很可能就是这样一个加载指示器，当AJAX请求发送并等待服务器响应时显示，当数据加载完成则隐藏。 具体实现步骤如下： 1. **创建HTML结构**：在"date.html"中，创建一个容器元素，...

    如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    在介绍如何使用PHP、jQuery和MySQL实现异步加载ECharts地图数据之前，需要了解几个关键的技术点，以便更好地理解整篇教程。 首先，ECharts是由百度开源的一个强大的数据可视化工具库，它支持多样的数据展示形式，...

    php+jquery+ajax最简单例子

    这个“php+jquery+ajax最简单例子”旨在教你如何使用这些工具实现一个基本的异步数据交换功能。 首先，让我们深入了解这三个概念： 1. PHP（Hypertext Preprocessor）：这是一种服务器端脚本语言，主要用于网页...

    php+mysql+jquery.more.js下拉加载带sql数据完整流程带mysql测试数据

    通常，`&lt;script&gt;`标签会放在`&lt;head&gt;`部分引入jQuery库，然后是`jquery.more.js`，确保jQuery库先加载。此外，可能还需要设置一些初始配置，比如触发下拉加载的DOM元素和事件。 `index.php`是后端处理请求的核心文件...

    jquery ajax选项卡使用jQuery选项卡切换异步加载请求数据

    jQuery的Ajax功能使得开发者能够实现异步数据加载，极大地提升了用户体验。在这个场景中，我们讨论的是如何利用jQuery的Ajax功能来创建一个选项卡系统，该系统在用户切换选项卡时能动态地从服务器加载内容。 首先，...

    php基于jquery的ajax技术传递json数据简单实例.docx

    PHP 基于 jQuery 的 Ajax 技术传递 JSON 数据简单实例 本文主要介绍了 PHP 基于 jQuery 的 Ajax 技术传递 JSON 数据方法，以完整实例形式分析了 PHP 基于 jQuery 的 Ajax 无刷新提交数据实现方法。下面是详细的知识...

    Echarts通过Ajax实现动态数据加载

    ### Echarts通过Ajax实现动态数据加载 #### 一、引言 在现代Web开发中，数据可视化是一项重要的技能。Echarts作为一款强大的JavaScript图表库，因其丰富的图表类型、灵活的配置选项以及良好的交互性而备受开发者...

    ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件

    同时，更新加载指示器的状态，告知用户数据正在加载或已加载完毕。 7. **防止重复加载**：为了优化用户体验，需要确保在请求未完成之前，不会触发新的请求。这可以通过设置一个标志变量或利用jQuery的`$.ajaxStart...

    带搜索过滤ajax加载下拉框代码.zip

    "带搜索过滤ajax加载下拉框代码.zip"提供的解决方案正针对这一需求，它是一个基于jQuery的插件，旨在提升用户体验，使得在大型数据集中的选择和查找过程更加便捷。 首先，这个插件的核心功能是**搜索过滤**。它允许...

    jQuery带搜索过滤ajax加载下拉框插件.zip

    《jQuery带搜索过滤ajax加载下拉框插件详解》 在网页开发中，下拉框是一种常见的用户交互元素，用于提供多个选项供用户选择。然而，随着网站功能的复杂化，传统的静态下拉框已无法满足需求，动态加载、搜索过滤等...

    jquery ajax实例点击按钮触发Ajax loading

    在本实例中，我们将探讨如何利用jQuery的AJAX功能，通过点击按钮来触发一个加载动画（通常表现为一个"loading"图标或指示器），以提升用户体验，表明后台数据正在处理中。 首先，确保在项目中引入了jQuery库。你...

    jQuery滚屏加载_Ajax滚屏加载

    这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 若是想看该网页特效教程 http://www.sucaihuo.com/js/9.html，滚动条下拉到最后，还可以查看...

    Jquery 封装下的ajax异步加载

    这个Web项目实例展示了如何利用jQuery封装的AJAX功能实现异步加载，通过与Servlet配合，实现了客户端与服务器间JSON数据的交换。理解这些概念和实践，对于提升Web应用的用户体验和性能至关重要。通过深入学习和实践...

    Jquery ajax方式读取txt文件、Jquery分页.

    在IT行业中，jQuery是一个...总的来说，jQuery的AJAX功能与分页插件相结合，可以有效地实现动态加载和展示TXT文件内容，以及处理大量数据的分页显示。这些技术在网页开发中非常常见，对于提升用户体验具有重要意义。

    jQuery+Ajax+PHP+Mysql实现分页显示数据

    总结来说，这个实例通过结合jQuery、Ajax、PHP和Mysql，实现了在不刷新页面的情况下，动态加载和分页显示数据库中的数据。这不仅提高了用户体验，也减轻了服务器的负担，是Web开发中常见的数据加载策略。

    jquery+ajax+asp+mysql加载更多。

    在网页开发中，"加载更多"功能是一种常见的用户体验优化手段，尤其在处理大量数据或内容时，如新闻、评论或社交媒体动态。这个功能允许用户滚动页面到一定位置时，自动或手动加载更多内容，而不是一次性加载所有内容...

    jQuery无限级ajax加载菜单代码.zip

    【jQuery无限级ajax加载菜单代码】是一个用于创建动态、多级菜单的JavaScript解决方案，它利用了流行的jQuery库和Ajax技术。这个代码的核心在于其能够异步地从服务器获取JSON数据，然后根据这些数据构建出一个可扩展...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    jQueryPager是一款轻量级的jQuery分页插件，它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`，在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...

Magicbox
Global site tag (gtag.js) - Google Analytics