浅谈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实现OCX控件的事件响应示例
Sep 17 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
js只执行1次的函数示例
Jul 20 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
解决layer.open后laydate失效的问题
Sep 06 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP微信红包API接口
2015/12/05 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
Python实现模拟时钟代码推荐
2015/11/08 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python实现内存监控系统
2021/03/07 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
database面试题
2013/03/28 面试题
最新大学职业规划书范文
2013/12/30 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
秋天的图画教学反思
2014/05/01 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
反邪教学习心得体会
2016/01/15 职场文书
护理培训心得体会
2016/01/22 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python