JS中声明对象,调用方法加载树形菜单的实例

最新推荐文章于 2023-12-14 00:10:48 发布
最新推荐文章于 2023-12-14 00:10:48 发布
阅读量519 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w405722907/article/details/75258198
版权

html:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Items</title>
	<link rel="stylesheet" href="../css/reset.css" type="text/css"/>
	<link rel="stylesheet" href="../css/yoyee.otk2.css" type="text/css"/>
	<link rel="stylesheet" href="../css/items.css" type="text/css"/>
	<link rel="stylesheet" href="../css/material-design-font-icon.css" type="text/css"/>

</head>
<body>
<div class="wrap" id="otkBox">
	<div class="otk-lft" id="otk-lft">
		<div class="otk-title">
			<h1>设备信息</h1>
			<div class="sec-act-box">
				<ul class="m3-acts">
					<li id="otk-search" title="查询"><i class="mdi ico-search"></i></li>
					<li id="otk-reload" title="刷新列表"><i class="mdi ico-refresh"></i></li>
				</ul>
			</div>
		</div>
		<ul class="otk-list-box" id="otk-list-box"></ul>
	</div>

</div>


<script src="../lib/jquery.js"></script>
<script src="../js/yoyee.otk2.js"></script>
<script>


$(document).ready(function(){
	otk.init({
		renderTo:"otkBox",
		list:"findTreeforCompy.action",
		listWidth:350,
		itemClick:function(obj){
			showItem(obj);
		},
		autoClick:id
	});
});


</script>
</body>
</html>


JS:

window.otk = {
	init:function(j){
		this.box = $("#otk-lft");
		this.body = $("#otk-body");
		this.frame = $("#otk-frame");
		this.listBox = $("#otk-list-box");
		this.itemClick = j.itemClick;
		this.groupEvent = j.groupEvent;
		
		this.listUrl = j.list;
		//this.target = j.target;
		this.firstLoading = true;
		this.activingItem = "";
		this.autoClick = j.autoClick;
		
		
		this.itemTemp =  $("<li><div><i class='otk-dot mdi ico-chevron-right'></i><span class='otk-item'></span></div></li>");
		this.tempInfo = $("<li></li>").addClass("otk-temp");
		this.infoBox = $("#otk-info");
	
		//alert(j.listWidth);
		if(j.listWidth){
			this.box.css({"width":j.listWidth});
			this.body.css({"left":j.listWidth});
		}
		
		otk.build();

		this.reload = $("#otk-reload");
		this.reload.show().click(function(){
			otk.reloadlist();
		});
		
		$("#otk-search").show().click(function(){
			alert("Find something... ");
		});
	},
	build:function(){
		$.getJSON(otk.listUrl).done(function(json){
			otk.json = json;
			otk.listBox.addClass("deep-0");
			otk.buildItems(json.items,otk.listBox,0);
			
		}).fail(function(){
			alert("Get json data error!");
		});
	},
	buildItems:function(j,box,deep){
		var box = box;
		var deep = deep;
		var itml = j.length;
		$.each(j,function(i){
			var gj = j[i];
			var li = otk.itemTemp.clone().appendTo(box);
			if(deep>0){
				$("<span class='lh'></span>").appendTo(li);
				var lv1 = $("<span class='lv1'></span>").appendTo(li);
				if(i==itml-1) lv1.addClass("end");
			}
			//alert(itml+"|"+i);
			
			
			var div = li.find("div");
			var itm = li.find(".otk-item");
			var dot = li.find(".otk-dot");
			itm.text(gj.title).attr("title",gj.title).data("json",gj);//.attr("id","g_"+gj.id);

			

			var hasSubItems = false;
			if("items" in gj){
				if(gj.items.length>0)
					hasSubItems = true;
			}

			if(gj.type!="group"){
				itm.addClass("ed").click(function(){
					otk.itemClick($(this));
					otk.listBox.find("span.otk-item.active").removeClass("active");
					$(this).addClass("active");
				});
			}

			if(hasSubItems){
				li.addClass("expand");
				$("<span class='lv2'></span>").appendTo(li);

				var sbox = $("<ul></ul>").addClass("otk-sub-list").addClass("deep-"+deep+1).appendTo(li);

				dot.addClass("e").click(function(){
					var pli = $(this).closest("li");
					if(pli.hasClass("expand")){
						sbox.slideUp(100,function(){
							pli.removeClass("expand");
						});
					}else{
						pli.addClass("expand");
						sbox.slideDown(100);
					}
				});
				if(gj.type=="group"){
					itm.click(function(){
						dot.click();
					});
				}
				
				
				otk.buildItems(gj.items,sbox,deep+1);

				
			}else{
				/*div.click(function(){
					otk.listBox.find("div.active").removeClass("active");
					$(this).addClass("active");
					var url = otk.target+"?"+gj.id;
					otk.frame.attr("src",url);
				});*/
				
			}	
			if(gj.id == otk.autoClick){
				itm.click();
				itm[0].scrollIntoView();
			}
			
		});
	},
	pushInfo:function(msg){
		otk.infoBox.html(msg);//.show();
	},
	newItem:function(){
		otk.frame.attr("src",otk.addNew+"?0");
		otk.listBox.find("li.active").removeClass("active");
	},
	reloadlist:function(){
		//alert("reloading");
		otk.reload.find("i").addClass("fa-spin");//.delay("2000").removeClass("fa-spin");
		//otk.cdt.trigger("change");
		setTimeout(function(){otk.reload.find("i").removeClass("fa-spin");},"2000");
	},
	loading:function(o){
		o.closest("ul").find("li.active").removeClass("active");
		o.addClass("active");
		otk.activingItem = o;
		otk.frame.attr("src",otk.target+"?"+o.data("json").id);
		otk.pushInfo("project url:"+otk.target+"?"+o.data("json").id);
	}
}

$.ajaxSetup ({
	cache: false //close AJAX cache
});














马大头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui树形下拉菜单完整实例
10-31
在layui中，可以使用`layui.tree.render()`方法来渲染树形结构，传入配置对象，其中包含数据源（一般为JSON数组）和其他设置，如展开级别、节点点击事件等。 2. 动态赋值： 在某些情况下，可能需要根据用户操作或...
JavaScript对象的声明及操作
web_jisu的博客
08-26 3460
2、删除属性：delete对象.属性，（不建议用）（性能问题，消耗大且有bug）一个属性就是一个键值对（“key: value”），其中键（2、我们也可以用多字词语来作为属性名，但必须给 它们加上引号。5、访问对象中没有的属性 ，返回的时undefined。4、对象的属性名 不会和外面的变量起冲突。）是一个字符串（也叫做属性名），值（1、增加属性：对象.属性 = ’值‘4、修改对象：对象.属性='值'1、我们可以通过使用带有可选。3、查询对象：对象.属性。此法一般不用于遍历数组。①对象['属性名']....
js函数声明方式*2，对象声明方式*7，不同的调用
qq_50276105的博客
02-24 603
fu2（‘你看我几分像从前’，‘眼里透露着清澈的愚蠢’） //你看我几分像从前 眼里透露着清澈的愚蠢。test.prototype.属性名=value1。test.prototype.方法名=value2。test.prototype.方法名=匿名函数。test.prototype.属性名=属性值。【2】new操作符+Object声明对象。this.属性名=value1；this.属性名=value1；【7】class类方式声明对象。obj.属性名=属性值；【3】构造函数声明对象。
JavaScript基础（day05:对象）
最新发布
weixin_51591826的博客
12-14 479
JS中的对象
JS对象的几种声明方式
qq_40893035的博客
11-08 1297
1 .字面量式生命对象 var obj = { name:"zhangsan", age:"23", active:function(){ console.log("这是对象的第一种创建方式"); } } 注意：属性与属性之间用逗号“,”隔开 标题2.实例化Object的方式声明对象，（什么叫实例化，就自己查资料去吧，这里讲的是对象的声明方式）。 var obj = new Obje...
JS之对象-对象声明及静态方法
秋水惊鸿的博客
03-29 3387
声明对象 1.原型实例化 // 声明对象的方式1：原型实例化 let obj1 = new Object() obj1.name = 'obj1---张三' obj1.getName = function(){ return this.name } console.log(obj1.getName()) 2.直接赋值 // 声明对象的方式2：直接赋值 let obj2 = { name:'obj2---李四', getName(){ return this.name } } co
asp.net TreeView递归循环子节点生成树形菜单实例
10-21
在这个实例中，我们通过递归循环的方式实现子节点的动态加载，从而生成树形菜单。该技术主要涉及到递归算法的应用以及对TreeView控件节点的操作技巧。 首先，要生成树形菜单，我们需要创建一个根节点，并将它作为...
jquery多级树形下拉菜单的实例代码
10-16
它提供了丰富的配置选项和事件处理，使得创建树形菜单变得更加便捷。在本例中，我们使用的是`zTree_v3-master`版本。 3. **tree-select.js**：这是专门用于构建树形下拉菜单的辅助脚本，它结合了jQuery和zTree的功能...
JavaScript实现简单的树形菜单效果
10-19
本文介绍了如何使用JavaScript实现一个简单的树形菜单效果，通过这个实例，我们可以学习到如何操作DOM、如何通过JavaScript控制样式的变化，以及如何实现一个基本的交互式菜单。 首先，我们需要了解HTML结构。从给...
javascript 树形导航菜单实例代码
12-12
在给出的代码示例中，我们看到一个基于HTML、CSS和JavaScript实现的简单树形导航菜单实例。下面将详细介绍这个实例中的关键知识点。 1. **HTML 结构**： HTML 结构是构建菜单的基础，它使用`<div>`标签来表示各个...
jquery事件preventDefault()方法用法实例
10-24
主要介绍了jquery事件preventDefault()方法用法,实例分析了preventDefault()方法的功能及使用技巧,需要的朋友可以参考下
JS详解——对象
黄黄黄一边敲代码一边写出来的博客
05-07 236
JS详解——对象 一、声明语法 对象可以通过两种形式定义：声明（文字）形式和构造形式。 对象的文字语法如下： var myobj = { key: value // ... } 构造形式大概是这样的： var myobj = new Object() myObj.key = value 构造形式和文字形式生成的对象是一样的。唯一的区别是，文字形式中你可以添加多个键值对，而构造形式中你必须逐个添加属性。 二、类型 在JavaScript中一共有六种主要类型（术语是”语言类型“）： string nu
js的对象声明
liurenbuzai的博客
04-18 998
一：javascript 对象1.基于对象的操作方式（面向对象封装，继承，多态）2.将相关的操作使用一个对象完成，看作是一个整体字符串对象；书序对象；数组；时间对象对象中的内容1：属性（变量）2：方法（函数）                    都是和这个对象相关1：声明对象2：使用对象3：使用系统对象   步骤：              1：找到对象              2：实例化对象...
JavaScript声明一个对象的三种方式
热门推荐
相濡以沫的博客
11-14 1万+
1. 声明一个对象的语法 var person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', interests: ['music', 'skiing'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.a
JS对象定义和基本方法
qq_43712187的博客
05-12 1万+
js如何定义对象 用var关键字 JavaScript用一个{…}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,，如果加了，有的浏览器（如低版本的IE）将报错。 eg： var 对象名字={ 属性 方法 <script> var xiaoming={ name:...
js对象声明方式
别抢我蓝buff
02-08 1808
在JS中，创建对象（Create Object）并不完全是我们时常说的创建类对象，JS中的对象强调的是一种复合类型，JS中创建对象及对对象的访问是极其灵活的。 JS对象是一种复合类型，它允许你通过变量名存储和访问，换一种思路，对象是一个无序的属性集合，...
Js声明对象的5种总结方法详解
铭小小
03-06 8646
<script> //内置函数 var obj1=new Object(); obj1.name="zhuyu"; obj1.age=21; obj1.uni=function(){ console.log(this.name+this.age); } conso...
js 声明对象的常用方式
banjing_1993的博客
03-20 1129
有如下几种方式： //第一种 var obj= {}; //第二种 var obj= new Object(); //第三种 function P(x) { this.x = x; ...
addClass、removeClass、toggleClass三者的区别
一根破棍子的博客
09-01 4749
.addClass(“className”)方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；  .removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；  .toggleClass(“className”)方法是用来给脂定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值