PHP循环构造目录树结构

 <ul>

  <php>

       function digui($fid,$level){

         $class=M("wangpan_class")->where('fid='.$fid)->select();

        foreach($class as $v){

              		$child=M("wangpan_class")->where('fid='.$v['id'])->select();//如果不为空，表示有子类

			if(!empty($child)){

			echo "<li>".str_repeat("  ",$level)."┗".$v['name']."<ul>";

			}else{

				echo "<li>".str_repeat("  ",$level)."┗".$v['name']."</li>";

				}

             digui($v['id'],$level+1);

			if(!empty($child)){

			echo "</ul></li>";//如果有子类才输出ul / li

			}

            }

        }

		 digui(0,0);

 </php>

</ul>

jsTree DEMO

实现点击获取节点ID，实现配置复选框

/*jsTree代码begin  */

 $('#jstree').jstree();

 $("#jstree").jstree({

    "types" : {

      "default" : {

        "icon" : "glyphicon glyphicon-flash"

      },

      "demo" : {

        "icon" : "glyphicon glyphicon-ok"

      }

    },

    "plugins" : [ "types" ]

  });   // 7 bind to events triggered on the tree

 /* 开启checkbox

 $("#jstree").jstree({

    "checkbox" : {

      "keep_selected_style" : false

    },

    "plugins" : [ "checkbox" ]

  });*/

   $("#plugins")

    .on("changed.jstree", function (e, data) {

      console.log(data.changed.selected); // newly selected

      console.log(data.changed.deselected); // newly deselected

    })

    .jstree({

      "plugins" : [ "changed" ]

    });

  $('#jstree').on("changed.jstree", function (e, data) {

      console.log(data.selected);

       var id = $(e.target).html();

     // alert(id);

    });

  $('#jstree').bind("activate_node.jstree", function (obj, e) {

    // 获取当前节点

    alert(e.node.id);//得到被点击节点的id

});      

 /*end  jsTree*/

https://www.jstree.com/

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>jsTree test</title>

  <!-- 2 load the theme CSS file -->

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

</head>

<body>

  <!-- 3 setup a container element -->

 <div id="jstree">

    <!-- in this example the tree is populated from inline HTML -->

    <ul>

            <li>Child node 0-1</li>

            <li>Child node 0-2</li>

            <li>Child node 0-3</li>

        <li>Root node 1

        <ul>

            <li>Child node 1-1</li>

            <li>Child node 1-2</li>

            <li>Child node 1-3</li>

        </ul>

        </li>

        <li>Root node 2

        <ul>

            <li>Child node 2-1<ul>

                <li>Child node 2-3-1</li>

                <li>Child node 2-3-2</li>

                <li>Child node 2-3-3</li>

            </ul></li>

            <li>Child node 2-2</li>

            <li>Child node 2-3

            <ul>

                <li>Child node 2-3-1</li>

                <li>Child node 2-3-2</li>

                <li>Child node 2-3-3</li>

            </ul>

            </li>

        </ul>

        </li>

    </ul>

</div>

  <button>demo button</button>

  <!-- 4 include the jQuery library -->

  <script src="dist/libs/jquery.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

  <!-- 5 include the minified jstree source -->

  <script src="dist/jstree.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

  <script>

  $(function () {

    // 6 create an instance when the DOM is ready

    $('#jstree').jstree();

    // 7 bind to events triggered on the tree

    $('#jstree').on("changed.jstree", function (e, data) {

      console.log(data.selected);

    });

    // 8 interact with the tree - either way is OK

    $('button').on('click', function () {

      $('#jstree').jstree(true).select_node('child_node_1');

      $('#jstree').jstree('select_node', 'child_node_1');

      $.jstree.reference('#jstree').select_node('child_node_1');

    });

  });

  </script>

</body>

</html>

jstree官网：https://www.jstree.com/

1.需要导入的文件

<link rel="stylesheet" href="dist/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="dist/jstree.min.js"></script>

2.在页面上创建一个jstree容器（div）

<div id="jstree_demo_div"></div>

3.创建一个jstree实例

<script type="text/javascript">

	$('#jstree_demo_div1').jstree({'plugins':["wholerow","checkbox"], 'core' : {

		'data' : [

			{

				"text" : "Same but with checkboxes",

				"children" : [

					{ "text" : "initially selected", "state" : { "selected" : true } },

					{ "text" : "custom icon URL"},

					{ "text" : "initially open", "state" : { "opened" : true }, "children" : [ "Another node" ] },

					{ "text" : "custom icon class"}

				]

			},

			"And wholerow selection"

		]

	}});

</script>

效果：


4.ajax动态加载jstree

$.getJSON("/FIMS/api/rest/RolePermission/loadPermissionTreeData",{ts_role_id:ts_role_id}, function(json){

		$('#rolePermissionTree').jstree({'plugins':['checkbox'], 'core' : {

				'data' : json.datalist

		}});

	}

);

5.清空树（数据库的信息更新后想要刷新树，先要清空树）

$('#perjstree').data('jstree', false).empty();

6.绑定节点点击事件

$('#orgjstree').bind("activate_node.jstree", function (obj, e) {

	// 获取当前节点

	alert(e.node.id);//得到被点击节点的id

});

7.得到所有被选中的节点的id（先加上'plugins':["checkbox"]，使所有的节点前面加上checkbox）

var ids = $('#rolePermissionTree').jstree().get_checked();

JQuery 目录树jsTree插件用法的更多相关文章

  1. jquery jstree 插件的使用

    最近一个项目 需要用到jstree 这个jQuery插件,就研究了下,做目录树 菜单还是很强大的,下面对经常会用到几个用法做下说明. 1. 首先页面 引用 jquery.jstree 2. html ...

  2. 利用jstree插件轻松构建树应用

    最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...

  3. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  4. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  5. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  6. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  7. JQuery文件上传插件JQuery.upload.js的用法简介

    JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...

  8. 表达式目录树插件xLiAd.SqlEx.Core

    表达式目录树使用时 引用xLiAd.SqlEx.Core ,是一个很好的插件 using xLiAd.SqlEx.Core.Helper; Expression<Func<Reported ...

  9. 【.net 深呼吸】将目录树转化为文本

    大伙都知道,文件系统是树形结构的,有时候我们会想到把目录的层次结构变为纯文本形式,就像这样: ├─Windows-universal-samples-master │ ├─Samples │ │ ├─ ...

随机推荐

  1. Python的编码和解码

    Python的编码和解码 在不同的国家,存在不同的文字,由于现在的软件都要做到国际化通用,所以必须要有一种语言或编码方式,来实现各种编码的解码,然后重新编码. 在西方国家,没有汉字,只有英文,所以最开 ...

  2. Pandas系列（三）-缺失值处理

    内容目录 1. 什么是缺失值 2. 丢弃缺失值 3. 填充缺失值 4. 替换缺失值 5. 使用其他对象填充 数据准备 import pandas as pd import numpy as np in ...

  3. python 线程/线程锁/信号量

    单线程 #常规写法 import threading import time def sayhi(num): # 定义每个线程要运行的函数 print("running on number: ...

  4. DirectX11 With Windows SDK--17 利用几何着色器实现公告板效果

    前言 上一章我们知道了如何使用几何着色器将顶点通过流输出阶段输出到绑定的顶点缓冲区.接下来我们继续利用它来实现一些新的效果,在这一章,你将了解: 实现公告板效果 Alpha-To-Coverage 对 ...

  5. LFYZ-OJ ID: 1024 火车站

    火车过站 问题描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下车的人数相同,因此在第2站开出时(即在到达第3站之前)车上的人数保持为a人.从 ...

  6. oldboy s21day13装饰器和推导式

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 2.请为 func 函数编写一个装饰器,添加上装饰器后可以实现:执行func时,先输入"befor ...

  7. 关于使用 JSON.parse()报 VM141:1 Uncaught SyntaxError 的解决方案

    今天在使用ajax的后期,老师问我们怎么json解析对象,然后上百度搜了一下:大概有三个方式 var str = '{"name":"小明","age ...

  8. 查看和设置MySQL数据库字符集(转)

    查看和设置MySQL数据库字符集作者:scorpio 2008-01-21 10:05:17 标签: 杂谈 Liunx下修改MySQL字符集:1.查找MySQL的cnf文件的位置find / -ina ...

  9. win10下maven的安装与配置

    下载apache-maven-3.5.3-bin.zip并解压: 环境配置: 系统环境:添加=>MAVEN_HOME 值为apache-maven-3.5.3的路径(D:\xxx\apache- ...

  10. iTOP-开发板-MiniLinux-C程序调用shell命令

    本文档介绍的是在 linux 系统环境下 linux-C 调用 shell 命令实验步骤,和文档压缩包一起的“iTOP-开发板-MiniLinux-SHELL_V1.0.zip”是 c 程序源码.Li ...