layui动态渲染双层树状图

本文介绍了如何使用Layui动态渲染双层树状图,以服装类型及明细为例,讲解了渲染方法、数据源结构、显示选项以及节点事件回调。通过在控制器获取数据并转化为对象数组,结合Layui提供的API实现动态渲染,并展示了节点单击和复选框点击的回调函数用法。
摘要由CSDN通过智能技术生成

下面我们讲Layui中的双层树状图是如何动态渲染的,下面以渲染服装类型及明细为例:

  1. 首先我们需要引入layui的js插件,准备编写树状图渲染的方法:

在这里插入图片描述
我们通常使用div标签作为Layui树状图渲染的操作对象,以下图为例:在需要展现树状图的页面代码位置插入div标签,并给定一个特定id。
在这里插入图片描述

  1. 首先我们讲双层树状图的动态渲染,先给定有特定id的div标签:
    在这里插入图片描述

    开始编写渲染方法(render()):
    elem:表示渲染的对象ID值(已经给定特定id的div标签);
    data:为树状图内的数据源,数据源数据类型为对象数组;
    showCheckbox:节点是否显示复选框;
    edit:可选择是否开启对节点的操作栏(true、false、['add','update','

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值