LayUI拓展組件：TreeSelect樹形下拉選擇器

 

原文：https://gitee.com/sang93/treeselect

treeSelect.js：內容：

 

layui.define('tree', function (exports) {
    "use strict";

    var _MOD = 'treeSelect',
        treeData = {}, //全局樹形數據緩存
        $ = layui.jquery,
        win = $(window),
        TreeSelect = function () {
            this.v = '1.0.0';
        };

    /**
     * 初始化下拉樹選擇框
     */
    TreeSelect.prototype.render = function (options) {
        console.log(options);
            // elem
        var elem = options.elem,
            // 請求地址
            data = options.data,
            // ajax請求方式：post/get
            type = options.type,
            // 節點點擊回調
            click = options.click,
            // key.id: id對應的字段, key.pid: pid對應的字段, key.rootPid: 根節點的pid數值
            key = options.key,
            tmp = new Date().getTime(),
            treeInputId = 'treeSelect-input-' + tmp;

        var init = {
            tree: function () {
                $.ajax({
                    url: data,
                    type: type,
                    dataType: 'json',
                    success: function (d) {
                        treeData = d;
                        console.log(d);
                        layui.tree({
                            elem: '#treeSelect-ul-' + tmp,
                            nodes: d
                        });
                        init.removeLayTree();
                        init.setIndex(d, $(elem).next(), true);
                    }
                });
                return init;
            },
            removeLayTree: function () {
                $(elem).next().find('ul.layui-tree').remove();
            },
            setIndex: function (data, parentDom, isRoot) {
                var d = data;
                // 生成新的tree以便支持lay-index
                var tree = $('<ul>').addClass('layui-anim layui-anim-upbit');
                if (isRoot) {
                    tree.attr({
                        'id': 'treeSelect-ul-' + tmp
                    }).addClass('layui-tree layui-box');
                }
                for (var i = 0; i < d.length; i++) {
                    var obj = d[i];
                    var iSpread = '<i class="layui-icon layui-icon-triangle-r"></i>';
                    // 沒有子節點，不需要圖標
                    if (obj.children == null || obj.children.length == 0) iSpread = '';
                    var a = $('<a>');
                    var iBranch = '<i class="layui-icon layui-icon-file"></i>';
                    // 如果是根節點，不需要圖標
                    if (isRoot)  iBranch = '';
                    var cite = $('<cite>').html(obj.name);
                    // 獲取主鍵名稱
                    var id;
                    if (key != null && key.id != null){
                        id = obj[key.id];
                    } else {
                        id = obj.id;
                    }
                    var li = $('<li>').attr('lay-index', id).append(iSpread).append(a.append(iBranch).append(cite));
                    if (obj.children != null && obj.children.length > 0){
                        init.setIndex(obj.children, li, false);
                    }
                    tree.append(li);
                }
                parentDom.append(tree);
            },
            input: function () {
                $(elem).hide();
                var $treeDiv = $('<div>').attr({
                            id: 'treeSelect-div-'+ tmp
                        }).addClass('layui-treeselect layui-unselect layui-form-select'),
                    placeholder = $(elem).attr('placeholder'),
                    $treeTitle = $('<div class="layui-select-title">').attr('id', 'treeSelect-title-' + tmp),
                    value = $(elem).val(),
                    $treeInput = $('<input>').attr({
                        placeholder: placeholder,
                        readonly: 'readonly',
                        type: 'text',
                        value: value,
                        id: treeInputId,
                    }).addClass('layui-input layui-unselect').click(function () { }),
                    $treeUl = $('<ul>').addClass('layui-anim layui-anim-upbit layui-tree layui-box').attr({
                            id: 'treeSelect-ul-' + tmp,
                        });
                $(elem).after($treeDiv.append($treeTitle.append($treeInput).append('<i class="layui-edge"></i>')).append($treeUl));
                init.tree().titleToggle().spreadToggle().select();

                return init;
            },
            style: function () {
                var style = '<style>' +
                    '.layui-treeselect .layui-tree{' +
                    '   display: none;\
                        position: absolute;\
                        left: 0;\
                        top: 42px;\
                        padding: 5px 0;\
                        z-index: 999;\
                        min-width: 100%;\
                        border: 1px solid #d2d2d2;\
                        max-height: 300px;\
                        overflow-y: auto;\
                        background-color: #fff;\
                        border-radius: 2px;\
                        box-shadow: 0 2px 4px rgba(0,0,0,.12);\
                        box-sizing: border-box;' +
                    '}' +
                    '.layui-tree-branch{display: none;}' +
                    '.layui-treeselect .layui-tree li>i.layui-icon{cursor: pointer;}' +
                    '.layui-form-selected .layui-tree{display: inline-block}</style>'
                $('head').append(style);
            },
            titleToggle: function () {
                init.event('click', '#treeSelect-title-' + tmp, function () {

                    var $treeUl = $('#treeSelect-div-' + tmp);
                    if ($treeUl.hasClass('layui-form-selected')) {
                        $treeUl.removeClass('layui-form-selected').addClass('layui-unselect');
                    } else {
                        $treeUl.addClass('layui-form-selected').removeClass('layui-unselect');
                    }
                });
                return init;
            },
            spreadToggle: function () {
                init.event('click', '.layui-treeselect .layui-tree li>i.layui-icon', function (e) {
                    //防止冒泡，修復在layui的form中的兼容性問題：點三角形，錯誤的隱藏下拉框
                    e.stopPropagation();
                    var ul = $(this).parent().find('ul').eq(0),
                        down = 'layui-icon-triangle-d',
                        right = 'layui-icon-triangle-r';
                    if (!ul.hasClass('layui-show')){
                        ul.addClass('layui-show');
                        $(this).addClass(down).removeClass(right);
                    } else {
                        ul.removeClass('layui-show');
                        $(this).addClass(right).removeClass(down);
                    }
                });
                return init;
            },
            select: function () {
                init.event('click', '.layui-treeselect ul li a', function () {
                    var cite = $(this).find('cite').html();
                    $('#' + treeInputId).val(cite);
                    $(elem).attr('value', $(this).parent().attr('lay-index'));
                    $('#treeSelect-div-' + tmp).removeClass('layui-form-selected').addClass('layui-unselect');
                    if (click) {
                        // 獲取當前節點
                        var getThisNode = function(datas) {
                            var node = {};
                            for (var i = 0; i < datas.length; i++) {
                                var data = datas[i],
                                    name = data.name,
                                    href = data.href;
                                if (name === cite){
                                    node = data;
                                    break;
                                }

                                for (var j = 0; j < data.children.length; j++) {
                                    var child = data.children[j],
                                        cName = child.name;
                                    if (cName === cite) {
                                        node = child;
                                        break;
                                    }
                                }
                                
                            }
                            return node;
                        };
                        
                        click(getThisNode(treeData));
                    }
                });
                return init;
            },
            event: function (evt, elem, func) {
                $('body').on(evt, elem, func);
            }
        };
        init.input().style();
        return new TreeSelect();
    };

    /**
     * 設置提示文字
     * @param filter lay-filter屬性
     * @param title 需要顯示的提示內容
     * @returns {TreeSelect}
     */
    TreeSelect.prototype.setTitle = function (filter, title) {
        $('*[lay-filter='+ filter +']').next().find('input').attr('placeholder', title);
        return new TreeSelect();
    };

    /**
     * 選中節點
     * @param filter lay-filter屬性
     * @param id 選中的id
     */
    TreeSelect.prototype.checkNode = function (filter, id) {
        var o = $('*[lay-filter='+ filter +']'),
            ts = o.next(),
            tsInput = ts.find('input'),
            li = ts.find('ul.layui-tree li[lay-index]');
        li.each(function (i, el) {
            var index = $(el).attr('lay-index');
            if (index == id) {
                var title = $(el).find('cite').eq(0).text();
                tsInput.val(title);
                o.val(index);
                return false;
            }
        })
    };



    var treeSelect = new TreeSelect();
    //暴露接口
    exports(_MOD, treeSelect);
})

 

使用示例

<input type="text" id="pidSelect" lay-filter="pidSelect" placeholder="選擇父節點" class="layui-input">
 <script>  layui.use(['treeSelect'], function () {  var treeSelect= layui.treeSelect;   // 初始化下拉選擇器  treeSelect.render({  // css選擇器，推薦使用id  elem: '#pidSelect',  // 請求地址  data: '/system/menu/layui/tree',  // ajax請求方式：post/get  type: 'post',  // 返回數據中主鍵的屬性名稱，默認值為id  key: {  id: 'id',  },  // 節點點擊回調函數  click: function (d) {  console.log(d);  }  });   /*  * 手動設置占位符placeholder（不常用）  * 第一個參數為lay-filter屬性的值  * 第二個參數為需要修改的提示內容  */  treeSelect.setTitle('pidSelect', '這里填寫要改的內容');   /*  * 選中節點（常用於更新時默認選中節點）  * 第一個參數為lay-filter屬性的值  * 第二個參數為需要選中的節點的id  */  treeSelect.checkNode('pidSelect', 0);  }); </script>

數據格式參考

[
  {  "children": [  {  "name": "留言列表",  "icon": "",  "id": 5,  "spread": false  },  {  "name": "發表留言",  "icon": "",  "id": 6,  "spread": false  }  ],  "name": "評論",  "icon": "",  "id": 4,  "spread": false  },  {  "children": [  {  "children": [  {  "name": "添加用戶",  "icon": "",  "id": 40,  "spread": false  },  {  "name": "編輯用戶",  "icon": "",  "id": 41,  "spread": false  },  {  "name": "刪除用戶",  "icon": "",  "id": 42,  "spread": false  }  ],  "name": "用戶列表",  "icon": "",  "id": 8,  "spread": false  },  {  "name": "角色列表",  "icon": "",  "id": 11,  "spread": false  },  {  "children": [  {  "name": "添加權限",  "icon": "",  "id": 34,  "spread": false  },  {  "name": "編輯權限",  "icon": "",  "id": 37,  "spread": false  },  {  "name": "刪除權限",  "icon": "",  "id": 38,  "spread": false  }  ],  "name": "所有權限",  "icon": "",  "id": 13,  "spread": false  },  {  "name": "操作日志",  "icon": "",  "id": 15,  "spread": false  }  ],  "name": "權限管理",  "icon": "",  "id": 10,  "spread": false  } ]