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. 时间函数（1）：time，ctime，gmtime，localtime

    asctime(将时间和日期以字符串格式表示) #include<time.h> 定义函数 char * asctime(const struct tm * timeptr); 函数说明 ...

  2. 1.3浅谈Spring(IOC容器的实现)

    这一节我们来讨论IOC容器到底做了什么. 还是借用之前的那段代码 ClassPathXmlApplicationContext app = new ClassPathXmlApplicationCon ...

  3. 关于微信登录授权获取unionid的方法

    前言:微信登录授权是目前普遍存在于小程序的,还有一种静默授权方式是微信提供的但是不推荐使用,由于不同设备登录openid是不同的那么我们应该怎样拿到一个唯一的ID呢,下面做分享 wxml代码 < ...

  4. 13、 使用openpyxl存储周杰伦的歌曲信息

      import requests import openpyxl res = requests.get('https://c.y.qq.com/soso/fcgi-bin/client_search ...

  5. 老是上不了 google scholar...

    这段时间老是上不了 google scholar... 下载了最新的 host 也不行. 难道真是电脑有问题了? 网络有时也老是掉... 也好. 多休息休息. 人生难得几回清闲. 马上就要开学咯. 课 ...

  6. [物理学与PDEs]第4章第3节 一维反应流体力学方程组 3.3 一维反应流体力学方程组的数学结构

    一维理想反应流体力学方程组是一阶拟线性双曲组.

  7. EffectiveC++ 第1章 让自己习惯C++

    我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」. Chapter 1 让自己习惯C++ 条款 1 :视 C++为一个语言 ...

  8. C++实现递归版二分搜索算法

    无聊撸了一个,没啥技术含量,别吐槽.. #include <iostream> using namespace std; int BinarySearch(int* nums,int ke ...

  9. C#(在WeBAPI)获取Oracle(在PL/SQL)游标类型的存储过程（用到了RefCursor）

    需求:WebAPI服务端,通过Oracle数据库的存储过程,获取数据. 在PL/SQL 建立存储过程:(先来最简单的,就是把整个表都查出来) create or replace procedure S ...

  10. Django之分页

    需要知道:每页多少条数据.一共多少条数据.一共需要多少页.每页从哪开始到哪结束 注意问题:1.用户输入页码为非数字.  2.用户输入页码超出页码范围 def books(request): try: ...