完整代码
<!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: 0;} ???</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>添加时间：2014-10-13</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>添加时间：2014-10-13</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">×</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" : 0, ???????????"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) ? 1 : -1) : (this.get_type(a) >= this.get_type(b) ? 1 : -1); ????????} ???}); ???// 查询目录 ???var to = false; ???$(‘#folder-search‘).keyup(function () { ???????if(to) { clearTimeout(to); } ???????to = setTimeout(function () { ???????????var v = $(‘#folder-search‘).val(); ???????????$(‘#jstree1‘).jstree(true).search(v); ???????}, 250); ???}); ???// 拖动更改分类属性 ???$( "#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!=200)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[0]; ???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!=200){ ???????????????????????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[0]; ???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 ==100){ ??????????????????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[0] ???if (r==true) ???{ ???????$.ajax({ ???????????url:"{:url(‘img/imgFolder/ajaxdel‘)}", ???????????data:{‘id‘:id}, ???????????success:function(res){ ???????????????//console.log(res) ???????????????if(res.code ==200){ ???????????????????ref.delete_node(id); ???????????????}else{ ???????????????????alert(res.msg) ???????????????} ???????????}, ???????????error:function(){ ???????????????alert("Ajax Error") ???????????} ???????}); ???}}</script></body></html>jsTree 插件Ajax数据
原文地址：https://www.cnblogs.com/wesky/p/8822647.html