jq动态创建多级联动单选多选插件使用

最新推荐文章于 2024-08-08 08:21:46 发布

furfur-jiang

最新推荐文章于 2024-08-08 08:21:46 发布

阅读量1.7k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44523860/article/details/104637805

版权

JavaScript 专栏收录该内容

86 篇文章 5 订阅

订阅专栏

jq动态创建多级联动单选多选的插件的使用
首先说明这个插件是jq插件库下载的，这是其插件链接：http://www.jq22.com/jquery-info20589

在这里插入图片描述
我主要要该插件进行以下修改：

原插件使用的jq版本过低，目前jq3.4.1废弃了原jq的size()方法
原插件点击一级选项时会导致后面的全部被清除，修改后不会有此问题
点击多选后动态弹出的子元素点击x删除后，其上一级目录的状态没有清除，目前我只对最后一级的选中状态进行修正，但由于作者重新根据选中的元素进行选中状态的修改，所以只是效果延迟（效果触发在下一次多选框点击），不会出现错误，修改可有可无。
如果item的属性有is_select为true，那么默认也为选中态，有bug，即使选中态，后面也会被清空，修改后不会有此问题
原作者几乎没有注释，我多次阅读，写下注释帮助理解，欢迎勘误。

如何使用此多级联动

极其方便

在html需要的地方加

<div id='treebox' style="min-width:502px;max-width:910px;margin: 100px auto;">
</div>

增加tntreebox.js文件和tntreebox.css文件，jq

获取方法：关注公众号后台回复联动即可领取
ps：回复插件可以领取jq插件库的一些需付费的，收藏前排的插件，价值挺高的，仅作学习分享，侵删。

在这里插入图片描述

为了更好模拟多联级效果，tntreebox.js中的data数据太长，我做了删除，具体查看文件完整版


var data = [
];

var _tnTreebox = function(){};
var _tnTreebox_id = 0;
//_tnTreebox原型上增加方法
_tnTreebox.prototype = {
	//初始化数据
	data:null,//三联级所有对象
	dom_id:null,
	name:null,
	old_selected:null,//默认选中状态 
	width:0,
	//初始化方法
	//调用： tnTreeBox('treebox','checkboxname',data,['o_1','o_2']);
	init:function(dom_id,name,data,selected){
		this.dom_id = dom_id;
		this.data = data;
		this.name = name;
		this.old_selected = selected;
	},
	//动态创建初始页面
	makeHtml:function(){
		var _data = {};
		for(var i in this.data){
			//for..in循环遍历data的每一个对象，并赋值给d
			var d = this.data[i];
			//hasOwnProperty()判断对象是否包含特定的自身（非继承）属性。
			if(!d.hasOwnProperty('parent_id')){
				//第一级的数据，没有父节点
				d.parent_id = 0;
			}
			//区分每一级每一组的方法是parent_id，第一级为0
			
			//每一级一开始if内创建一个数组，并将第一个值放入，再走else将同一级的全部对象放入
			if(typeof(_data[d.parent_id]) != 'object'){
				//将第一个每一级的数据赋值给_data
				_data[d.parent_id] = [d];
			}else{
				// 将data[i]放入_data的d.parent_id属性中
				_data[d.parent_id].push(d);
			}
		}
		//console.log(_data)  //输出按父节点分类的数组

		var html= "";

		for(var parent_id in _data){
			var list = _data[parent_id];
			// console.log(list)//按上面data顺序打印数组

			var html_list = "";//装子类html
			for(var j in list){
				var item = list[j];
				//$.inArray() 函数用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1）
				//被选中且在数组中可以找到，则默认为选中态
				if(this.old_selected&&$.inArray(item.id,this.old_selected)!=-1){
					var checked = " checked='checked'";
				}else{
					var checked = "";
				}
				
				if(checked==''){
					try{
						if(item.is_select){
							checked = " checked='checked'";
						}
					}catch(err){
					}
				}

				var _class = "";
				// console.log(_data[item.id])//打印子类，为什么？
				//_data[item.id]是对象即为子类
				if(typeof(_data[item.id]) == 'object'){
					//增加一个类属性children，注意空格隔开
					_class+=" children";
				}
				
				try{
					if(item.is_hidden){
						_class+=" hide2";
					}
				}catch(err){
				}
				
				//补充class用来装上面的类
				if(_class){
					_class = " class='"+_class+"'";
				}
				//_tnTreebox_id
				_tnTreebox_id++;
				var id = 'treebox_'+_tnTreebox_id; 
				//多选框
				var box = "<input"+checked+" type='checkbox' id='"+id+"' name='"+this.name+"' value='"+item.id+"' />";
				try{
					//没有多选框，自行在data中定义，只有最后一项才有多选框
					if(item.no_box){
						box = '';
					}
				}catch(err){

				}
				//三级的box叠加
				html_list+="<li"+_class+" v="+item.id+"><em>"+box+"</em><label>"+item.name+"</label><span></span></li>";
			}


			var _class = 'box';
			//0是一级，其他的是子集
			if(parent_id==='0'){
				_class += " root";
			}else{
				_class += " hide";
			}


			if(_class){
				_class = " class='"+_class+"'";
			}
			//<li class=' children' v=o_1><em></em><label>基础数据管理</label><span></span></li>叠加
			html_list = "<div parent_id="+parent_id+_class+"><ul>"+html_list+"</ul></div>";
			// console.log(html_list)
			
			html+=html_list;//全部html_list叠加
		}


		//header存放选中的多选框内容，list存放动态生成的全部
		html = "<div class='header'></div><div class='list'>"+html+"</div>";

		//给id为treebox的div加上类tntreebox
		$("#"+this.dom_id).addClass('tntreebox').html(html);
		//获取宽度
		this.width = $("#"+this.dom_id).width();
		var that = this;
		$("#"+this.dom_id+" .children").on('click',function(){
			that.showChildren(this);
		});
		//当元素的值发生改变时，会发生 change 事件。
		$("#"+this.dom_id+" :checkbox").on('change',function(){
			that.showChecked();
		});
		//？
		that.showChecked();
	},


	//点击触发事件
	showChildren:function(e){
		// console.log(e)//获取被点击元素
		var li = $(e);
		//cur，当前选中的元素
		li.parent().find('.cur').removeClass('cur');
		li.addClass('cur');
		//attr：找到每一个匹配元素的一个或多个属性。
		//找到一级盒子
		if(li.parent().parent().attr('class')=="box root"){
			var liV = li.attr("v");
			// 子元素取消颜色
			//让子类全部失效,注释掉之后，点击一级父类，子类还能继续保持选中状态
			// li.siblings().removeClass('selected');
			// $(".list").find(':checkbox').prop('checked',false);
			// li.parent().parent().parent().prev().html('');
			// $(".list li[v^=" + liV + "]").removeClass('selected');
		}

		//获得点击元素的id，id存储在v里面
		var id = li.attr('v');
		var col = li.parent().parent().attr('col');
		// console.log(col) 1/undefined
		//如果col==undefined，即一级col=0
		if(!col){
			col = 0;
		}
		var _col = col;
		// console.log(_col)  0/1
		//1代表着第二级
		while(1){
			_col++;
			//一级被点击后给其二级增加col=1，二级被点击后给其三级增加col=2
			var o = $("#"+this.dom_id+" div[col="+_col+"]");
			// console.log(o)
			if(o.length>0){
				//点击一级后隐藏其两级子类
				o.hide();
			}else{
				break;
			}
		}
		//点击后清除隐藏，并展示
		$("#"+this.dom_id+" div[parent_id="+id+"]").attr('col',col*1+1).removeClass('hide').show();
	},
	//多选框每次被点击触发
	showChecked:function(){
		var html = '';
		//not：去除所有与给定选择器匹配的元素
		$("#"+this.dom_id+" input:checked").not('.hide2 input:checked').each(function(i,e){
			// console.log(e) //勾选的那个多选框,e等同于this
			//next：找到每个段落的后面紧邻的同辈元素中类名为label的元素。
			var text = $(this).parent().next('label').html();
			var id = $(this).val();
			//动态的为选中元素创建div，显示选中元素
			html += "<div>"+text+"<span v="+id+">x</span></div>";
		});
		if(html){
			html+=" <a>清空</a>";
		}
		//将创建好的div放入类名header的div里面
		$("#"+this.dom_id+" .header").html(html);
		var thats = this
		//为x添加点击事件
		$("#"+this.dom_id+" .header span").on('click',function(){
			var obj = $(this);//$(this)是被点击的span的对象
			var id = obj.attr('v');
			//obj.parent().parent() 是header, length<2,因为是header也是div，其目的是清除header这个div内部的div
			if(obj.parent().parent().find('div').length<2){
				//移除“清空”按钮
				obj.parent().parent().find('a').remove();
			}
			//prop：获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

			//将三级的选中状态取消
			var checked = obj.parent().parent().next(".list").find(':checkbox[value='+id+']')
			checked.parent().parent().removeClass('selected');
			

			//将三级的多选框的对应的元素checked移除
			var p = checked.prop('checked',false);
			//移除被点击x的div
			obj.parent().remove();
		});

		var that = this;
		//“清空”按钮被点击后，全部移除
		$("#"+this.dom_id+" .header a").on('click',function(){
			var obj = $(this);
			obj.parent().next('.list').find(':checkbox').prop('checked',false);
			obj.parent().html('');
			$("#"+that.dom_id+" .selected").removeClass('selected');
		});
		

		//将原来的选中态，现在不是选中态的清除，下面会为真正被选中的重新添加selected样式
		$("#"+this.dom_id+" .selected").removeClass('selected');

		//选中背景加深
		$("#"+this.dom_id+" input:checked").each(function(){
			//为三级li添加selected事件
			that.selected($(this).parent().parent());
		});

	},
	//selected事件
	selected:function(obj){
		$(obj).addClass('selected');
		//寻找三级的box
		var top_div = $(obj).parent().parent();
		var parentid = top_div.attr('parent_id');
		// console.log(parentid)
		//使其上一级也为选中态，并递归
		if(parentid){
			// console.log($("#"+this.dom_id+" li[v="+parentid+"]"))
			this.selected("#"+this.dom_id+" li[v="+parentid+"]");
		}
	}
};
//最后归纳到tnTreeBox方法
function tnTreeBox(id,name,data,selected){
	var obj = new _tnTreebox();//new一个_tnTreebox的实例
	obj.init(id,name,data,selected);//初始化
	obj.makeHtml();//绘制
	console.log(window.pathname)
}