TreeSelect 树形下拉选择器 点击展开下拉框会被关闭。

分享 已结 9 2099
柱华
柱华 2018-9-20
悬赏:20飞吻
扩展的插件所在: https://fly.layui.com/extend/treeSelect/#doc
遇到问题:
点击 下拉框里的小三角,下拉框会立刻关闭

解决:
spreadToggle: function () {
init.event('click', '.layui-treeselect .layui-tree li>i.layui-icon', function () {
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 false
});
return init;
},
加上个 return false;
嘿嘿,一个不注意的我又浪费了一个钟
回帖
  • 无求丶
    2018-9-28
    [嘻嘻] 练手作品,正计划重写,发现了这个帖子,老哥牛批哈哈
    0 回复
  • 无求丶
    2018-10-5
    @柱华 哈哈哈,确实写的比较烂,已经重新写了
    1 回复
  • 柱华
    2018-9-20
    再补充一个, 有两个下拉框的话,会发生展不开的问题。点击小三角没反应。
    其实是点击事件触发了两次的问题。
    P199 要补充一点内容
    event: function (evt, elem, func) {
    $('body').off(evt, elem).on(evt, elem, func);
    }
    先将事件关掉再绑定。
    0 回复
  • 柱华
    2018-9-27
    再补充此插件的一个问题
    问题, 一个页面多次render此组件,发现上一个用的地方选中的赋值跑到下一个地方去了。
    修改后代码 P162
    select: function () {
    init.event('click', '.layui-treeselect ul li a', function () {
    var cite = $(this).find('cite').html();
    var target = $(this).closest('ul').attr('id');
    var reg = target.replace(/[^0-9.]/g, '');
    $('#treeSelect-input-' + reg).val(cite);
    // $('#' + treeInputId).val(cite);
    重点是找到对应的id赋值过去就OK了。
    这插件设计的有缺憾啊。
    0 回复
  • 柱华
    2018-9-27
    再改了一遍,发现多个共存的情况下,传进来的 click 也发生问题了。
    // 来源 https://fly.layui.com/extend/treeSelect/
    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(),
    treeDiv = '#treeSelect-div-'+ tmp,
    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 = $(this).closest('.layui-treeselect');
    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 () {
    var dom = treeDiv + ' ' + '.layui-tree li>i.layui-icon';
    init.event('click', dom, function () {
    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 false
    });
    return init;
    },
    select: function () {
    var dom = treeDiv + ' ' + 'ul li a';
    init.event('click', dom, function () {
    var cite = $(this).find('cite').html();
    var target = $(this).closest('.layui-tree').attr('id');
    var reg = target.replace(/[^0-9.]/g, '');
    var div = $(this).closest('.layui-treeselect');
    $('#treeSelect-input-' + reg).val(cite);
    // $('#' + treeInputId).val(cite);
    $(elem).attr('value', $(this).parent().attr('lay-index'));
    div.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').off(evt, elem).on(evt, elem, func);
    }
    };
    init.input().style();
    return new TreeSelect();
    };
    TreeSelect.prototype.setTitle = function (filter, title) {
    $('*[lay-filter='+ filter +']').next().find('input').attr('placeholder', title);
    return new TreeSelect();
    };
    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);
    })
    0 回复
  • 柱华
    2018-9-27
    我已绝望,这插件有毒,不堪用啊。
    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));
    }
    心累啊,遍历两层输出值,这叫树结构吗? 我很绝望
    0 回复
  • 柱华
    2018-9-27
    我觉得我还可以拯救一下。根本原因是懒得自己再写一个了。
    代码:https://gitee.com/xiezhuhua/layuitreeselect_modification/blob/master/treeSelect.js
    0 回复
  • 柱华
    2018-10-5
    @无求丶 [good] 加油,真心感觉写一个完好的插件不容易,话说重了,请见谅。
    0 回复
  • Jian268
    2018-11-16
    @柱华 大神,我看了你的代码,为什么调用checkNode方法报错啊

    0 回复