首页 > 其他分享 >jquery之ztree树入门(输出最简单树形)

jquery之ztree树入门(输出最简单树形)

时间:2023-03-29 16:22:28浏览次数:49  
标签:jquery test1 test2 name 树形 js ztree

 

 

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
引入的js和css

jquery.ztree.core-3.5.js:zTree核心包
jquery.ztree.excheck-3.5.js:复选框功能包
jquery.ztree.exedit-3.5.js:编辑功能包
zTree核心包是必须引入的

 

    var zTreeObj;
    var setting = {};
    var zNodes = [{
        name: "test1",
        open: true,
        children: [{
            name: "test1_1"
        }, {
            name: "test1_2"
        }]
    }, {
        name: "test2",
        open: true,
        children: [{
            name: "test2_1"
        }, {
            name: "test2_2"
        }]
    }];
    $(document).ready(function() {
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
js

 

<div id="treeDemo"  class="ztree"></div> 
或者
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div> 
html容器声明

 

效果图:

 

标签:jquery,test1,test2,name,树形,js,ztree
From: https://www.cnblogs.com/rdchen/p/17269376.html

相关文章

  • jQuery 多结果自动完成搜索 Tokeninput Autocomplete Text Entry
    OverviewTokeninputisajQuerypluginwhichallowsyouruserstoselectmultipleitemsfromapredefinedlist,usingautocompletionastheytypetofindeachit......
  • AngularJS jQuery 共存法则
    寻找正确的方法,如何在AngularJS里使用jQuery一、为什么还是要使用jquery在使用Angular一段时间后,发现还是很难逃脱jquery插件的魔掌。尽管对于angular,内置了jQLite.但是为......
  • ztree 右键菜单功能
    https://blog.csdn.net/weixin_42217154/article/details/107681018右键菜单的功能是这样来的,首先设计一个菜单,用于右击显示;菜单上放置一些元素(控件),以供我们选择;然后就是......
  • js树形控件—zTree使用
    https://blog.csdn.net/qq_35934094/article/details/80852989https://www.cnblogs.com/leechenxiang/p/5952959.htmlhttps://www.jianshu.com/p/99d24aab74a5详见官网:h......
  • 基于.NET Core + Jquery实现文件断点分片上传
    基于.NETCore+Jquery实现文件断点分片上传前言该项目是基于.NETCore和Jquery实现的文件分片上传,没有经过测试,因为博主没有那么大的文件去测试,目前上传2G左右的文件......
  • struts2 jquery
    使用这个组合,感觉还是很方便灵活的。1、将struts2的json插件加入web工程的lib,jsonplugin的下载地址:http://code.google.com/p/jsonplugin/downloads/......
  • 最小树形图
    最小树形图求最短弧集合\(E\)找到每个\(u\)点的最小入边\(in[u]\),如果存在非根节点没有入边,则一定不存在树形图for(riinti=1;i<=m;++i){if(e[i].u^e[i].v......
  • 将一个多维数组整合成树形结构,可以通过递归函数来实现
    functionbuildTree(arr,parentId=null){lettree=[];for(leti=0;i<arr.length;i++){letitem=arr[i];if(item.parentId===parentId......
  • jQuery(学习笔记1.0)
    jQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程jQuery库可以通过一行简单的标记被添加到网页中。jQuery库包含以下特性:HTML元素选取HTML元素操作CSS操作HTML......
  • jQuery多种请求方式
    一、请求方式$.ajax():最常用的发起HTTP请求的方法之一,可以自定义请求头、请求体等参数,支持异步和同步请求。$.ajax({type:"GET",url:"http://example.com/data......