jquery-easyui的combotree组合树结合bootstrap的tagsinput

最新推荐文章于 2024-06-12 16:34:59 发布

潇潇土鳖

最新推荐文章于 2024-06-12 16:34:59 发布

阅读量1.3k

点赞数 1

分类专栏： js 文章标签： combotree tagsinput 下拉框树结构输入标签

本文链接：https://blog.csdn.net/qq_15693777/article/details/80539387

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.情景介绍：

最近使用到一个小功能，就是需要一个下拉框，支持多选的树结构，在选中后，会在输入框中生成标签块。描述不多说，上图：

注：原bootstrap中的tagsinput框是支持直接在输入框中删除和添加的（不支持直接点击标签块进行修改的，有其他的版本tagsinput插件支持，这里不多说），我改了源码，支持屏蔽这两个功能，达到只通过下拉框控制删除和添加的目的，当然，只要不设置我自己添加的那两个属性，原来的功能还是存在的，不影响使用

图片中的树结构内容随便写的，请忽略。

2.使用的插件或js框架：

目前的效果使用到了jquery，bootstrap，插件是easyui-combtree 和 bootstrap-tagsinput；

其中，这两个插件在一起使用，直接就会产生效果吗？没有这么简单，但是，也是比较容易实现的。本人修改了一下点tagsinput插件的源码，加了一点判断和标签属性，不影响原有的功能使用。（隐约记得这个插件对jquery的版本要求是1.11以上，记得不太清了，大伙自己检测一下吧）

3.本人的测试代码的结构

对，引用就是这么简洁任性，不需要其他的东西了

4.demo压缩包链接

demo压缩包（写这个文章的时候，刚刚上传的压缩包，还未审核，如果链接不过去的，可以往下看，自己修改插件代码也可以解决问题）

5.修改插件源码的部分（注：插件源码中没有这些功能或者只是我没有发现）：

A.源码添加只读功能，不可在输入框编辑（可能有其他更好的办法，目前比较懒，就这样写了）

B.源码添加是否可以删除标签的属性，设置为false，即不可删除，不添加这个属性，或者设置为true，效果与源码中的一样

C.demo中设置属性，oncheck回调方法中设置下拉框与输入框的联动

6.代码：

注：初始化combotree时，json数据也可以通过标签中的data-options属性添加，上图左边文件中有.json文件，代码中没有写出来，读者可自行百度API查询初始化方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/easyui.css" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-tagsinput.css" />
		<script type="text/javascript" src="js/jquery-2.1.1.js" ></script>
		<script type="text/javascript" src="js/jquery.easyui.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/bootstrap-tagsinput.js" ></script>
	</head>
	<body>
		<style>
			.tree-title{
				font-size: 16px;
				font-family: "new york";
			}
			.tree-icon.tree-folder{
				/*display: none;*/
			}
			.tree-icon.tree-file {
				/*display: none;*/
			}
		</style>
			<select id ="selectDiv" class="easyui-combotree" 
				multiple="true" onlyLeafCheck="true"  animate="true" 
				 style="width:280px;" data-options="url:'tree_data1.json',method:'get'">
				
			</select>
			<span>*********</span>
			<input id="inputdiv" style="width: 280px;" type="text"/>
		<!--<button οnclick="myclick()">点击</button>-->
		<script>
				var data =[{
						"id":1,
						"text":"数据类型",
						"checked":false,
						"children":[{
								"id":"A",
								"text":"Photos"
							},{
								"id":12,
								"text":"Friend"
							},{
								"id":11,
								"text":"Wife"
							},{
								"id":113,
								"text":"Company"
							},{
								"id":13,
								"text":"index.html"
							},{
								"id":14,
								"text":"about.html"
							},{
								"id":15,
								"text":"welcome.html"
							}]
						},{
							"id":2,
							"text":"机构类型",
							"children":[{
								"id":221,
								"text":"Intel"
							},{
								"id":122,
								"text":"Java",
								"attributes":{
									"p1":"Custom Attribute1",
									"p2":"Custom Attribute2"
								}
							},{
								"id":123,
								"text":"Microsoft Office"
							},{
								"id":124,
								"text":"Games",
								"checked":true
							}]
						}]
		
		$("#inputdiv").combotree({
			 multiple: true,  
                    // required : true,  
                    checkbox : true,  
                    onlyLeafCheck : true,//只能叶子节点才能勾选  
                    cascadeCheck:false,
                    // url : "",  
                    data:data,
                    onLoadSuccess : function(node, data){  
                     	bindEvt();
                    } ,
                    onCheck:function(node, data){
                   		if(data){
                   			$(".bootstrap-tagsinput").append('<span class="tag label label-info">'+node.text+'</span>')         
                   		}else{
                   			var nodes =$(".bootstrap-tagsinput").children();
                   			$.each(nodes,function(index,item){
                   				if(item.innerHTML==node.text){
                   					item.remove();
                   				}
                   			})
                   		}
                   		
                    }
		})
		
		function bindEvt(){
			$("#_easyui_textbox_input1").attr("data-role","tagsinput");
            $("#_easyui_textbox_input1").attr("tag-read","readonly");
            $("#_easyui_textbox_input1").attr("is-delete",false);
		}
		
		</script>
	</body>
</html>

7.总结：

当然，这个小功能本身也是很简单的，写出来的目的就是让急着用的人更加方便快捷。目前这个效果本人用到项目上了，值得注意的是，如果项目本省引用过多的js框架或者插件，可能导致

$("#_easyui_textbox_input1").attr("data-role","tagsinput");

这个代码不起作用（有可能是冲突），本人提供的一个笨方案，在此代码后动态引用tagsinput插件js。

8.至读者：

本人js技术不怎么样，如果大神有不同意见或者建议的，欢迎斧正，共同学习！

潇潇土鳖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-easyui的combotree组合树结合bootstrap的tagsinput

1.情景介绍：最近使用到一个小功能，就是需要一个下拉框，支持多选的树结构，在选中后，会在输入框中生成标签块。描述不多说，上图：注：原bootstrap中的tagsinput框是支持直接在输入框中删除和添加的（不支持直接点击标签块进行修改的，有其他的版本tagsinput插件支持，这里不多说），我改了源码，支持屏蔽这两个功能，达到只通过下拉框控制删除和添加的目的，当然，只要不设置我自己添加的那两个...
复制链接

扫一扫

专栏目录