kpeng163 2023-08-23 21:08 采纳率: 50%
浏览 17
已结题

laycascader级联选择器的懒加载问题

关于级联选择器懒加载的问题。
用的是laycascader,仿照的elementUI中的级联选择器。 https://gitee.com/yixiacoco/lay_cascader

在项目使用中,接口返回的是省市区这样的级联选择,但每个省返回的层级是不一样的,不知道该怎么控制leaf。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://chengxiaokong.com/casca/layui/layui.css" />
    <link rel="stylesheet" href="http://chengxiaokong.com/casca/cascader/cascader.css" />

    <title></title>
    
</head>

<body>
    <!-- 主体 -->
    <div class="main">
        <input id="aaaaa" />
    </div>
    <script src="http://chengxiaokong.com/casca/jquery-3.5.1.min.js"></script>
    <script src="http://chengxiaokong.com/casca/layui/layui.js?"></script>
    <script src="http://chengxiaokong.com/casca/cascader/cascader.js?"></script>

    <script type="text/javascript">layui.use(['layCascader'], function () {
            var $ = layui.$;
            var layCascader = layui.layCascader;

    var dataFrom =
    {
        "first":
            [
                { "value": "bj", "label": "北京" },
                { "value": "hb", "label": "湖北" }
            ],
        "hb":
            [
                { "value": "wh", "label": "武汉" }
            ],
        "wh":
            [
                { "value": "wc", "label": "武昌" }
            ],
        "bj":
            [
                { "value": "hd", "label": "海淀" }
            ]
    }
   

            layCascader({
            elem: document.getElementById("aaaaa"),
            props: {
                strictMode: true,
                lazy: true,
                lazyLoad: function (node, resolve) {
                    var data = node.data == undefined ? dataFrom["first"] : dataFrom[node.data.value];
                    var nodes = data.map(function (selitem) {
                        return {
                            value: selitem.value,
                            label: selitem.label,
                            leaf: false
                        }
                    });

                    resolve(nodes);

                     
                }
            }


        });


        })</script>
</body>

</html>

代码中,北京是两级,湖北是三级。数据源中也不会告知是否是最后一级,也不能在点击第二级获取第三级时,查询所有的第三级下是否还有第四级来提前确认leaf的值是true还是false,实际使用中这个查询会比较耗时。尝试在点击第三级时,通过 node["data"]["leaf"] = true;来让第三级变成叶子节点,但没有效果,之前没用过,实在想不出怎么解决了,谢谢各位帮忙。

  • 写回答

13条回答 默认 最新

  • Java毕设王 2023-08-24 09:41
    关注
    获得0.75元问题酬金

    在点击事件中修改节点的leaf属性

    layCascader({
        elem: document.getElementById("aaaaa"),
        props: {
            strictMode: true,
            lazy: true,
            lazyLoad: function (node, resolve) {
                var data = node.data == undefined ? dataFrom["first"] : dataFrom[node.data.value];
                var nodes = data.map(function (selitem) {
                    return {
                        value: selitem.value,
                        label: selitem.label,
                        leaf: false
                    };
                });
    
                resolve(nodes);
            }
        },
        click: function (node) {
            if (node.data.value === "wc") {  // Assuming "wc" is the value of the third level node
                node.data.leaf = true;  // Set leaf attribute to true
            }
        }
    });
    
    
    

    手动向父节点传递叶子节点状态

    layCascader({
        elem: document.getElementById("aaaaa"),
        props: {
            strictMode: true,
            lazy: true,
            lazyLoad: function (node, resolve) {
                var data = node.data == undefined ? dataFrom["first"] : dataFrom[node.data.value];
                var nodes = data.map(function (selitem) {
                    return {
                        value: selitem.value,
                        label: selitem.label,
                        leaf: false
                    };
                });
    
                resolve(nodes);
            }
        },
        click: function (node) {
            if (node.data.value === "wc") {  // Assuming "wc" is the value of the third level node
                node.parent.data.leaf = true;  // Set leaf attribute of parent to true
            }
        }
    });
    
    
    
    评论

报告相同问题?

问题事件

  • 系统已结题 8月31日
  • 赞助了问题酬金15元 8月23日
  • 创建了问题 8月23日

悬赏问题

  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题,求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示?
  • ¥15 有了解d3和topogram.js库的吗?有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar,时序沉降图怎么画
  • ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
  • ¥15 关于#Java#的问题,如何解决?
  • ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算