master

分支 (1)

管理

管理

master

light-year-admin-using-v5-for-example
/
lyear_js_jstree.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>树状结构插件jstree - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="js/jstree/style.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>

</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">树状结构插件 jstree</div>
  	    </header>
  		<div class="card-body">

  		  <p>插件使用jstree 3.3.9，官网地址：<a href="http://jstree.com/" target="_blank">http://jstree.com/</a></p>

  	    </div>
  	  </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-header"><div class="card-title">类型树视图</div></div>
        <div class="card-body">
          <div id="types-tree"></div>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-header"><div class="card-title">复选框树视图</div></div>
        <div class="card-body">
          <div id="checkbox-tree"></div>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-header"><div class="card-title">拖放树视图</div></div>
        <div class="card-body">
          <div id="drag-drop-tree"></div>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-header"><div class="card-title">Ajax树视图</div></div>
        <div class="card-body">
          <div id="ajax-tree"></div>
        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/jstree/jstree.min.js"></script>
<script type="text/javascript">
(function() {
    "use strict";
    /* -- Basic Tree -- */
    $('#types-tree').jstree({
        'core' : {
            'themes' : {
                'responsive': false
            },
            'data' : [
                  {
                      "text" : "Project",
                      "state" : {"opened" : true },
                      "icon" : "mdi mdi-folder-outline",
                      "children" : [
                          {
                            "text" : "Assets",
                            "state" : { "opened" : true },
                            "icon" : "mdi mdi-folder-outline",
                             "children" : [
                                  { "text" : "CSS", "state" : { "opened" : true }, "icon" : "mdi mdi-file-outline" },
                                  { "text" : "JS", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Fonts", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Images", "icon" : "mdi mdi-file-outline" },
                                  {
                                    "text" : "Plugins",
                                    "state" : { "opened" : true },
                                    "icon" : "mdi mdi-folder-outline",
                                    "children" : [
                                          { "text" : "jQuery", "icon" : "mdi mdi-file-outline" },
                                          { "text" : "Bootstrap", "state" : { "selected" : true, "opened" : true }, "icon" : "mdi mdi-file-outline" }
                                      ]
                                  }
                              ]
                          },
                          {
                            "text" : "Icons",
                            "icon" : "mdi mdi-opacity"
                          },
                          {
                            "text" : "Events",
                            "icon" : "mdi mdi-calendar"
                          },
                          {
                            "text" : "UI Kits",
                            "state" : { "opened" : true },
                            "icon" : "mdi mdi-package-variant-closed",
                            "children" : [
                                  { "text" : "Buttons", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Badges", "icon" : "mdi mdi-file-outline" }
                              ]
                          },
                          {
                            "text" : "Forms",
                            "icon" : "mdi mdi-file-document"
                          },
                          {
                            "text" : "Charts",
                            "icon" : "mdi mdi-chart-pie"
                          },
                          {
                            "text" : "Pages",
                            "state" : { "opened" : true },
                            "icon" : "mdi mdi-book-open-variant",
                            "children" : [
                                  { "text" : "Coming Soon", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Maintenance", "icon" : "mdi mdi-file-outline" }
                              ]
                          },
                          {
                            "text" : "Tables",
                            "icon" : "mdi mdi-table"
                          },
                      ]
                },
                {
                    "text" : "Documents",
                    "state" : { "opened" : true },
                    "icon" : "mdi mdi-folder-outline"
                }
              ]
        },
        'plugins' : ['types']
    });
    /* -- Checkbox Tree -- */
    $('#checkbox-tree').jstree({
        'core' : {
            'themes' : {
                'responsive': false
            },
            'data' : [
                  {
                      "text" : "Project",
                      "state" : {"opened" : true },
                      "icon" : "mdi mdi-folder-outline",
                      "children" : [
                          {
                            "text" : "Assets",
                            "state" : { "opened" : true },
                            "icon" : "mdi mdi-folder-outline",
                             "children" : [
                                  { "text" : "CSS", "state" : { "opened" : true }, "icon" : "mdi mdi-file-outline" },
                                  { "text" : "JS", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Fonts", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Images", "icon" : "mdi mdi-file-outline" },
                                  {
                                    "text" : "Plugins",
                                    "state" : { "opened" : true },
                                    "icon" : "mdi mdi-folder-outline",
                                    "children" : [
                                          { "text" : "jQuery", "icon" : "mdi mdi-file-outline" },
                                          { "text" : "Bootstrap", "state" : { "selected" : true, "opened" : true }, "icon" : "mdi mdi-file-outline" }
                                      ]
                                  }
                              ]
                          },
                          {
                            "text" : "Icons",
                            "icon" : "mdi mdi-opacity"
                          },
                          {
                            "text" : "Events",
                            "icon" : "mdi mdi-calendar"
                          },
                          {
                            "text" : "UI Kits",
                            "state" : { "opened" : true },
                            "icon" : "mdi mdi-package-variant-closed",
                            "children" : [
                                  { "text" : "Buttons", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Badges", "icon" : "mdi mdi-file-outline" }
                              ]
                          },
                          {
                            "text" : "Forms",
                            "icon" : "mdi mdi-file-document"
                          },
                          {
                            "text" : "Charts",
                            "icon" : "mdi mdi-chart-pie"
                          },
                          {
                            "text" : "Pages",
                            "state" : { "opened" : true },
                            "icon" : "mdi mdi-book-open-variant",
                            "children" : [
                                  { "text" : "Coming Soon", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Maintenance", "icon" : "mdi mdi-file-outline" }
                              ]
                          },
                          {
                            "text" : "Tables",
                            "icon" : "mdi mdi-table"
                          },
                      ]
                },
                {
                    "text" : "Documents",
                    "state" : { "opened" : true },
                    "icon" : "mdi mdi-folder-outline"
                }
              ]
        },
        'plugins' : ['types', 'checkbox']
    });
    /* -- Drag & Drop Tree -- */
    $('#drag-drop-tree').jstree({
        'core' : {
            'themes' : {
                'responsive': false
            },
            'check_callback' : true,
            'data' : [
                  {
                      "text" : "Project",
                      "state" : {"opened" : true },
                      "icon" : "mdi mdi-folder-outline",
                      "children" : [
                          {
                            "text" : "Assets",
                            "state" : { "opened" : true },
                            "icon" : "mdi mdi-folder-outline",
                             "children" : [
                                  { "text" : "CSS", "state" : { "opened" : true }, "icon" : "mdi mdi-file-outline" },
                                  { "text" : "JS", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Fonts", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Images", "icon" : "mdi mdi-file-outline" },
                                  {
                                    "text" : "Plugins",
                                    "state" : { "opened" : true },
                                    "icon" : "mdi mdi-folder-outline",
                                    "children" : [
                                          { "text" : "jQuery", "icon" : "mdi mdi-file-outline" },
                                          { "text" : "Bootstrap", "state" : { "selected" : true, "opened" : true }, "icon" : "mdi mdi-file-outline" }
                                      ]
                                  }
                              ]
                          },
                          {
                            "text" : "Icons",
                            "icon" : "mdi mdi-opacity"
                          },
                          {
                            "text" : "Events",
                            "icon" : "mdi mdi-calendar"
                          },
                          {
                            "text" : "UI Kits",
                            "state" : { "opened" : true },
                            "icon" : "mdi mdi-package-variant-closed",
                            "children" : [
                                  { "text" : "Buttons", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Badges", "icon" : "mdi mdi-file-outline" }
                              ]
                          },
                          {
                            "text" : "Forms",
                            "icon" : "mdi mdi-file-document"
                          },
                          {
                            "text" : "Charts",
                            "icon" : "mdi mdi-chart-pie"
                          },
                          {
                            "text" : "Pages",
                            "state" : { "opened" : true },
                            "icon" : "mdi mdi-book-open-variant",
                            "children" : [
                                  { "text" : "Coming Soon", "icon" : "mdi mdi-file-outline" },
                                  { "text" : "Maintenance", "icon" : "mdi mdi-file-outline" }
                              ]
                          },
                          {
                            "text" : "Tables",
                            "icon" : "mdi mdi-table"
                          },
                      ]
                },
                {
                    "text" : "Documents",
                    "state" : { "opened" : true },
                    "icon" : "mdi mdi-folder-outline"
                }
              ]
        },
        'plugins' : ['dnd']
    });
    /* -- Ajax Tree -- */
    $('#ajax-tree').jstree({
        'core' : {
            'animation' : 0,
            'check_callback' : true,
            'force_text' : true,
            'themes' : {
                'responsive': false
            },
            'data' : {
                'url' : function (node) {
                    return node.id === '#' ? './data/ajax_roots.json' : './data/ajax_children.json';
                },
                'data' : function (node) {
                    return { 'id' : node.id };
                }
            }
        },
        "types" : {
            'default' : {
                'icon' : 'mdi mdi-folder-outline'
            },
            'file' : {
                'icon' : 'mdi mdi-file-outline'
            }
        },
        "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]
    });
})();
</script>
</body>
</html>