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

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查询初始化方法

	
		
		
		
		
		
		
		
		
		
	
	
		
			
				
			
			*********
			
		
		
	

7.总结：

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

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

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

8.至读者：

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