JQuery 目录树jsTree插件用法

最新推荐文章于 2021-03-22 07:44:36 发布

weixin_30859423

最新推荐文章于 2021-03-22 07:44:36 发布

阅读量478

点赞数

文章标签： json 数据库 php

原文链接：http://www.cnblogs.com/xtmp/p/6894512.html

版权

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*/

View Code

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>

View Code

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();

转载于:https://www.cnblogs.com/xtmp/p/6894512.html

weixin_30859423

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫