下拉选择显示树状菜单(input和bootstrap-treeview实现)

select下拉框本身没办法显示树状结构,为达到以下效果,使用input和bootstrap-treeview来实现
下拉框
从后台ajax获取树状菜单数据后,在input下加上div放treeview组件。
具体代码如下:

html部分:

<div class="form-group">
	<label class="col-lg-2 col-md-2 control-label">上级目录</label>
	<input id="selectCatalog"  name="selectCatalog" type="text" autocomplete="off" class="col-lg-10 col-md-2 form-group" onclick="$('#tree').show()" style="width: 250px;height: 31px;margin-left: 10px; margin-bottom:0px" tabindex="2">
	<div id="tree" style="display: none; position:absolute; z-index:1010; background-color:white; margin-left:95px; width: 250px"></div>
</div>

重点是style里面的

 display:none;position:absolute;z-index:1010

position:absolute使treeview能够显示时不影响其他元素位置
z-index:1010 使treeview浮在最上层

js部分:

$.ajax({
		type: "post",
		url: "/web/catalog/queryCatalogList",//对应后台的post
		contentType:'application/json',
		async: false,
		data: JSON.stringify({"helpId":"hello"}),//随便往后台传一个值
		success:function(result){
		    if(result!=null){
				$("#selectCatalog").click(function() {
					var options = {
						levels : 1,
						data : result.data.helpRecordVO,
						onNodeSelected : function(event, data) {
							$("#selectCatalog").val(data.text);
							$("#tree").hide();//选中树节点后隐藏树
						}
					};
					$('#tree').treeview(options);
				});
		    }
		},
		error:function(){
			parent.alertShow('error','下拉菜单加载失败');
		}
	})
展开阅读全文

没有更多推荐了,返回首页