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

使用

下载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值

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值