jsTree 插件Ajax数据
Posted 狂奔的蜗牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsTree 插件Ajax数据相关的知识，希望对你有一定的参考价值。
完整代码
<!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数据的主要内容，如果未能解决你的问题，请参考以下文章