完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>H+ 后台主题UI框架 - 文件管理器</title>

    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">

    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">

    <link href="__STATIC__/h5/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

    <link href="__STATIC__/h5/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="__STATIC__/h5/css/plugins/jsTree/style.min.css" rel="stylesheet">

    <link href="__STATIC__/h5/css/animate.css" rel="stylesheet">

    <link href="__STATIC__/h5/css/style.css?v=4.1.0" rel="stylesheet">

    <style>

        /*封面*/

        .cover-img .left{width: 100px; height: 100px;

            float:left;}

        .cover-img .left i{font-size: 100px; color: #dadada}

        .cover-img .rig{float: left; padding-left: 10px;}

        .jstree-open > .jstree-anchor > .fa-folder:before {content: "\f07c";}

        .jstree-default .jstree-icon.none {  width: ;}

    </style>

</head>

<body class="gray-bg">

<div class="wrapper wrapper-content">

    <div class="row">

        <div class="col-sm-2">

            <div class="ibox float-e-margins">

                <div class="ibox-content">

                    <div class="file-manager">

                        <div class="cover-img clearfix">

                            <div class="left">

                                <div class="icon">

                                    <i class="fa fa-file"></i>

                                </div>

                            </div>

                            <div class="rig">

                                <h5>缩略图</h5>

                            </div>

                        </div>

                        <div class="hr-line-dashed"></div>

                        <h5 class="tag-title">功能</h5>

                        <ul class="tag-list" style="padding: 0">

                            <li><a href="file_manager.html" data-toggle="modal" data-target="#Folder">创建文件夹</a></li>

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

                            <li><a href="file_manager.html">全选</a>

                            </li>

                            <li><a href="file_manager.html">取消</a>

                            </li>

                            <li><a href="javascript:demo_create()">添加</a></li>

                            <li><a href="javascript:demo_rename()">修改</a></li>

                            <li><a href="javascript:demo_delete()">删除</a></li>

                        </ul>

                        <div class="clearfix"></div>

                        <div class="hr-line-dashed"></div>

                            <div style="padding-bottom: 10px"><input type="email" placeholder="搜索目录" class="form-control" id="folder-search"></div>

                            <div id="jstree1"></div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-sm-10 animated fadeInRight">

            <div class="row">

                <div class="col-sm-12">

                    <div class="file-box">

                        <div class="file">

                            <a href="file_manager.html#">

                                <span class="corner"></span>

                                <div class="icon">

                                    <i class="fa fa-file"></i>

                                </div>

                                <div class="file-name">

                                    <input type="checkbox" id="inlineCheckbox2" value="option1" checked="">Document_2014.doc

                                    <br/>

                                    <small>添加时间：--</small>

                                </div>

                            </a>

                        </div>

                    </div>

                    <div class="file-box">

                        <div class="file">

                            <a href="file_manager.html#">

                                <span class="corner"></span>

                                <div class="image">

                                    <img alt="image" class="img-responsive" src="__STATIC__/h5/img/p1.jpg">

                                </div>

                                <div class="file-name">

                                    <input type="checkbox"  value="option1" checked="">Italy street.jpg

                                    <br/>

                                    <small>添加时间：--</small>

                                </div>

                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!--隐藏层Model-->

{/*创建文件夹*/}

<div class="modal inmodal" id="Folder" tabindex="-1" role="dialog"  aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content animated fadeIn">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                <i class="fa fa-clone modal-icon"></i>

                <h4 class="modal-title">创建文件夹</h4>

            </div>

            <div class="modal-body">

                <div class="form-group"><label></label> <input type="name" placeholder="请输入内容" class="form-control"></div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>

                <button type="button" class="btn btn-primary">保存</button>

            </div>

        </div>

    </div>

</div>

<!--隐藏层-->

<!-- 全局js -->

<script src="__STATIC__/h5/js/jquery.min.js?v=2.1.4"></script>

<script src="__STATIC__/h5/js/bootstrap.min.js?v=3.3.6"></script>

<!-- jsTree plugin javascript -->

<script src="__STATIC__/h5/js/plugins/jsTree/jstree.js"  type="text/javascript"></script>

<!-- 自定义js -->

<script src="__STATIC__/h5/js/content.js?v=1.0.0"></script>

<script>

    $(document).ready(function () {

        $('.file-box').each(function () {

            //animationHover(this, 'pulse');

        });

    });

</script>

<script>

$(document).ready(function () {

    $('#jstree1').jstree({

        'core' : {

            "animation" : ,

            "check_callback" : true,

            'force_text' : true,

            "themes" : { "stripes" : true },

            'data' : {

                // 获取默认数据

                "url":"{:url('img/imgFolder/jsTree')}",

                "dataType" : "json",

                "data" : function (node) {

                    return { "id" : node.id };

                },

                "success":function(){

                    //alert(1)

                }

            }

        },

        "plugins" : [ "dnd", "search", "state", "types", "wholerow","sort" ],

        // 排序

        "sort" : function(a, b) {

                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) ?  : -);

         }

    });

    // 查询目录

    var to = false;

    $('#folder-search').keyup(function () {

        if(to) { clearTimeout(to); }

        to = setTimeout(function () {

            var v = $('#folder-search').val();

            $('#jstree1').jstree(true).search(v);

        }, );

    });

    // 拖动更改分类属性

    $( "#jstree1" ).on('move_node.jstree', function(e,data){

        console.info(data);

        $.ajax({

            url:"{:url('img/imgFolder/ajaxEdit')}",

            data:{id : data.node.id,pid : data.parent,},

            success:function(res){

                if(res.code!=)alert(res.msg);

            },error:function(){

                alert("Ajax Error");

            }

        })

   })

});

// 创建

function demo_create() {

    var ref = $('#jstree1').jstree(true), sel = ref.get_selected();

    if(!sel.length) { return false; }

    sel = sel[];

    var id = sel;   // 父级id

    sel = ref.create_node(sel, {"type":"file"});

    var defaultName = '新建文件夹'

    if(sel) {

        ref.edit(sel,defaultName,function(){

            var name = ref.get_text(sel);

            $.ajax({

                url:"{:url('img/imgFolder/ajaxAdd')}",

                data:{'id':id,'name':name},

                success:function(res){

                    if(res.code!=){

                        alert(res.msg);

                    }

                },error:function(){

                    alert('Ajax Error');

                }

            });

        });

    }

}

//更名

function demo_rename() {

    var ref = $('#jstree1').jstree(true),

    sel = ref.get_selected();

    if(!sel.length) { return false; }

    sel = sel[];

    ref.edit(sel,ref.get_text(sel),function(){

        var name = ref.get_text(sel);

        $.ajax({

            url:"{:url('img/imgFolder/ajaxEdit')}",

            data:{'id':sel,'name':name},

            success:function(res){

                if(res.code ==){

                   alert(res.msg);

                }

            },error:function(){

                alert('Ajax Error');

            }

        })

    });

}

// 删除

function demo_delete() {

    var ref = $('#jstree1').jstree(true);

    var sel = ref.get_selected();

    if(!sel.length) { return false; }

    var r=confirm("确定删除?")

    //console.log(sel[0])

    var id = sel[]

    if (r==true)

    {

        $.ajax({

            url:"{:url('img/imgFolder/ajaxdel')}",

            data:{'id':id},

            success:function(res){

                //console.log(res)

                if(res.code ==){

                    ref.delete_node(id);

                }else{

                    alert(res.msg)

                }

            },

            error:function(){

                alert("Ajax Error")

            }

        });

    }

}

</script>

</body>

</html>

另类写法：

 $('#jstree_demo')

                                 .jstree({

                                     "core" : {

                                         "animation" : 0,

                                         "check_callback" : true,

                                         'force_text' : true,

                                         "themes" : { "stripes" : true },

                                         'data' : {

                                             'url' : function (node) {

10                                                 return node.id === '#' ? '/static/3.3.5/assets/ajax_demo_roots.json' : '/static/3.3.5/assets/ajax_demo_children.json';

11                                             },

                                             'data' : function (node) {

                                                 return { 'id' : node.id };

                                             }

                                         }

                                     },

                                     "types" : {

                                         "#" : { "max_children" : 1, "max_depth" : 4, "valid_children" : ["root"] },

                                         "root" : { "icon" : "/static/3.3.5/assets/images/tree_icon.png", "valid_children" : ["default"] },

                                         "default" : { "valid_children" : ["default","file"] },

                                         "file" : { "icon" : "glyphicon glyphicon-file", "valid_children" : [] }

                                     },

                                     "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]

                                 });

                         });

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. 使用spring-rabbit测试RabbitMQ消息确认(发送确认,接收确认)

    1.首先是rabbitmq的配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns ...

  2. C语言 · 扶老奶奶过街

    算法提高 扶老奶奶过街   时间限制:1.0s   内存限制:256.0MB      一共有5个红领巾,编号分别为A.B.C.D.E,老奶奶被他们其中一个扶过了马路. 五个红领巾各自说话: A :我 ...

  3. Linxu安装Tomcat与Jdk并卸载自带OpenJdk

    下载安装tomcat 1.下载apache-tomcat-7.0.47.tar.gz tomcat压缩包上传到linxu服务器 2.cd到文件存放目录使用(tar -xvzf apache-tomca ...

  4. Android——程序员的情怀——优化BaseAdapter

    总结: 1- 在MainActivity中只放数据,加载适配器 2- 单独定义实体类 3- 自定义适配器,并与实体类相关联,在适配器里写优化的代码将视图与数据相关联 MainActivity 2- N ...

  5. Java8中list转map

    第一种: 取list中某2个字段作为Map的K,V public Map<Long, String> getIdNameMap(List<Account> accounts) ...

  6. C# 通过反射获取MVC Controller里的类名，方法名，参数列表，返回值类型，Description描述，自定义Attribute

    需要反射的DLL里的一个类: namespace ElegantWM.WebUI.Areas.Admin.Controllers { [Description("功能模块管理")] ...

  7. IEnumerable<T> 转换为数组

    IEnumerable<User> userlist=xxxx; string[] ids=userlist.select(u=>u.id).toArray();

  8. openCV—Python(5)—— 图像几何变换

    一.函数简单介绍 1.warpAffine-图像放射变换(平移.旋转.缩放) 函数原型:warpAffine(src, M, dsize, dst=None, flags=None, borderMo ...

  9. 关于Unity中关节的使用(一)

    1: 刚体的形状大小在物理世界里面是不变的,可是很多时候,我们需要多个刚体来配合使用;2: 关节: 连接刚体与刚体的对应的物理模拟;3: 关节类型: 铰链关节,弹簧关节, 固定关节, 角色关节,可配置 ...

  10. 使用Selenium来抓取动态加载的页面

    原文:http://my.oschina.net/flashsword/blog/147334?p=1 一般的爬虫都是直接使用http协议,下载指定url的html内容,并对内容进行分析和抽取.在我写 ...