【Layui-treeSelect】Select 树状下拉遇到的问题

最新推荐文章于 2024-06-20 11:09:26 发布

aadnf

最新推荐文章于 2024-06-20 11:09:26 发布

阅读量744

点赞数

分类专栏： Layui 文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/aadnf/article/details/130139533

版权

Layui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

使用

使用

下载Layui-TreeSelect源码

模块下载地址：https://gitee.com/wujiawei0926/treeselect

获取核心 js 文件 treeSelect.js
文件目录 /module/treeSelect/treeSelect.js
将模块正确的引用到页面中
例如：

  <script src="/static/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form','contlist','tree','treeSelect'], function(){
    var $ = layui.$ ,form = layui.form，treeSelect= layui.treeSelect;

示例demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>树形下拉选择器</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <script src="assets/layui/layui.js"></script>
    <script src="module/common.js"></script>
    <style wjw>

    </style>
</head>
<body style="padding: 25px;">
   <div  class="layui-container layui-form">
        <div class="layui-form-item">
            <label for="" class="layui-form-label">使用文档</label>
            <div class="layui-input-block">
                <a class="layui-btn layui-btn-primary" href="https://wujiawei0926.gitee.io/treeselect/docs/doc.html">点击打开</a>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">测试1的相关操作</label>
            <div class="layui-input-block">
                <button class="layui-btn" id="btnDestory">销毁</button>
                <button class="layui-btn" id="btnRevoke">撤销选中节点</button>
            </div>
        </div>
       <div class="layui-form-item">
           <label for="" class="layui-form-label">测试1</label>
           <div class="layui-input-block">
               <input type="text" id="tree" lay-filter="tree" class="layui-input">
           </div>
       </div>
       <div class="layui-form-item">
           <label for="" class="layui-form-label">测试2</label>
           <div class="layui-input-block">
               <input type="text" id="tree2" lay-filter="tree2" class="layui-input">
           </div>
       </div>
       <div class="layui-form-item">
            <label for="" class="layui-form-label">layer</label>
            <div class="layui-input-block">
                <button id="layer" class="layui-btn">点击打开</button>
            </div>
        </div>
   </div>
    <script>
    layui.use(['treeSelect', 'form', 'layer'], function () {
        var treeSelect= layui.treeSelect,
            form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;			
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: 'data/data3.json',
            // 请求头
            headers: {},
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '修改默认提示信息',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 一些可定制的样式
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
//                选中节点，根据id筛选
                treeSelect.checkNode('tree', 3);
                console.log($('#tree').val());
//                获取zTree对象，可以调用zTree方法
               var treeObj = treeSelect.zTree('tree');
               console.log(treeObj);

//                刷新树结构
               treeSelect.refresh('tree');
            }
        });

        treeSelect.render({
            // 选择器
            elem: '#tree2',
            // 数据
            data: 'data/data3.json',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '占位符',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            style: {
                folder: {
                    enable: false
                },
                line: {
                    enable: true
                }
            },
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
//                选中节点，根据id筛选
//                treeSelect.checkNode('tree', 3);

//                获取zTree对象，可以调用zTree方法
//                var treeObj = treeSelect.zTree('tree');
//                console.log(treeObj);

//                刷新树结构
//                treeSelect.refresh('tree');
            }
        });


        // 通过layer打开
        $('#layer').click(function(){
            layer.open({
                type: 1,
                title: 'Layer',
                content: $('.layui-container'),
                area: ['500px', '300px']
            });
        });

        $('#btnDestory').click(function(){
            treeSelect.destroy('tree');
        });

        $('#btnRevoke').click(function(){
            treeSelect.revokeNode('tree', function(d){
                console.log(d);
                console.log(d.treeId);
            });
        });

        
    });
    </script>
</body>
</html>

数据格式参考

	
[
    {
      "id": 1,
      "name": "zzz",
      "open": true,
      "children": [
        {
          "id": 2,
          "name": "1",
          "open": false,
          "checked": true
        },
        {
          "id": 3,
          "name": "2",
          "open": false,
          "checked": true

        },
        {
          "id": 17,
          "name": "3z",
          "open": false,
          "checked": true
        }
      ],
      "checked": true
    }
  ]

（踩坑）问题记录

因为在修改页面中需要有默认选中的功能，在使用官方提供的方法： treeSelect.checkNode('tree', 3); 时报错 Cannot read property ‘getNodeByParam’ of null
　　原因：该方法 checkNode('tree', 3) 需要在渲染完成后执行，即在 success 回调方法中使用

    treeSelect.render({
      elem: '#tree',  // 选择器
      data: '/cms/ArticleType/readType1', // 数据
      headers: {},  // 请求头
      type: 'get',  // 异步加载方式：get/post，默认get
      placeholder: '修改默认提示信息',  // 占位符
      search: true,  // 是否开启搜索功能：true/false，默认false
      style: {   // 一些可定制的样式
        folder: {
          enable: true
        },
        line: {
          enable: true
        }
      },
      click: function(d){  // 点击回调
        console.log(d);
      },
      success: function (d) {  // 加载完成后的回调函数
        console.log(d)
        treeSelect.checkNode('tree',par_rowdata.id);
        treeSelect.refresh('tree');
      },
    });

另外特别注意：

<input type="text" id="tree" lay-filter="tree" class="layui-input">

treeSelect.checkNode('tree', 3); 中 tree 对应的是 html 中的 lay-filter="tree" 中的 tree
数字 3 则是要默认选中的ID值

aadnf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Layui-treeSelect】Select 树状下拉遇到的问题

Select 树状下拉 treeSelect.checkNode('tree', 3); 时报错 Cannot read property 'getNodeByParam' of null
复制链接

扫一扫