當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jsTree 插件Ajax数据

發布時間：2025/6/15 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 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> {/*創建文件夾*/} <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> <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> <script src="__STATIC__/h5/js/plugins/jsTree/jstree.js" type="text/javascript"></script> <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>

另類寫法：

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 return node.id === '#' ? '/static/3.3.5/assets/ajax_demo_roots.json' : '/static/3.3.5/assets/ajax_demo_children.json'; 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数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ICO的“金三角”与区块链的“新大陆”
下一篇： BZOJ4568：[SCOI2016]幸