layui 下拉选择树（多选） + 异步加载

作者: jeneen1129 | 来源:发表于2020-08-13 18:24 被阅读0次

layui 下拉选择树（多选） + 异步加载
ElementUI el-select 自定义下拉树
layui扩展组件zTreeSelectM，下拉树多选，支持设置
【Layui】后台异步加载select下拉菜单
【Layui】后台异步加载select下拉菜单
layui[扩展组件]-xmSelect下拉多选（分页，aja
SmartRefreshLayout的加深使用
SmartRefreshLayout的使用
H5中Echarts 使用
RecyclerView应用复习

效果图

效果描述: 可以点击，无线下拉，根据用户接口异步加载数据
使用： layui/tree.js
以前使用layui不是看官网就是看其他人的代码，最后还不如自己扒源码来的舒服，
只要源码看懂了，还怕工具用不好吗？？？？！
虽然当前还没有看懂，但是这在努力看，理解中，
在实现过程中，由于效果的问题，将tree.js改成了treeS.js，模块名改成treeS。

配置项看源码比较好，虽然源码都是a,b,c这种，但是涉及到css、html还是需要写完整的。

还参考了layui-tree创建下拉树型选项框

html:

<div class="layui-unselect layui-form-select downpanel">
    <div class="layui-select-title">
        <span class="layui-input layui-unselect"
            id="treeclass"
            style="line-height: 36px;">--请选择--</span>
        <input id="pid" type="hidden"
            name="selectID" value="0">
        <i class="layui-edge"></i>
    </div>
    <dl class="layui-anim layui-anim-upbit">
        <dd>
            <ul id="tree-unit" class="my-tree"></ul>
        </dd>
    </dl>
</div>

<script src="../../layui/layui.js"></script>
<script src="../../assets/js/jquery-2.0.3.min.js"></script>
<script src="../../js/jquery/mustache.js"></script>

js:

var treeIndex = -1  // 初始化
// 请求数据（第一级）
var treeList = data;
treeList = [{
    "id": "4",   // 区分
    "pid": "4",
    "name": "墨家",
    "isUser": 0, // 标记是否为用户还是组织
    "isShare": null // 是否已经分享过，用来初始化select的值+选择提交
}, {
    "id": "3",
    "pid": "3",
    "name": "盖聂",
    "isUser": 1,
    "isShare": null
},
{
    "id": "0",
    "pid": "0",
    "name": "荆轲",
    "isUser": 1,
    "isShare": null
}, {
    "id": "2",
    "pid": "2",
    "name": "法家",
    "isUser": 0,
    "isShare": null
}]
treeList = mapSelectTree(treeList)
var _this = this
if (_this.treeIndex === -1) {
    renderTree(treeList)
} else {
    _this.treeIndex.reload({ data: treeList });
}

renderTree = function(treeList) {
// 为防止污染原来的tree，改名叫treeS

  layui.use(['treeS'], function () {
        var treeS = layui.treeS; 
        _this.treeIndex = treeS.render({
            elem: '#tree-unit',
            id: 'treeId',
            showCheckbox: true,
            data: treeList,
            drag: true,
            onlyIconControl: false,
            text: {
                defaultNodeName: '无数据',
                none: '无数据'
            },
            click: function (node) {
                if (node.state === 'close' && node.data.isUser === 0) {
                            // 请求后台，加载数据
                            var items = [{
                                "id": "40288c88727d43ff01727dea9e210001",
                                "pid": "4028fc8a705d46d001705d51675d0001",
                                "name": "韩非",
                                "isUser": 1,
                                "isShare": null
                            }, {
                                "id": "40288c88727d43ff01727dea9e210001",
                                "pid": "4028fc8a705d46d001705d51675d0001",
                                "name": "小组织",
                                "isUser": 0,
                                "isShare": null
                            }]
                            items = mapSelectTree(items)   // 过滤数据，给数据项加上checked、spread、title、children属性
                            node.data.spread = true
                            node.data.children = items
                            _this.treeIndex.reload()
                } else {
                    node.data.spread = false
                    _this.treeIndex.reload()
                }
                return true // 好像没作用
            },
            oncheck: function (node) {  // 看到最后才知道这个事件，找了半天点击checkbox的事件 T……T
                node.data.checked = true
                if (treeIndex !== -1) {
                    setSelectChecked()  // 将选中的数据显示到select中
                }
            }
        })
        // 绑定下拉菜单事件
        $(".downpanel").on("click", ".layui-select-title", function (e) {
            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
            $(this).parents(".downpanel").toggleClass("layui-form-selected");
            layui.stope(e);  // 阻止事件冒泡
        });
        $('.downpanel .layui-anim-upbit').unbind()
        $('.downpanel .layui-anim-upbit').bind('click', function (e) {
            layui.stope(e);
        })
        $(document).on("click", function (e) {
            $(".layui-form-select").removeClass("layui-form-selected");
        });
        setSelectChecked() // 初始化
    })
}
setSelectChecked = function(){
    var checked = treeIndex.getChecked()
    var nameStr = checked.map(function (obj, index) {
        return obj.name;
    }).join(',');
    if (nameStr === '') {
        nameStr = '--请选择--'
    }
    var $select = $('#tree-unit').parents(".layui-form-select");
    $select.find(".layui-select-title span").html(nameStr);
}
mapSelectTree = function (list, level) {
  for (var i = 0; i < list.length; i++) {
      list[i]['title'] = list[i]['name']
      list[i]['spread'] = false
      list[i]['field'] = level
      if (list[i].isChecked === 1) {
          list[i]['checked'] = true
      } else {
          list[i]['checked'] = false
      }
      if (list[i]['isParent']) {
          list[i].children = []
          list[i].children.push({
              title: ''
          })
          list[i].first = true
      }
  }
  return list
}

不喜欢重复了……别人的 -> layui-tree 一些基本的
 layui全局事件

layui/modules/tree.js -> treeS.js(先格式化下)修改一点点：

// 行数145开始
}, b.prototype.spread = function (e, a) {
        var n = this,
            t = n.config,
            r = e.children("." + p),
            l = r.children("." + f),
            c = r.find("." + o),
            k = r.find("." + y),
            m = t.onlyIconControl ? c : l,
            x = "";
        // @zhang 重复+t
        m.on("click", function (it) {
            var at = e.children("." + v),
                n = m.children(".layui-icon")[0] ? m.children(".layui-icon") : m.find(
                    ".layui-tree-icon").children(".layui-icon");
            if (at[0]) {
                if (e.hasClass(C)) e.removeClass(C), at.slideUp(200), n.removeClass(u).addClass(h);
                else if (e.addClass(C), at.slideDown(200), n.addClass(u).removeClass(h), t.accordion) {
                    var r = e.siblings("." + s);
                    r.removeClass(C), r.children("." + v).slideUp(200), r.find(".layui-tree-icon").children(
                        ".layui-icon").removeClass(u).addClass(h)
                }
            } else x = "normal"
            /**
            * 将下面点击事件的代码移上来了，
            * 实现点击icon和数据title点击都可以触发treeS.click事件
            */
            var ntmp = i(this);
            ntmp.hasClass(d) || (x = e.hasClass(C) ? t.onlyIconControl ? "open" : "close" : t.onlyIconControl ?
                "close" : "open", t.click && t.click({
                    elem: e,
                    state: x,
                    data: a
                }))
        }), k.on("click", function () {
            // 这边只能在点击数据的时候触发treeS.click事件
            // console.log(t.data)
            // console.log('click too')
            // console.log(i)
            // var n = i(this);
            // n.hasClass(d) || (x = e.hasClass(C) ? t.onlyIconControl ? "open" : "close" : t.onlyIconControl ?
            //     "close" : "open", t.click && t.click({
            //         elem: e,
            //         state: x,
            //         data: a
            //     }))
        })
        // @zhang 重复+t
    }, b.prototype.setCheckbox

css：

// 样式自己调
<link rel="stylesheet" href="../../layui/css/layui.css">
#tree-unit .layui-tree-entry {
    height: 2.5rem;
}

#tree-unit .layui-tree-icon {
    border-width: 0;
    height: auto;
    width: auto;
    line-height: auto;
}

#tree-unit .layui-icon-subtraction:before {
    content: " ";
    display: inline-block;
    height: 1.4rem;
    width: 1.4rem;
    background: url(./img/icon_open_static.png) no-repeat;
    background-size: 100%;
}

#tree-unit .layui-icon-addition:before {
    content: " ";
    display: inline-block;
    height: 1.4rem;
    width: 1.4rem;
    background: url(./img/icon_close_static.png) no-repeat;
    background-size: 100%;
}

#tree-unit .layui-icon-file:before {
    content: " ";
    display: inline-block;
    height: 1.4rem;
    width: 1.4rem;
    background: url(./img/icon_user.png) no-repeat;
    background-size: 100%;
    margin-left: 5px;
    margin-right: -2px;
}

#tree-unit .layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
    color: #009688;
    text-decoration: none;
}

PS：哈哈^~，先暂时这样，后面封装成插件，用layui直接写个模块，等待————————
此文仅供学习使用，也只是为了记录和分享，希望可以帮到学习技术的人，欢迎指正~~~
还有就是求赞，发现自己一个赞都么得@_@

layui 下拉选择树（多选） + 异步加载
效果描述: 可以点击，无线下拉，根据用户接口异步加载数据使用： layui/tree.js以前使用layui...
ElementUI el-select 自定义下拉树
下拉树单选下拉树多选 css
layui扩展组件zTreeSelectM，下拉树多选，支持设置
项目介绍项目中需要用到下拉树多选功能，找到两个相关组件moretop-layui-select-ext和wuji...
【Layui】后台异步加载select下拉菜单
目标实标“服务器环境”下拉菜单的动态赋值，避免每增加/修改一个选项需要修改代码的不便。前端html页面 js脚本
【Layui】后台异步加载select下拉菜单
目标：实标“服务器环境”下拉菜单的动态赋值，避免每增加/修改一个选项需要修改代码的不便。前端html页面：服...
layui[扩展组件]-xmSelect下拉多选（分页，aja
layui[扩展组件]-xmSelect下拉多选（分页，ajax）遇到问题： 1、请求两次 2、分页不成功 3...
SmartRefreshLayout的加深使用
这是一个可自定义,多功能,多选择,多神奇的下拉刷新,上拉加载的控件刷新加载的动图效果,源码地址 https://g...
SmartRefreshLayout的使用
这是一个可自定义,多功能,多选择,多神奇的下拉刷新,上拉加载的控件刷新加载的动图效果,请看这里哦>源码地址 h...
H5中Echarts 使用
首先ajax 的使用，这里是同步，一般网络加载会选择异步：下拉多远框使用，会出现动态加载内容后，多远框中内容不刷...
RecyclerView应用复习
导包应用 GridList ListView 上拉刷新下拉加载 java xml 单选多选确定选中项删除项 ...