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. Breastcancer社区评论下载

    首页 某个社区 某社区的一个话题 目标:获取这个网站所有话题的所有评论相关信息 python实现 # -*- coding: utf-8 -*- """ @Datetim ...

  2. 使用docker部署SqlServer

    踩了很多坑,来记录一下 首先说sqlserver 1. 安装docker要使用centos 7以上版本,使用centos 6及以下版本会出现各种问题 2. docker CE安装过程 $ sudo y ...

  3. [物理学与PDEs]第3章第5节 一维磁流体力学方程组 5.2 一维磁流体力学方程组的 Lagrange 形式

    由 $$\bex \cfrac{\p \rho}{\p t}&+u_1\cfrac{\p \rho}{\p x}+\rho\cfrac{\p u_1}{\p x}=0, \eex$$ 我们可以 ...

  4. 二维、三维 Laplace 算子的极坐标表示

    (1) 设 $(r,\theta)$ 是 $\bbR^2$ 的极坐标, 即 $$\bex x=r\cos\theta,\quad y=r\sin \theta. \eex$$ 证明 Laplace 算 ...

  5. Coursera, Big Data 3, Integration and Processing (week 5)

    Week 5, Big Data Analytics using Spark     Programing in Spark   Spark Core: Programming in Spark us ...

  6. PnP 问题方程怎么列？

    PnP 问题即 Perspective-n-Point . 有 P3P 方法,使用三个点对就能求解.但是先按照熟悉的方法,写一写.最后写 P3P 方法,P3P 方法还是比较晦涩的,不是无脑方法. 1. ...

  7. MySql常见的数据类型

    ⒈整型 名称 字节数 tinyint 1 smallint 2 mediumint 3 int/integer 4 bigint 8 特点: 1.如果不设置无符号还是有符号,默认是有符号,如果想设置无 ...

  8. 【原创】Linux基础之挂载硬盘

    1 查看哪些硬盘没有挂载 # fdisk -l Disk /dev/vdb: 107.4 GB, 107374182400 bytes, 209715200 sectorsUnits = sector ...

  9. 【web】服务器推送的实现方式（转）

    轮询 http流 websocket   https://www.cnblogs.com/freud/p/8397934.html http2.0 浅谈Websocket.Ajax轮询和长连接(lon ...

  10. php的参数函数与可变参

    在php5.5及更早的版本中,使用func_num_args(), func_get_arg(), func_get_args()函数实现. <?php function myfunc(){ / ...