在前端layui项目中使用ztree

最新推荐文章于 2024-07-16 10:23:26 发布
最新推荐文章于 2024-07-16 10:23:26 发布
阅读量1.1k 收藏
点赞数
分类专栏： Java Web开发 前端开发 文章标签： js java ztree
转载注明出处
本文链接：https://blog.csdn.net/qq_15973399/article/details/117019965
版权
本文介绍了如何在前端layui项目中集成ztree，强调了无需严格的数据格式控制，只需要parent_id即可建立层级。重点讲述了项目集成过程，包括避免使用layui自带的jQuery模块，改用普通jQuery.min.js，并应用metroStyle皮肤。此外，还提到了如何根据后台数据设置节点的checked属性以及在编辑页面的应用。最后，讨论了调整ztree字体大小以匹配layui样式的方法。
摘要由CSDN通过智能技术生成

说明

ztree是一款很好的树形控件，无需对数据进行严格的格式控制，比如需要建立层级关系，只要你数据存在parent_id即可

官网：http://www.treejs.cn/v3/main.php#_zTreeInfo

基础使用，例子都在官网看。这里讲述怎么集成。

项目集成

项目是layui，其本身有jquery模块，为了配合插件，需要重新引入。

即不用layui自带的模块。使用正常的jquery.min.js

使用metroStyle皮肤，相对好看

<link th:href="@{/lib/ztree/css/metroStyle/metroStyle.css}" rel="stylesheet">

<script type="text/javascript" th:src="@{/lib/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/ztree/jquery.ztree.core.min.js}">
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Layui Select框集成Ztree
Gxttsmn的博客
07-29 1661
前几天项目中有个需求，需要在select 框中加载一个两层的树（树本身是无线级，但需求是只要获取根节点及根节点的下级节点）。 具体样式如图： 这里因为采用异步加载树，所以使用Ztree 进行开发，完成后效果如上图。 整个开发过程还是有点繁琐的，下边将所作的做一个整理。 引入ztree 插件省略。。。 界面html 代码，构建select 元素 ​<div class="...
layui+ztree下拉树，支持单选和多选
09-11
layui+ztree下拉树，支持单选和多选，简单封装方便实用
layui ztree 实现下拉树
热门推荐
Glory丶笨小孩
01-26 5万+
完整代码下载 JS 代码 //id div 的id，isMultiple 是否多选，chkboxType 多选框类型{"Y": "ps", "N": "s"} 详细请看ztree官网 function initSelectTree(id, isMultiple, chkboxType) { var setting = { view: { d
layui ztree 下拉树代码
01-26
layui ztree 下拉树
zTree -- jQuery 树插件的使用包括添加、编辑(MVC)
最新发布
m0_57423952的博客
07-16 264
使用的.netCore 6 后端使用的ORM框架SqlSugar的中的ToTreeAsync方法返回的需要的数据格式，如果没用SqlSugar可以自己写递归来完成。同样的去复制你的添加界面的代码 只不过我在这里使用到了 asp-for来进行数据回显，你可以根据你自己的方式去实现。这段代码写在你的form表单中你需要的位置即可，注意标签中的name是你数据库中所定义的你需要添加的值的名称。代码仅供参考，具体的实现可以参考上面的网址和代码。具体的一些文件的引用根据自己的实际情况去引用。首先是去写添加的时候。
layui 树形 Ztree
左--右
04-06 1500
layui.use(['tree', 'util'], function() { var tree = layui.tree , layer = layui.layer , util = layui.util, $ = layui.$, //模拟数据 data = [ { title:"系统设置", .
layui中引用zTree -- jQuery 树插件 使用
ll_883963的博客
07-29 1678
引入插件 layui.use(['layer', 'tree'], function () { var $ = layui.jquery; var layer = layui.layer; ｝ var setting = {//树设置 treeId : "", //zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。 identValueSetting: {//区划树设置 edit: {
layui ztree 下拉树代码.zip
12-18
layui是一款流行的前端UI框架，...总的来说，"layui ztree 下拉树代码.zip"是一个方便开发者快速搭建下拉树功能的资源包，通过学习和理解其中的代码，你可以掌握如何在layui项目中整合zTree，提升用户界面的交互体验。
layui transfer+ztree.zip
03-09
在IT行业中，layui是一款流行的前端UI框架，它以其简洁、优雅的设计和强大的功能深受开发者喜爱。而"transfer"和"ztree"则是layui中的两个重要组件，分别用于实现穿梭框和树形视图的功能。 穿梭框（Transfer）是...
layui ztree 下拉树代码-Javascript代码类资源
11-08
在layui ztree下拉树的场景中，这个数据源可能是通过Ajax从服务器获取的，或者预先定义在页面上的。 5. **事件绑定**：zTree提供了丰富的事件接口，如onClick、onCheck等，可以监听用户的交互行为。在下拉树中，...
ZTree树和layui框架整合的demo 获取动态数据实现增删改查（只展现前台部分，后台逻辑自己写）
java-dezhe的博客
04-08 3898
一、我今天做了一个Ztree树增删改查菜单的功能，在这里记录一下，下次使用时拿过来直接用。 二、首先ztree有特别好的中文 API，目前现在更新到3.5.40版本，大家可以直接去官网下载它的类库（js,css,demo,api）,这里我就不提供了。 ztree官网：http://www.treejs.cn/v3/api.php 三、开始操作 1.首先要先引入相关的jquery,ztree中的cs...
zTree zTree zTree
11-26
zTree -- jQuery 树插件
Select 下拉树 Ztree
03-17
select实现下拉树形菜单结构
layui菜单管理（树结构）
01-09
layui菜单页面，用火狐浏览器打开index.html可以查看演示，非常好用的
layui-tree树形模板
05-30
layui-tree是layui提供的树形管理，可以用于后台做权限列表的使用，只需要后台整理好数据给前台展示，勾选之后提交给后台即可。
layui+ztree 树状下拉框
qq_34266804的博客
10-27 2050
https://www.cnblogs.com/xqz0618/p/layui_ztree.html 一、效果图 【关闭】 　　 【展开】　　　　 　　　　　 二、代码 【HTML】注:布局一定要用DIV不是select否则效果···· <div class="layui-form-item"> <label class...
layui 集成 ztree异步加载
佳-Mr.L
08-04 1024
layui 集成 ztreez异步加载。千万不要忽略这个参数。ztree的js和css都要引入，我这里暂时用的是core包。首先，layui环境搭建，ztree环境引入。js，这里主要就是格式要跟ztree对应。
layui结合zTree写树状图
人生几度秋凉
03-06 1万+
转载请注明出处：https://mp.csdn.net/postedit/88244560 树状图功能：最开始加载父级，在点击某个父节点时异步加载对应的子节点 在要求页面兼容ie8的情况下我选择的layui作为我的后台管理页面框架，但是layui对树状图的支持并不算太好，这里引入zTree作为补充。下面用到的一些js和css请到对应的官网下载首先看前端jsp的页面： org.jsp:页面...
vue2项目中ztree插件的使用
03-28
在 Vue2 项目中使用 ztree 插件，需要先将 ztree 的 JS 和 CSS 文件引入到项目中，然后再按照 ztree 的使用方法进行调用。 以下是一个简单的示例，演示如何在 Vue2 中使用 ztree 插件： 1. 在项目中引入 ztree 的 JS 和 CSS 文件，例如： ```html <link rel="stylesheet" href="path/to/ztree/css/zTreeStyle/zTreeStyle.css"> <script src="path/to/ztree/js/jquery-1.4.4.min.js"></script> <script src="path/to/ztree/js/jquery.ztree.all.min.js"></script> ``` 2. 在 Vue 组件中添加一个 `div` 元素，用于展示 ztree： ```html <template> <div id="tree"></div> </template> ``` 3. 在 Vue 组件的 `mounted` 钩子函数中，初始化 ztree： ```javascript mounted() { // ztree 数据 const zNodes = [ { name: "父节点1", open: true, children: [ { name: "子节点1" }, { name: "子节点2" } ]}, { name: "父节点2", open: true, children: [ { name: "子节点3" }, { name: "子节点4" } ]} ]; // ztree 配置项 const setting = { data: { simpleData: { enable: true } } }; // 初始化 ztree $.fn.zTree.init($("#tree"), setting, zNodes); } ``` 这样，在 Vue 组件中就可以使用 ztree 插件了。需要注意的是，由于 ztree 是基于 jQuery 的插件，因此在使用 ztree 时需要先引入 jQuery 库。另外，ztree 的具体使用方法可以参考官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值