浅谈Layui的eleTree树式选择器使用方法


Posted in Javascript onSeptember 25, 2019

模块eleTree 介绍、下载

地址:https://fly.layui.com/extend/eleTree/

使用

JS位置 ,layui/lay/modules/eleTree.js;

CSS位置 ,layui/css/modules/eleTree/eleTree.css;

页面css引用 引用 layui/css/layui.css"和 layui/css/modules/eleTree/eleTree.css ;

页面js引用 引用 layui/layui.js ;

页面div

<div class="eleTree ele1" lay-filter="data1"></div>
<div class="eleTree ele2" lay-filter="data2"></div>
<div class="eleTree ele3" lay-filter="data3"></div>
<button class="layui-btn">获取选中数据</button>

script

<script>  
  layui.config({
   base: "layui/lay/modules/"  //eleTree.js所在目录
  }).use(['jquery','eleTree'], function(){
   var $ = layui.jquery;
   var eleTree = layui.eleTree;

   var data=[
    {
     "label": "a",
     "spread": true,
     "children": [
      {
       "label": "aa1",
       "spread": true,
       "disabled": true,
       "children": [
        {
         "label": "aaa1",
         "children": [
          {
           "label": "aaaa1",
           "checked": true
          },
          {
           "label": "bbbb1"
          }
         ]
        },
        {
         "label": "bbb1",
         "spread": true,
         "children": [
          {
           "label": "aaaa1",
           "checked": true
          }
         ]
        },
        {
         "label": "ccc1"
        }
       ]
      },
      {
       "label": "bb1",
       "children": [
        {
         "label": "aaaa1",
         "checked": true
        }
       ]
      },
      {
       "label": "cc1"
      }
     ]
    },
    {
     "label": "c",
     "children": [
      {
       "label": "aa1",
       "disabled": true
      },
      {
       "label": "bb1",
       "checked": true
      }
     ]
    }
   
   ]
   var data2=[
   {
     "label": "a",
     "spread": true,
     "children": [
      {
       "label": "aa1",
       "spread": true,
       "disabled": true
      },
      {
       "label": "bb1",
       "children": [
        {
         "label": "aaaa1",
         "checked": true
        }
       ]
      },
      {
       "label": "cc1"
      }
     ]
    },
    {
     "label": "c",
     "children": [
      {
       "label": "aa1",
       "disabled": true
      },
      {
       "label": "bb1",
       "checked": true
      }
     ]
    }
   ];
   //数据一定要在 渲染render前 render里的url 和 type 应该是用来ajax获取远程数据的,不过不好用。eleTree.js中要求比较多data.Code 等等,就没用,直接页面取得了。将data ,data1,data3 换成自己的。
   eleTree.render({
    elem: '.ele1',
    // url: "/tree",
    // type: "post",
    data: data,
    showCheckbox: true,
    contextmenuList: ["copy","add","edit","remove"],
    drag: true,
    accordion: true
   });
   
   eleTree.render({
    elem: '.ele2',
    // url: "../../data/home/tree.json",
    // type: "post",
    data: data2,
    showCheckbox: true,
    contextmenuList: ["add","remove"],
    drag: true,
    accordion: true
   });

   var data3=[
    {
     "label": "a"
    },
    {
     "label": "aa",
     "isLeaf": true
    }
   ]
   var k=1;
   eleTree.render({
    elem: '.ele3',
    // url: "/tree",
    // type: "post",
    data: data3,
    showCheckbox: true,
    contextmenuList: ["copy","add","edit","remove"],
    // drag: true,
    accordion: true,
    lazy: true,
    loadData: function(item,callback) {
     setTimeout(function() {
      k++;
      var d = [
       {
        "label": "d"
       }
      ];
      console.log(item);
      if(k>=3){
       d[0].isLeaf=true;
       return void callback(d);
      }
      callback(d);
     }, 500);
    }
   });
//各种 方法
   eleTree.on("add(data1)",function(data) {
    console.log(data);
    // 若后台修改,则重新获取后台数据,然后重载
    // eleTree.reload(".ele1", {where: {data: JSON.stringify(data.data)}})
   })
   eleTree.on("edit(data1)",function(data) {
    console.log(data);
   })
   eleTree.on("remove(data1)",function(data) {
    console.log(data);
   })
   eleTree.on("toggleSlide(data1)",function(data) {
    console.log(data);
   })
   eleTree.on("checkbox(data1)",function(data) {
    console.log(data);
   })
   eleTree.on("drag(data2)",function(data) {
    console.log(data);
   })

   $(".layui-btn").on("click",function() {
    console.log(eleTree.checkedData(".ele2"));
    //这里的 eleTree.checkedData() 取得的是数组;
    //下面是我项目中,取得数据,赋给一个textarea的过程,有去重过滤。
    //*********项目代码示例***************
  var a = eleTree.checkedData(".ele1"),
     b = a.length;
     if (0 >= b) {
      Wind.use('artDialog',function(){
      art.dialog({
       id : "alert",
       icon : "error",
       content : "请至少选择一个地区",
       ok : function() {}
      });
      });
     }else {    
       var thisCitys = eleTree.checkedData(".ele1");
   var d="";
       var new_arr=[];
      for (var f = 0; f < thisCitys.length; f++) {     
       if($.inArray(thisCitys[f]['label'],new_arr)==-1) { 
        new_arr.push(thisCitys[f]['label']); 
        }
      }
      //去重
      for(var i=0;i<new_arr.length; i++){
       d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
      }
        // }
       $("#area").val(d);
     
     //*********项目代码示例 结束***************
   });
  // 数据重新加载 这里也可以做切换数据用
 $(".layui-btn2").on("click",function() {
  eleTree.reload(".ele1", {data: data3})
 })
 //*********项目代码示例***************
  $("#change").on("click",function() {
   if($("#change").attr("class")=='change_short btn btn-warning btn-sm'){
   eleTree.reload(".ele1", {data: data_short});
   $("#change").html("添加 区/县后缀");
   $("#change").attr("class","change_all btn btn-warning btn-sm");
   }else{
   eleTree.reload(".ele1", {data: data});
   $("#change").html("去掉 区/县后缀");
   $("#change").attr("class","change_short btn btn-warning btn-sm");
   }
  
 });
   //*********项目代码示例 结束***************
  });
 </script>

效果

浅谈Layui的eleTree树式选择器使用方法

以上这篇浅谈Layui的eleTree树式选择器使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
layui禁用侧边导航栏点击事件的解决方法
Sep 25 #Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 #Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 #Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 #Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 #Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 #Javascript
使用localStorage替代cookie做本地存储
Sep 25 #Javascript
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
js闭包的9个使用场景
2020/12/29 Javascript
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python自动识别文本编码格式代码
2019/12/26 Python
使用python实现多维数据降维操作
2020/02/24 Python
Python中的__init__作用是什么
2020/06/09 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
国旗下讲话演讲稿
2014/05/08 职场文书
企业负责人任命书
2014/06/05 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
初中教师个人总结
2015/02/10 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis