树形结构下拉搜索框

最新推荐文章于 2023-12-26 12:22:38 发布

工程师123456

最新推荐文章于 2023-12-26 12:22:38 发布

阅读量547

点赞数

分类专栏： layui 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45473377/article/details/110669779

版权

layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

结果图:

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;

    //配置roomserch属性信息
    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,
            // 异步加载方式：get/post，默认get
            type: options.type,
            // 占位符
            placeholder: '请选择房屋结构',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function (d) {
                if (options.callBack != '') {
                    //调用自定义方法
                    options.callBack(d);
                } else {
                    $(options.elem).val(d.current.id);
                }
            },
            // 加载完成后的回调函数
            success: function (d) {
                //获取zTree对象，可以调用zTree方法
                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();
})