layui实现在input输入框中展示tree

 

js相应的实现代码

注：获取treeLsit数据，里面的字段需要存放“id”、“pId”、“name”属性

var path = "";
var $;
var orgNodes = []; //机构结点
layui.use(['table','form','layer', 'tree'], function() {
	$ = layui.jquery;
	var tree = layui.tree;
	
	//组织机构
	$.ajax({  
        url : path+"/OrganizeController/getOrgTree.do",
        type:'POST',  
        async:false,  
        success:function(msg){  
            var obj = eval("("+msg+")");
            orgNodes = obj;
        }  
    });  
    tree({
        elem: "#classtree",
        nodes: orgNodes,
        click: function (node) {
        	console.log(node);
            var $select = $($(this)[0].elem).parents(".layui-form-select");
            $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='orgId']").val(node.id);
            $select.find(".layui-select-title span").html(node.name).end().find("input:hidden[name='orgName']").val(node.name);
        }
    });
    $(".downpanel").on("click", ".layui-select-title", function (e) {
        $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
        $(this).parents(".downpanel").toggleClass("layui-form-selected");
        layui.stope(e);
    }).on("click", "dl i", function (e) {
        layui.stope(e);
    });
});

 jsp相应的实现代码

<div class="layui-select-title">
	<span class="layui-input layui-unselect" id="treeclass">选择机构</span>
	<input type="hidden" name="orgId" value="">
	<i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit">
	<dd>
		<ul id="classtree"></ul>
    </dd>
</dl>