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. CMDB服务器管理系统【s5day92】：定制表头

    一.目录结构 二.获取数据,模板语言渲染 web\views.py import json from django.shortcuts import render,HttpResponse from ...

  2. MessageFormat的用法,java动态替换String字符串中的占位符

    import java.text.MessageFormat; import java.util.GregorianCalendar; import java.util.Locale; public ...

  3. 402 CSS菜鸟：transform and transition

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. java PDF2JPG

    import org.apache.commons.lang3.StringUtils; import org.apache.pdfbox.pdmodel.PDDocument; import org ...

  5. js设置document.domain实现跨域

    document.domain 只能实现跨子域的问题 如:xxx.com/a.html 和aaa.xxx.com/b.html 或:bbb,xxx.com/c.html 和ccc.xxx.com/d. ...

  6. python加密

    ""#line:4 __all__ =[]#line:6 class OO0O0O000O0O0O000 :#line:8 ""#line:9 def __in ...

  7. FizzBuzz

    写一个程序,输出从 1 到 n 数字的字符串表示. 1. 如果 n 是3的倍数,输出“Fizz”: 2. 如果 n 是5的倍数,输出“Buzz”: 3.如果 n 同时是3和5的倍数,输出 “FizzB ...

  8. Mysql --创建用户和授权,备份

    权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作.那么一般情况在公司之后DBA工程师会创建一个 ...

  9. java类型转换小技巧

    mysql 之排序显示行号 select @r := @r+1 as rownum,birth,cardNo from card,(select @r:=0)torder by birth ASC

  10. 【python】__import__

    函数定义 __import__(name, globals={}, locals={}, fromlist=[], level=-1) -> module Import a module. Be ...