结果图:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5f606797a86c94b79c874711f53e22ef.png)
HTML
<div class="layui-inline">
<input type="text" class="layui-input" id="structureId" lay-filter="tree" />
</div>
js
layui.define(['jquery', 'treeSelect'], function (exports) {
"use strict";
var MOD_NAME = 'roomsearch',
$ = layui.jquery,
treeSelect = layui.treeSelect;
var Roomsearch = function () {
this.v = '1.1.0';
this.config = {
elem: "#structureId",
data: 'v3/charge/baseStructure/getBaseStructureZTree',
type: 'get',
callBack: '',
};
};
Roomsearch.prototype.init = function (options) {
var _this = this;
$.extend(true, _this.config, options);
_this.render(_this.config);
}
Roomsearch.prototype.getInstance = function () {
return new Roomsearch();
};
Roomsearch.prototype.render = function (options) {
treeSelect.render({
elem: options.elem,
data: options.data,
type: options.type,
placeholder: '请选择房屋结构',
search: true,
click: function (d) {
if (options.callBack != '') {
options.callBack(d);
} else {
$(options.elem).val(d.current.id);
}
},
success: function (d) {
var treeObj = treeSelect.zTree('tree');
treeSelect.refresh('tree');
}
});
}
var Roomsearch = new Roomsearch();
exports(MOD_NAME, Roomsearch);
})
layui.use(['table', 'jqbind','roomsearch'], function () {
var table = layui.table,
jqbind = layui.jqbind,
form= layui.form,
roomsearch= layui.roomsearch;
roomsearch.init();
})
引入ZTree组件地址
文档和下载