formSelect.js 下拉选择器使用文档

快速使用

下载地址： Gitee(码云)

使用文档： Gitee Page

使用方式：

1. 引入layui.js
<script src="../assets/layui/layui.js"></script>

2. 在页面上添加input
<input type="text" id="tree" lay-filter="tree" class="layui-input"<

3. 加载formSelect模块
layui.config({
    base: "../module/"
}).extend({
    treeSelect: "treeSelect/treeSelect"
});

4. 初始化
layui.use(["treeSelect"], function () {
    var treeSelect = layui.treeSelect;

    treeSelect.render({
        // 选择器
        elem: '#tree',
        // 数据
        data: 'data/data3.json',
        // 异步加载方式：get/post，默认get
        type: 'get',
        // 占位符
        placeholder: '修改默认提示信息',
        // 是否开启搜索功能：true/false，默认false
        search: true,
        // 一些可定制的样式
        style: {
            folder: {
                enable: true
            },
            line: {
                enable: true
            }
        },
        // 点击回调
        click: function(d){
            console.log(d);
        },
        // 加载完成后的回调函数
        success: function (d) {
            console.log(d);
//                选中节点，根据id筛选
            treeSelect.checkNode('tree', 3);

            console.log($('#tree').val());

//                获取zTree对象，可以调用zTree方法
           var treeObj = treeSelect.zTree('tree');
           console.log(treeObj);

//                刷新树结构
           treeSelect.refresh('tree');
        }
    });
});
            

参数配置

样式定制项

支持一些简单的样式定制，后期版本将引入三方图标库并支持图标的自定义

treeSelect.render({
    // 选择器
    elem: '#tree',
    // 数据
    data: 'data/data3.json',
    style: {
        folder: { // 父节点图标
            enable: true // 是否开启：true/false
        },
        line: { // 连接线
            enable: true // 是否开启：true/false
        }
    },
});
            

点击回调

树节点被点击时触发，返回一个object参数，携带三个成员：

treeSelect.render({
    // 选择器
    elem: '#tree',
    // 数据
    data: 'data/data3.json',    
    click: function(d){
        console.log(d);
        console.log(d.treeId); // 得到组件的id
        console.log(d.current); // 得到点击节点的treeObj对象
        console.log(d.data); // 得到组成树的数据
    },
});
            

渲染完成后回调

组件渲染完成后触发，返回一个object参数，携带两个成员：

treeSelect.render({
    // 选择器
    elem: '#tree',
    // 数据
    data: 'data/data3.json',    
    success: function(d){
        console.log(d);
        console.log(d.treeId); // 得到组件的id
        console.log(d.data); // 得到组成树的数据
    },
});
            

选中节点

由于该组件采用异步加载机制，因此该方法应保证在渲染完成后再执行

需要两个参数，分别为lay-filter的值、节点id（异步加载数据的id）

treeSelect.checkNode('tree', 3);
            

如果需要立即执行，例如更新时默认选中，应在success回调中执行

treeSelect.render({
    // 选择器
    elem: '#tree',
    // 数据
    data: 'data/data3.json',    
    success: function(d){
        treeSelect.checkNode('tree', 3);
    },
});
            

刷新树结构

由于该组件采用异步加载机制，因此该方法应保证在渲染完成后再执行

需要一个参数，即lay-filter的值

treeSelect.refresh('tree');
                

如果需要立即执行，应在success回调中执行

treeSelect.render({
    // 选择器
    elem: '#tree',
    // 数据
    data: 'data/data3.json',    
    success: function(d){
        treeSelect.refresh('tree');
    },
});
            

获取ZTree对象

由于该组件采用异步加载机制，因此该方法应保证在渲染完成后再执行

需要一个参数，即lay-filter的值

var treeObj = treeSelect.zTree('tree');
console.log(treeObj);
                

如果需要立即执行，应在success回调中执行

treeSelect.render({
    // 选择器
    elem: '#tree',
    // 数据
    data: 'data/data3.json',    
    success: function(d){
        var treeObj = treeSelect.zTree('tree');
        console.log(treeObj);
    },
});
            

销毁formSelect组件

需要一个参数，即lay-filter的值

treeSelect.destroy('tree');
            

如果需要立即执行，应在success回调中执行

treeSelect.render({
    // 选择器
    elem: '#tree',
    // 数据
    data: 'data/data3.json',    
    success: function(d){
        treeSelect.destroy('tree');
    },
});
            

撤销选中的节点

需要两个参数，分别为lay-filter的值、回调函数，其中回调函数允许不传

treeSelect.revokeNode('tree', function(d){
    console.log(d);
    console.log(d.treeId);
});
            

如果需要立即执行，应在success回调中执行

treeSelect.render({
    // 选择器
    elem: '#tree',
    // 数据
    data: 'data/data3.json',    
    success: function(d){
        treeSelect.revokeNode('tree', function(d){
            console.log(d);
            console.log(d.treeId);
        });
    },
});
            

写在最后

一个人的力量总是有限的，不能满足所有人的要求。
如果您对该组件感兴趣或是觉得代码有改进与调整的地方，欢迎fork。