JS分类选择插件

需要做一个选择分类工具，大致要求如下：

　　点击按钮，显示一级分类，指向某个一级分类显示对应二级分类，分类有几层不定。

只能选择最后一个分类，然后把分类的ID 传值给按钮的value

我的思路：

1.后台传过来的值是json，结构如下：

var json = [
　　{"name":"衣服" , "id" : "1" , "pid" : 0},
　　{"name":"裤子" , "id" : "2" , "pid" : 1}

];

pid是父类的ID，pid为0代表1级分类

2.根据json建立dom树，css样式很简单等会看最后的代码，结构如下：

</ul>

3.查询是否有下级分类，如果没有可以点击，点击后复制给按钮；否则绑定显示下级分类的hover事件

写了一下午，代码量大，头也晕，写得也确实不容易读。想要查看，直接复制以下代码，无图片，无外带JS，不是歪货功能OK。

<!doctype html>

<html>

<head>

<title>分类选择器</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

#classifyTree{position:absolute;left:0;top:100%;z-index:1111;display:none;}

#classifyTree ul{position:absolute;left:100%;top:0;border:1px solid #ccc;margin:0;padding:0;display:none}

#classifyTree li{float:left;list-style-type:none;position:relative;cursor:pointer}

#classifyTree span:hover{background:#09C}

#classifyTree span{float:left;display:block;width:100px;text-align:center;height:25px;white-space:nowrap;background:#f1f1f1;border-bottom:1px dashed #CCC;line-height:25px}

#cid1{visibility:hidden;}

#cid1Text{width:75px;height:25px;border-color:#CCC;border-style:solid;border-width:1px 0 1px 1px;background:#f1f1f1;cursor:pointer;line-height:25px;float:left;text-indent:5px;padding:0;ss}

.classifyBox{height:25px;cursor:pointer;display:inline-block;position:relative}

.arrowBorder{width:25px;height:25px;border-color:#CCC;border-style:solid;border-width:1px 1px 1px 0px;background:#f1f1f1;display:inline-block;float:left}

.downArrow{margin:8px 0 0 8px; width: 0;height: 0; border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 10px solid #181818;float:left}

</style>

</head>

<body>

<div class="classifyBox">

    <div id="classifyClick">

        <input type="text" id="cid1Text"/>

        <div class="arrowBorder">

            <div class="downArrow"></div>

        </div>

    </div>

    <div id="classifyTree">

    </div>

</div>

<input type="text" name="category_id" value="" id="cid1"/>

</body>

<script type="text/javascript"> 

 //pid代表父ID,0代表根

	var json = [

		{"name":"衣服" , "id" : "1" , "pid" : 0},

		{"name":"裤子" , "id" : "2" , "pid" : 0},

		{"name":"鞋子" , "id" : "3" , "pid" : 0},

		{"name":"衬衣" , "id" : "4" , "pid" : 1},

		{"name":"毛衣" , "id" : "5" , "pid" : 1},

		{"name":"内衣" , "id" : "6" , "pid" : 1},

		{"name":"大" , "id" : "10" , "pid" : 6},

		{"name":"大" , "id" : "11" , "pid" : 7},

		{"name":"大" , "id" : "7" , "pid" : 4},

		{"name":"中" , "id" : "8" , "pid" : 4},

		{"name":"小" , "id" : "9" , "pid" : 4}

	];//IE下 最后一个数组不能给逗号,否则会多算一条

	var classifySelect = {

		treeRoot : document.getElementById("classifyTree"),//dom树根

		btn : document.getElementById("cid1"),

		btnText : document.getElementById("cid1Text"),

		btnClick : document.getElementById("classifyClick"),

		json : this.json,

		rootId : 0,//一级分类ID

		//根据json建立dom树

		setDomTree : function(){

			function creatEl(name){return document.createElement(name);}//创建标签

			var ul = creatEl("ul");

			//先建立根节点

			for(var i=0;i<this.json.length;i++){

				if(this.json[i].pid==this.rootId){

					var li =  creatEl("li");

					var span = creatEl("span");

					span.alt = this.json[i].id;

					span.innerHTML = this.json[i].name;

					li.appendChild(span);

					ul.appendChild(li);

					this.json.splice(i,1);//已经载入页面删除当前数组

					i--;//数组删除，下次循环继续查询当前位置

				}

			}

			this.treeRoot.appendChild(ul);

			this.addNodes(this.treeRoot.getElementsByTagName("ul")[0]);//获取插入的根ul,再查询是否有子类

		},

		//查询是否还有子分类，有则添加

		addNodes : function(pUl){//parent ul

			function creatEl(name){return document.createElement(name);}//创建标签

			var li = pUl.getElementsByTagName("li");

			/*

			遍历li。特别注意：由于下个for循环条件满足添加了子类后，pUl（也就是根ul）中便添加了li,li.length会改变。

			新添加的li永远在当前指针节点之后，所以不会冲突或者遗漏，而且能够在此循环结束后完成整个dom树

			*/

			for(var i=0;i<li.length;i++){

				var pid = parseInt(li[i].getElementsByTagName("span")[0].alt);//根据span的title存储的ID，查找json队列里是否还有子类//alert(typeof(pid));

				var ul = creatEl("ul");

				var isExist = false;//是否存在子类

				for(var j=0;j<this.json.length;j++){//遍历json，

					if(this.json[j].pid == pid){//pid相同，添加节点到pUl

						var newLi =  creatEl("li");

						var newSpan = creatEl("span");

						newSpan.alt = this.json[j].id;

						newSpan.innerHTML = this.json[j].name;

						newLi.appendChild(newSpan);

						ul.appendChild(newLi);

						this.json.splice(j,1);

						j--;

						isExist = true;

					}

				}

				if(isExist){

					li[i].appendChild(ul);

				}

			}

		},

		//查找分类

		seekClassify : function(){

			var self = this;

			//点击触发分类显示

			this.btnClick.onclick = function(){

				self.treeRoot.style.display = "block";

				self.nextClassify(self.treeRoot,"block");//显示根分类

			}

		},

		//绑定事件，隐藏和显示下级分类

		bindHover : function(){

			var self = this;

			var li = self.treeRoot.getElementsByTagName("li");//获取所有li

			//绑定根

			var root =self.treeRoot.getElementsByTagName("ul")[0];

			root.onmouseover= function(){

				self.nextClassify(self.treeRoot,"block");

			}

			root.onmouseout = function(){

				self.nextClassify(self.treeRoot,"none");

			}

			for(var i=0;i<li.length;i++){

				li[i].onmouseover = function(){

					if(self.isNextClassify(this)){

						self.nextClassify(this,"block");

					}

				}

				li[i].onmouseout = function(){

					if(self.isNextClassify(this)){

						self.nextClassify(this,"none");

					}

				}

			}

		},

		//显示或者隐藏下级分类

		nextClassify : function(self,status){

			var ul = self.getElementsByTagName("ul")[0];

			ul.style.display = status;

		},

		//检查是否有下级分类，如果没有可以选择

		isNextClassify : function(li){

			var self = this;

			if(li.getElementsByTagName("ul")[0]){

				return true;

			}else{

				li.getElementsByTagName("span")[0].onclick = function(){//绑定选择事件

					self.btn.value = this.alt;

					self.btnText.value = this.innerHTML;

					//document.getElementById("cid2").value = self.titlePlace;//绑定到保存草稿input

					self.nextClassify(self.treeRoot,"none");//选择完毕隐藏

				}

				return false;

			}

		},

		init : function(){

			this.setDomTree();

			this.seekClassify();

			this.bindHover();

		}

	}

	classifySelect.init();

</script>

</html>

JS分类选择插件的更多相关文章

js 颜色选择插件
COLPICK是一款非常的轻小,无需图片就可以实现颜色选择器的jquery插件,只用 JS 和 CSS 就实现了全部功能,而且非常直观,类似Photoshop的界面,使用方便.颜色的明暗很容易自定义, ...
4个好用的JS联动选择插件
jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...
【JS】一款好用的JS日历选择插件【bootstrap-datetimepicker.js】
1.插件名称:bootstrap-datetimepicker.js,下载地址:上Github下载或者下面链接 2.效果图: 3.使用方法:里面有Demo 链接: https://pan.baidu. ...
纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
纯原生js移动端日期选择插件
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...
移动设备日期选择插件（基于JQUERY）
上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...
日期时间范围选择插件:daterangepicker使用总结
分享说明: 项目中要使用日期时间范围选择对数据进行筛选;精确到年月日时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layu ...
原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

随机推荐

大话设计模式Python实现-职责链模式
职责链模式(Chain Of Responsibility):使多个对象都有机会处理请求,从而避免发送者和接收者的耦合关系.将对象连成链并沿着这条链传递请求直到被处理下面是一个设计模式的demo: ...
分析FAT32内部结构-入门篇-
FAT32(File Allocation Table)是一种32位的FAT文件系统,微软在1996年8月发布. FAT32的数字32是下面会讲到的FAT中每个表项的长度. 磁盘(硬盘)是数据的载体, ...
《细说PHP》第四版样章第18章数据库抽象层PDO 1
现在,如果你已经能熟练地使用MySQL客户端软件来操作数据库中的数据,就可以开始学习如何使用PHP来显示和修改数据库中的数据了.PHP提供了标准的函数来操作数据库.在PHP 5以上的版本中可以使用My ...
js的promise
转载自: https://segmentfault.com/a/1190000007032448#articleHeader16 一前言本文主要对ES6的Promise进行一些入门级的介绍.要想学 ...
定时任务之SpringSchedule的注意事项
在我们现在的项目中,或多或少的都会涉及到定时任务,Spring在3.0之后引入了SpringSchedule,这让我们在使用Spring的时候,可以很容易的整合SpringSchedule.但是好用归 ...
DVR登录绕过漏洞_CVE-2018-9995漏洞复现
DVR登录绕过漏洞_CVE-2018-9995漏洞复现一.漏洞描述此漏洞允许攻击者通过修改”Cookie:uid=admin”之后访问特定DVR的控制面板,返回此设备的明文管理员凭证. 二.影响软 ...
SpringBoot源码解析系列文章汇总
相信我,你会收藏这篇文章的本篇文章是这段时间撸出来的SpringBoot源码解析系列文章的汇总,当你使用SpringBoot不仅仅满足于基本使用时.或者出去面试被面试官虐了时.或者说想要深入了解一下 ...
剑指offer 14：调整数组顺序使奇数位于偶数前边
题目描述输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 解题思路题目中要求 ...
iOS 应用程序启动时要做什么
当您的应用程序启动(无论是在前台或后台),使用您的应用程序委托application:willFinishLaunchingWithOptions:和application:didFinishLaun ...
TypeScript 学习笔记（三）
类: 1.TypeScript 是面向对象的 JavaScript,类描述了创建的对象共同的属性和方法 2.类通过关键字 class 声明,使用 extends 关键字进行继承 3.在引用一个类成员时 ...

JS分类选择插件

JS分类选择插件的更多相关文章

随机推荐

热门专题