标签：pid ajax upload node default desc script app success
完整代码
<!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>
标签：pid ajax upload node default desc script app success
原文地址：https://www.cnblogs.com/wesky/p/8822647.html
