layui-樹形下拉選擇器

官網地址：https://fly.layui.com/extend/treeSelect/

效果：

使用示例

<input type="text" id="tree" lay-filter="tree" class="layui-input">

js

<script>
    layui.use(['treeSelect','form'], 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 // 是否開啟：true/false
                  },
                   line: 
              { // 連接線
                       enable: true // 是否開啟：true/false
                   }
       },
            // 點擊回調
            click: function(d){
                console.log(d);
            },
            // 加載完成后的回調函數
            success: function (d) {
            //選中節點，根據id篩選
            //treeSelect.checkNode('tree', 3);
            //獲取zTree對象，可以調用zTree方法
            //var treeObj = treeSelect.zTree('tree');
            //刷新樹結構
            //treeSelect.refresh();
            }
        });
    });
</script>

實際使用post方法

  treeSelect.render({
            // 選擇器
            elem: '#tree',
            // 數據
            data: '/api/XX/XX',
            // 異步加載方式：get/post，默認get
            type: 'post',
            // 占位符
            placeholder: '',
            // 是否開啟搜索功能：true/false，默認false
            search: false,
        　　style:{
        　　folder:{enable: false},
        　　line:{enable: true}
        　　},
            // 點擊回調
            click: function(d){
                $('#tree').val(d.current.code);
            },
            // 加載完成后的回調函數
            success: function (d) {
            //選中節點，根據id篩選
            //treeSelect.checkNode('tree', 3);            
            }
        });