完整代码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
  8.     <title>H+ 后台主题UI框架 - 文件管理器</title>
  9.     <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  10.     <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
  11.  
  12.     <link rel="shortcut icon" href="favicon.ico">
  13.     <link href="__STATIC__/h5/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  14.     <link href="__STATIC__/h5/css/font-awesome.css?v=4.4.0" rel="stylesheet">
  15.     <link href="__STATIC__/h5/css/plugins/jsTree/style.min.css" rel="stylesheet">
  16.     <link href="__STATIC__/h5/css/animate.css" rel="stylesheet">
  17.     <link href="__STATIC__/h5/css/style.css?v=4.1.0" rel="stylesheet">
  18.  
  19.     <style>
  20.         /*封面*/
  21.         .cover-img .left{width: 100px; height: 100px;
  22.             float:left;}
  23.         .cover-img .left i{font-size: 100px; color: #dadada}
  24.         .cover-img .rig{float: left; padding-left: 10px;}
  25.  
  26.         .jstree-open > .jstree-anchor > .fa-folder:before {content: "\f07c";}
  27.         .jstree-default .jstree-icon.none {  width: ;}
  28.  
  29.     </style>
  30. </head>
  31.  
  32. <body class="gray-bg">
  33. <div class="wrapper wrapper-content">
  34.     <div class="row">
  35.         <div class="col-sm-2">
  36.             <div class="ibox float-e-margins">
  37.                 <div class="ibox-content">
  38.                     <div class="file-manager">
  39.                         <div class="cover-img clearfix">
  40.                             <div class="left">
  41.                                 <div class="icon">
  42.                                     <i class="fa fa-file"></i>
  43.                                 </div>
  44.                             </div>
  45.                             <div class="rig">
  46.                                 <h5>缩略图</h5>
  47.  
  48.                             </div>
  49.                         </div>
  50.                         <div class="hr-line-dashed"></div>
  51.                         <h5 class="tag-title">功能</h5>
  52.                         <ul class="tag-list" style="padding: 0">
  53.                             <li><a href="file_manager.html" data-toggle="modal" data-target="#Folder">创建文件夹</a></li>
  54.                             <li><a href="javascript:window.open('{:url("img/upload")}','','width=750,height=565,top=205,left=220,toolbar=no, menubar=no, scrollbars=no, resizable=no');"  target="_blank">上传图片</a></li>
  55.                             <li><a href="file_manager.html">全选</a>
  56.                             </li>
  57.                             <li><a href="file_manager.html">取消</a>
  58.                             </li>
  59.  
  60.                             <li><a href="javascript:demo_create()">添加</a></li>
  61.                             <li><a href="javascript:demo_rename()">修改</a></li>
  62.                             <li><a href="javascript:demo_delete()">删除</a></li>
  63.  
  64.                         </ul>
  65.                         <div class="clearfix"></div>
  66.  
  67.                         <div class="hr-line-dashed"></div>
  68.                             <div style="padding-bottom: 10px"><input type="email" placeholder="搜索目录" class="form-control" id="folder-search"></div>
  69.                             <div id="jstree1"></div>
  70.                     </div>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.         <div class="col-sm-10 animated fadeInRight">
  75.             <div class="row">
  76.                 <div class="col-sm-12">
  77.                     <div class="file-box">
  78.                         <div class="file">
  79.                             <a href="file_manager.html#">
  80.                                 <span class="corner"></span>
  81.  
  82.                                 <div class="icon">
  83.                                     <i class="fa fa-file"></i>
  84.                                 </div>
  85.                                 <div class="file-name">
  86.                                     <input type="checkbox" id="inlineCheckbox2" value="option1" checked="">Document_2014.doc
  87.                                     <br/>
  88.                                     <small>添加时间：--</small>
  89.                                 </div>
  90.                             </a>
  91.                         </div>
  92.  
  93.                     </div>
  94.                     <div class="file-box">
  95.                         <div class="file">
  96.                             <a href="file_manager.html#">
  97.                                 <span class="corner"></span>
  98.  
  99.                                 <div class="image">
  100.                                     <img alt="image" class="img-responsive" src="__STATIC__/h5/img/p1.jpg">
  101.                                 </div>
  102.                                 <div class="file-name">
  103.                                     <input type="checkbox"  value="option1" checked="">Italy street.jpg
  104.                                     <br/>
  105.                                     <small>添加时间：--</small>
  106.                                 </div>
  107.                             </a>
  108.  
  109.                         </div>
  110.                     </div>
  111.  
  112.                 </div>
  113.             </div>
  114.         </div>
  115.     </div>
  116. </div>
  117.  
  118. <!--隐藏层Model-->
  119. {/*创建文件夹*/}
  120. <div class="modal inmodal" id="Folder" tabindex="-1" role="dialog"  aria-hidden="true">
  121.     <div class="modal-dialog">
  122.         <div class="modal-content animated fadeIn">
  123.             <div class="modal-header">
  124.                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  125.                 <i class="fa fa-clone modal-icon"></i>
  126.                 <h4 class="modal-title">创建文件夹</h4>
  127.  
  128.             </div>
  129.             <div class="modal-body">
  130.  
  131.                 <div class="form-group"><label></label> <input type="name" placeholder="请输入内容" class="form-control"></div>
  132.             </div>
  133.             <div class="modal-footer">
  134.                 <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
  135.                 <button type="button" class="btn btn-primary">保存</button>
  136.             </div>
  137.         </div>
  138.     </div>
  139. </div>
  140.  
  141. <!--隐藏层-->
  142.  
  143. <!-- 全局js -->
  144. <script src="__STATIC__/h5/js/jquery.min.js?v=2.1.4"></script>
  145. <script src="__STATIC__/h5/js/bootstrap.min.js?v=3.3.6"></script>
  146.  
  147. <!-- jsTree plugin javascript -->
  148. <script src="__STATIC__/h5/js/plugins/jsTree/jstree.js"  type="text/javascript"></script>
  149.  
  150. <!-- 自定义js -->
  151. <script src="__STATIC__/h5/js/content.js?v=1.0.0"></script>
  152.  
  153. <script>
  154.     $(document).ready(function () {
  155.         $('.file-box').each(function () {
  156.             //animationHover(this, 'pulse');
  157.         });
  158.     });
  159. </script>
  160. <script>
  161. $(document).ready(function () {
  162.  
  163.     $('#jstree1').jstree({
  164.         'core' : {
  165.             "animation" : ,
  166.             "check_callback" : true,
  167.             'force_text' : true,
  168.             "themes" : { "stripes" : true },
  169.             'data' : {
  170.                 // 获取默认数据
  171.                 "url":"{:url('img/imgFolder/jsTree')}",
  172.                 "dataType" : "json",
  173.                 "data" : function (node) {
  174.                     return { "id" : node.id };
  175.  
  176.                 },
  177.                 "success":function(){
  178.                     //alert(1)
  179.                 }
  180.             }
  181.         },
  182.         "plugins" : [ "dnd", "search", "state", "types", "wholerow","sort" ],
  183.         // 排序
  184.         "sort" : function(a, b) {
  185.                 return this.get_type(a) === this.get_type(b) ? (this.get_text(a) > this.get_text(b) ?  : -) : (this.get_type(a) >= this.get_type(b) ?  : -);
  186.          }
  187.  
  188.     });
  189.  
  190.     // 查询目录
  191.     var to = false;
  192.     $('#folder-search').keyup(function () {
  193.         if(to) { clearTimeout(to); }
  194.         to = setTimeout(function () {
  195.             var v = $('#folder-search').val();
  196.             $('#jstree1').jstree(true).search(v);
  197.         }, );
  198.     });
  199.  
  200.     // 拖动更改分类属性
  201.     $( "#jstree1" ).on('move_node.jstree', function(e,data){
  202.         console.info(data);
  203.         $.ajax({
  204.             url:"{:url('img/imgFolder/ajaxEdit')}",
  205.             data:{id : data.node.id,pid : data.parent,},
  206.             success:function(res){
  207.                 if(res.code!=)alert(res.msg);
  208.             },error:function(){
  209.                 alert("Ajax Error");
  210.             }
  211.         })
  212.  
  213.    })
  214.  
  215. });
  216. // 创建
  217. function demo_create() {
  218.     var ref = $('#jstree1').jstree(true), sel = ref.get_selected();
  219.     if(!sel.length) { return false; }
  220.     sel = sel[];
  221.     var id = sel;   // 父级id
  222.  
  223.     sel = ref.create_node(sel, {"type":"file"});
  224.     var defaultName = '新建文件夹'
  225.     if(sel) {
  226.  
  227.         ref.edit(sel,defaultName,function(){
  228.             var name = ref.get_text(sel);
  229.             $.ajax({
  230.                 url:"{:url('img/imgFolder/ajaxAdd')}",
  231.                 data:{'id':id,'name':name},
  232.                 success:function(res){
  233.                     if(res.code!=){
  234.                         alert(res.msg);
  235.                     }
  236.                 },error:function(){
  237.                     alert('Ajax Error');
  238.                 }
  239.             });
  240.  
  241.         });
  242.     }
  243.  
  244. }
  245. //更名
  246. function demo_rename() {
  247.     var ref = $('#jstree1').jstree(true),
  248.     sel = ref.get_selected();
  249.     if(!sel.length) { return false; }
  250.     sel = sel[];
  251.     ref.edit(sel,ref.get_text(sel),function(){
  252.         var name = ref.get_text(sel);
  253.         $.ajax({
  254.             url:"{:url('img/imgFolder/ajaxEdit')}",
  255.             data:{'id':sel,'name':name},
  256.             success:function(res){
  257.                 if(res.code ==){
  258.                    alert(res.msg);
  259.                 }
  260.             },error:function(){
  261.                 alert('Ajax Error');
  262.             }
  263.         })
  264.  
  265.     });
  266.  
  267. }
  268.  
  269. // 删除
  270. function demo_delete() {
  271.     var ref = $('#jstree1').jstree(true);
  272.     var sel = ref.get_selected();
  273.     if(!sel.length) { return false; }
  274.     var r=confirm("确定删除?")
  275.     //console.log(sel[0])
  276.     var id = sel[]
  277.     if (r==true)
  278.     {
  279.         $.ajax({
  280.             url:"{:url('img/imgFolder/ajaxdel')}",
  281.             data:{'id':id},
  282.             success:function(res){
  283.                 //console.log(res)
  284.                 if(res.code ==){
  285.                     ref.delete_node(id);
  286.                 }else{
  287.                     alert(res.msg)
  288.                 }
  289.             },
  290.             error:function(){
  291.                 alert("Ajax Error")
  292.             }
  293.         });
  294.  
  295.     }
  296.  
  297. }
  298.  
  299. </script>
  300.  
  301. </body>
  302. </html>

另类写法：

  1.  $('#jstree_demo')
  2.                                  .jstree({
  3.                                      "core" : {
  4.                                          "animation" : 0,
  5.                                          "check_callback" : true,
  6.                                          'force_text' : true,
  7.                                          "themes" : { "stripes" : true },
  8.                                          'data' : {
  9.                                              'url' : function (node) {
  10. 10                                                 return node.id === '#' ? '/static/3.3.5/assets/ajax_demo_roots.json' : '/static/3.3.5/assets/ajax_demo_children.json';
  11. 11                                             },
  12.                                              'data' : function (node) {
  13.                                                  return { 'id' : node.id };
  14.                                              }
  15.                                          }
  16.                                      },
  17.                                      "types" : {
  18.                                          "#" : { "max_children" : 1, "max_depth" : 4, "valid_children" : ["root"] },
  19.                                          "root" : { "icon" : "/static/3.3.5/assets/images/tree_icon.png", "valid_children" : ["default"] },
  20.                                          "default" : { "valid_children" : ["default","file"] },
  21.                                          "file" : { "icon" : "glyphicon glyphicon-file", "valid_children" : [] }
  22.                                      },
  23.                                      "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]
  24.                                  });
  25.                          });

plugins挂件参考

参考网址：https://www.jstree.com/plugins/

jsTree 插件Ajax数据的更多相关文章

  1. jsTree通过AJAX从后台获取数据

    页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { ...

  2. Bootstrap分页插件ajax返回数据，工具类的编写

    使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...

  3. 利用jstree插件轻松构建树应用

    最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...

  4. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  5. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

  6. .net 信息采集ajax数据

    .net 信息采集ajax数据 关于.net信息采集的资料很多,但是如果采集的网站是ajax异步加载数据的模式,又如何采集呢?今天就把自己做信息采集时,所遇到的一些问题和心得跟大家分享一下. 采集网站 ...

  7. django建立管理系统之五----单页ajax数据交互

    ajax数据提交: 需求: 1. 点击ajax方式提交后数据提交到后台数据库,并且在前台实现数据更新 a.可以用刷新页面来实现数据页面的更新 对应的html,实现局部刷新(可以用刷新页面实现,例如 $ ...

  8. kkpager的改进,Ajax数据变化但是页码不变的有关问题

    kkpager的改进,Ajax数据变化但是页码不变的问题kkpager 是一个简单分页展示插件,需要依赖jquery.下载地址:http://www.oschina.net/action/projec ...

  9. flask+sqlite3+echarts2+ajax数据可视化报错：UnicodeDecodeError: 'utf8' codec can't decode byte解决方法

    flask+sqlite3+echarts2+ajax数据可视化报错: UnicodeDecodeError: 'utf8' codec can't decode byte 解决方法: 将 py文件和 ...

随机推荐

  1. JAVA-JSP内置对象之application对象获得服务器版本

    相关资料:<21天学通Java Web开发> application对象获得服务器版本1.通过application对象的getMajorVersion()方法和getMinorVersi ...

  2. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  3. 【WPF】使用CefSharp嵌入HTML网页

    需求:WPF项目中要做用户的商铺主页,由于考虑到每个商家的主页布局各不相同,不能用XAML写死布局.最好的办法是WPF这边XAML写好一个容器,用户使用HTML可视化编辑器(比如这个)来准备好网页,输 ...

  4. hbase源码系列（十二）Get、Scan在服务端是如何处理？

    继上一篇讲了Put和Delete之后,这一篇我们讲Get和Scan, 因为我发现这两个操作几乎是一样的过程,就像之前的Put和Delete一样,上一篇我本来只打算写Put的,结果发现Delete也可以 ...

  5. 找回IntelliJ IDEA中 丢失的Run Dashboard 视图

    一般有时候创建springboot项目的时候右下角可以提示你打开Run Dashboard,但是如果不提醒就需要自己配置了. 找到项目中.idea文件下的workspace.xml开打 接下来找到 & ...

  6. SpringBoot2 集成三种连接池 c3p0 hikari druid

    Hikari 1.首先集成 hikari springboot默认集成,只需要简单的配置即可 1.1 首先导入包 <dependency> <groupId>com.zaxxe ...

  7. 关于css定位

    关于定位要弄清一个概念,那就是"文档流" 什到是文档流 说得简单一点 就是 自上而下 从左到右 生成顺序 关于html元素又分为两种 块状元素 内联元素 块状元素:单独占一行 内联 ...

  8. [技术选型] spring boot

    参考博客:http://jinnianshilongnian.iteye.com/blog/1997192 官网:http://projects.spring.io/spring-boot/ 7天学会 ...

  9. 安装Cocos2d-x3.0步骤

    一.在Windows环境下安装 二.在Mac环境下安装 首先,安装brew工具,参照官方网:http://brew.sh/index_zh-cn.html Cocos2d-x3.0需要安装NDK,SD ...

  10. Ogre 渲染目标解析与多文本合并渲染

    实现目标 因为需求,想找一个在Ogre中好用的文本显示,经过查找和一些比对.有三种方案 一利用Overlay的2D显示来达到效果. http://www.ogre3d.org/tikiwiki/tik ...