bootstrap input 下拉树 下拉菜单 下拉列表

效果图：

如图，显示了整个树形图，加号可以收缩子节点，可以使用tag属性可以在后面显示存在几个子节点，我这边没有使用这个tag属性，这个input下拉树形图，需要导入bootstrap-treeview.js和bootstrap-treeview.css文件，这边附上下载链接http://download.csdn.net/detail/qq_34117825/9734853，也可以在网上搜索获得，流程就是先定一个input组件，然后再添加一个div默认隐藏，之后点击，显示树形下拉列表，不多说，上干货！

代码部分：

<input type="text" id="txt_departmentname" name="txt_departmentname" class="form-control" value="" οnclick="$('#treeview').show()" placeholder="分类名称">
						<div id="treeview" style="display: none;">

	var data1 = [];

		$(function() {
			$.ajax({
				type : "post",
				url : "/receiverShow/findTree.action",
				success : function(data, status) {
					if (status == "success") {
						data1 = eval("[" + data + "]");
					}
				},
				error : function() {
					toastr.error('Error');
				},
			});
		});

		function buildDomTree() {
			var data = [];
			var root = "所有分类";
			function walk(nodes, data) {
				if (!nodes) {
					return;
				}
				$.each(nodes, function(id, node) {
					var obj = {
						id : id,
						text : node.name != null ? node.name : root
					// 										tags : [ node.isLeaf == true ? node.
					// 												+ ' child elements'
					// 												: '' ]
					};
					if (node.isLeaf = true) {
						obj.nodes = [];
						walk(node.children, obj.nodes);
					}
					data.push(obj);
				});
			}

			walk(data1, data);
			return data;
		}

		$("#txt_departmentname").click(function() {
			var options = {
				bootstrap2 : false,
				showTags : true,
				levels : 5,
				showCheckbox : true,
				checkedIcon : "glyphicon glyphicon-check",
				data : buildDomTree(),
				onNodeSelected : function(event, data) {
					$("#txt_departmentname").val(data.text);
					$("#treeview").hide();
				}
			};

			$('#treeview').treeview(options);
		});