精华内容
下载资源
问答
  • dtree
    2022-06-01 17:05:39

    文档位置

    dtree官方文档地址链接

    渲染下拉树js dTreeUtil.js

    
    /**
     *
     * @param id 要渲染的dom
     * @param data 数据
     * @param none  无数据时显示   "暂时没有数据!"
     * @param checkbar 是否开启复选框
     * @param checkbarType  上下级联关系  半选、单向级联、独立、仅存一个
     * @returns {*}
     */
    function renderDtreeData(id,data,none,checkbar,checkbarType,select,height){
        var dtreeObj ;
        layui.extend({
            dtree: '/plugin/layui_ext/dtree/dtree'   //  路径
        }).use(['dtree'], function() {
            var dtree = layui.dtree;
            dtreeObj = dtree.render({
                elem: "#" + id,
                data: data,
                none: none,
                select : select,
                checkbar: checkbar,
                checkbarType: checkbarType, // 默认就是all,其他的值为: no-all  p-casc   self  only
                menubar: true,
                // width : "500px",
                height: height,
                menubarTips: {
                    group: ["moveDown", "moveUp", "refresh", "searchNode"]
                }
            });
    
            // 绑定节点点击事件
            dtree.on("node("+id+")", function(obj){
                var nodeId = obj.param.nodeId;
                dtreeObj.clickNodeCheckbar(nodeId);// 点击节点选中复选框
                // console.log(obj.param)
                // var checkbarNodes = dtree.getCheckbarNodesParam("checkbarTreeNode");
                // layer.msg(JSON.stringify(checkbarNodes));
            });
        });
        return dtreeObj;
    
    }
    
    /**
     * 获取选中数据
     * @param id
     * @returns {*[]}
     */
    function getCheckbarNodesParam(id){
        var checkStr = [];
        layui.use(['dtree'], function() {
            var dtree = layui.dtree;
            checkStr = dtree.getCheckbarNodesParam(id);
        });
        return checkStr;
    }
    
    
    
    /**
     * 数组转化为树形结构
     * @param list
     * @returns {*[]}
     */
    function arrayToDtree (arr, pid){
        var list = [];
        arr.map(item=>{
            console.log(1)
            if (item.parent == pid){
                var result = {
                    id : item.id,  //节点ID(必填)
                    title : item.name,  //节点名称(必填)
                    parentId : item.parent,  //父节点ID(必填)
                    checkArr : "0",  //复选框列表(开启复选框必填,默认是json数组。)
                    checked : false, //是否选中(开启复选框,0-未选中,1-选中,2-半选。非必填)
                    spread : true, //节点展开状态(v2.4.5_finally_beta版本新增。true:展开,false:不展开,布尔值,非必填)
                    disabled : false,
                    children : []
                };
                list.push(result);
            }
        });
    
        list.map(item=>{
            console.log(2)
            item.children = arrayToDtree(arr,item.id) ;
        })
        return list;
    };
    
    
    

    渲染dom

      	<!-- 导入-->
    	<link rel="stylesheet" href="/plugin/layui_ext/dtree/dtree.css">
    	<link rel="stylesheet" href="/plugin/layui_ext/dtree/font/dtreefont.css">
    	<link rel="stylesheet" href="/plugin/layui/css/layui.css" media="all">
    	
    	<script src="/plugin/layui/layui.all.js"></script>
    	<script src="/js/dTreeUtil.js"></script>
    
    	<div class="layui-inline">
    		<label class="layui-form-label">组织机构</label>
    			<div class="layui-input-inline" style="width: 398px;" >
    				<ul id="organ_dtree" class="dtree" data-id="1"  ></ul>
    			</div>
    		</div>
    
    
    <script>
    
    var organDtree ;
    		//请求下拉数据  填充下拉树数据
    		$.ajax({
    			url : '/admin/organ/loadOrganDtree',
    			type : 'get',
    			data : {},
    			success : function(res){
    				if(res.status == '0'){
    					list = res.data || [];
    					organDtree = renderDtreeData("organ_dtree",list,"暂时没有数据!",true,"only",true,"800px");
    				}
    			}
    		});
    
    //点击任意关闭下拉
    		$("body").on("click", function(event){
    			$("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
    			$("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
    		});
    
     
      var dtreeCheck =  getCheckbarNodesParam('organ_dtree'); //获取选中值
    			var organId = "";
    			if (dtreeCheck.length != 0){
    				organId = dtreeCheck[0].nodeId ;
    			}
    
    </script>
    
    
    	
    
    

    数据格式

    data: [{
    	"id": "4028820e68e4a48e0168e4d7772914e8",
    	"title": "广西壮族自治区",
    	"checkArr": "0",
    	"parentId": "0",
    	"iconClass": null,
    	"last": null,
    	"checked": null,
    	"spread": true,
    	"disabled": true,
    	"children": [{
    		"id": "a3a1704fddf3860934a44b59df6f4d6e",
    		"title": "1哈",
    		"checkArr": "0",
    		"parentId": "4028820e68e4a48e0168e4d7772914e8",
    		"iconClass": null,
    		"last": null,
    		"checked": null,
    		"spread": true,
    		"disabled": false,
    		"children": [{
    				"id": "e15f05c4af077d328dcabecd453c238e",
    				"title": "2哈",
    				"checkArr": "0",
    				"parentId": "a3a1704fddf3860934a44b59df6f4d6e",
    				"iconClass": null,
    				"last": null,
    				"checked": null,
    				"spread": true,
    				"disabled": false,
    				"children": []
    			},
    			{
    				"id": "fc946add55ab6e2673e85523e8c555ad",
    				"title": "3哈",
    				"checkArr": "0",
    				"parentId": "a3a1704fddf3860934a44b59df6f4d6e",
    				"iconClass": null,
    				"last": null,
    				"checked": null,
    				"spread": true,
    				"disabled": false,
    				"children": []
    			}
    		]
    	}]
    }]
    
    更多相关内容
  • 目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件, 不需要复杂的操作即可生产,同时支持动态从数据库引入数据 解压后有以下几部分: img文件夹: 包含树形菜单显示需要的图标 api.html : 作者写...
  • dtree所需要的dtree.css和dtree.js文件,包含小图标和API以及案例
  • 使用dTree? 给我发送一条消息,其中包含指向您的网站的链接,将在下面列出。联机查看器存在一个名为dTree图的在线查看器,类似于D3的 。 Treehouse允许任何人托管dTree图,而无需创建网站或直接与图书馆进行互动。...
  • layui dtree树形结构

    2019-03-15 16:55:35
    layui dtree树形结构,点击文本框显示下拉树结构。
  • dTree小图标

    2019-03-18 01:50:49
    NULL 博文链接:https://iamliming.iteye.com/blog/643206
  • 收集几个dTree核心的JSP树形菜单实例,本实例介绍的一种比较直观的实现方法,就是将树型菜单的节点保存在数据库表中(当然,在实际项目中,节点的信息往往并不是放在一个单一的表中的。比如:在一个权限管理系统中,...
  • 原生的dtree树插件图标比较一般,资源为图标img集合,直接替换原生dtree的图标文件夹就可以使用。使用bootstrap风格。
  • Dtree-一种简单的纯Python决策树构造算法概述给定训练数据集,它可以构建决策树,以单批或增量地进行分类或回归。 它从CSV文件加载数据。 它期望CSV中的第一行是标题,每个元素都符合模式“ name:type:mode”。 ...
  • dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点
  • dtree

    2021-01-13 09:33:19
    1.什么是dtree? 下载地址 简介 dtree 是一个由 JavaScript 编写成的简单的树形菜单组件,目前免费并且开源。 dtree 是一种简单易懂的 js 组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。 dTree ...

    1.什么是dtree?
    下载地址
    简介
    dtree 是一个由 JavaScript 编写成的简单的树形菜单组件,目前免费并且开源。
    dtree 是一种简单易懂的 js 组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。
    dTree 可以不用添加任何页面而直接用代码实现多个栏目,并可以实现无限分级。

    优点:
    无限分级
    可用于框架或非框架页面
    在不同页面之间可记住当前状态
    可以得到你想要数量的树型
    支持:Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla
    严格支持 XHTML 1.0
    每个节点用图片代替

    layui应用日益广泛的情况下,开发者对"树"这种特殊数据结构的需求日益增多,而layui-dtree的出现,极大程度的满足了各类人群对于树的不同追求。dtree发展到现在,可以总结为7大块核心功能:异步加载、复选框、菜单栏、工具栏、iframe加载、定制化换肤、下拉树等,你所见到市面上开源树的功能,dtree几乎全部囊括在内,只待你一一发掘,让她在你的项目中发光。

    使用:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
        <link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css" media="all">
        <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css" media="all">
    </head>
    <body>
    <script type="text/javascript" src="/resources/layui/layui.js"></script>
    <!--  dtree div  -->
       <div >
           <ul id="deptLeftTree" class="dtree" data-id="0">
           </ul>
    
    </div>
    </body>
    
    <script>
        layui.extend({
            dtree: '/resources/layui_ext/dtree/dtree'   // 本地dtree.js地址
        }).use(['dtree','layer','jquery'], function(){
            var dtree = layui.dtree;
            var layer = layui.layer;
            var $ = layui.jquery;
    
            // 初始化树
            var DemoTree = dtree.render({
                elem: "#deptLeftTree",
                dataStyle:"layuiStyle",
                dataFormat:"list",  //配置data的风格为list
                response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
                url:"/dept/buildLeftTree", // 使用url加载(可与data加载同时存在)
                checkbar:true //开启复选框
            });
    
            // 绑定节点点击
            dtree.on("node('demoTree')" ,function(obj){
                layer.msg(JSON.stringify(obj.param));
            });
        });
    </script>
    </html>
    
    

    展示效果:
    在这里插入图片描述
    后台具体代码:请点击点击此文章

    展开全文
  • dtree在终端中显示目录结构安装下载或克隆此仓库视窗在bin/dtree.bat文件中更改dtree.py的路径在系统路径中添加dtree.bat (环境变量)的Unix 打开您的外壳配置文件( .zshrc , .bashrc ...) 在文件末尾添加别名...
  • dtree权限控制js+全选,不全选,反选,可以自己自定义的去实现。如果没有C币的话可以在我的博客里面找,我已经贴出来了,也可以私聊我要,谢谢!
  • NULL 博文链接:https://hucanyang.iteye.com/blog/899405
  • 内容索引:脚本资源,Ajax/JavaScript,树形菜单,dTree dTree原版树形展开菜单插件下载,从示例来看,本菜单可支持四级,实际上dTree可以支持无限级,这不是什么难事,实例仅是为了演示如何使用,更详细的使用方法请...
  • dTree.js下载+API文档.rar

    2021-09-13 10:55:10
    dTree.js下载+API文档.rar
  • dtree网页工具

    2018-06-01 19:28:03
    dtreedtreedtreedtreedtreedtreedtreedtree
  • 本篇文章主要是对动态加载dtree.js树treeview的示例代码进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • dtree.js

    2019-03-18 01:50:50
    NULL 博文链接:https://iamliming.iteye.com/blog/643206
  • dtree_checkbox

    2019-03-18 01:06:42
    NULL 博文链接:https://liu-shui8.iteye.com/blog/591865
  • 最近要做一个联系人的选择框,选择联系人后,将联系人的手机号添加到网页的输入框,可以支持复选框
  • jsp使用Dtree实现树菜菜单的例子,一个利用现存的JavaScript代码配合struts构成一个树型菜单的例子。 树型菜单的节点保存在数据库表中,通过数据访问对象将其从数据库中查出后放在一个集合对象中,并将该集合对象...
  • dtree树形菜单不带单选框复选框 支持搜索,打开到搜索节点。 支持打开所有节点,关闭所有节点,不带单选框复选框
  • dtree实例,包含源码

    2018-01-09 12:42:03
    dtree事例,包含源码,js包,图片,简单易学! dtree事例,包含源码,js包,图片,简单易学!
  • 插件描述:dtree权限控制复选框插件. 参考示例:http://www.jq22.com/jquery-info5331
  • Dtree+Jquery 资料

    2019-04-03 01:29:44
    NULL 博文链接:https://lidechungo-126-com.iteye.com/blog/1470998
  • 带checkBox的dtree

    2019-05-26 01:20:36
    NULL 博文链接:https://xuexin0714.iteye.com/blog/502598
  • dtree树forhtml

    2018-06-07 14:05:53
    dtree树,HTML 树形插件,实测可用,可修改添加节点和修改代码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,331
精华内容 3,332
关键字:

dtree

友情链接: jQuery幻灯片.rar