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. C# LINQ语法详解

    1.简单的linq语法 var ss = from r in db.Am_recProScheme select r; var ss1 = db.Am_recProScheme; string sss ...

  2. Numpy系列（六）- 形状操作

    Numpy 有一个强大之处在于可以很方便的修改生成的N维数组的形状. 更改数组形状 数组具有由沿着每个轴的元素数量给出的形状: a = np.floor(10*np.random.random((3, ...

  3. 图解Tomcat类加载机制(阿里面试题)

    Tomcat的类加载机制是违反了双亲委托原则的,对于一些未加载的非基础类(Object,String等),各个web应用自己的类加载器(WebAppClassLoader)会优先加载,加载不到时再交给 ...

  4. MySQL安全配置向导mysql_secure_installation详解

    安装完mysql-server 会提示可以运行mysql_secure_installation.运行mysql_secure_installation会执行几个设置:  a)为root用户设置密码  ...

  5. css预编译语言 sass scss（变量$var, css嵌套规则，@import规则，@extend，@mixin）

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  6. 轴对称 Navier-Stokes 方程组的一个点态正则性准则

    对轴对称 NSE, 我们改进了 [Pan, Xinghong. A regularity condition of 3d axisymmetric Navier-Stokes equations. A ...

  7. Contest2156 - 2019-3-7 高一noip基础知识点 测试2 题解版

    传送门 预计得分:100+70+100+50=320 实际得分100+63+77+30=270 Ctrl_C+Ctrl_V时不要粘贴翻译的,直接粘原文, In a single line of the ...

  8. Hive_1

    Sqoop实现Hbase和关系型数据库的数据互导 Zookeeper 配置的更新,文件的命名 Hive是建立在Hadoop之上为了减少MapReduce jobs编写工作的批处理系统,HBase是为了 ...

  9. Django跨域请求

    一.jsonp方式 同源策略会阻止ajaxa请求,但不阻止src. jsonp方式其实是利用了<script>标签可以直接跨域的性质,在body中生成一个<script>标签, ...

  10. spring cloud 注册中心--eureka注册与发现

    本文详细介绍spring cloud微服务的默认注册中心--eureka注册与发现.开发环境需要Windows系统.jdk和intellij idea.与zookeeper注册中心相比,eureka不 ...