jsTree 插件Ajax數據

阿新 • • 發佈：2018-04-13

.info his control cut href mar toolbar 全選上傳

完整代碼

<!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">&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" : 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數據

.info his control cut href mar toolbar 全選上傳完整代碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

springboot使用validation 插件做數據校驗

get json pub boot 多說 private response seq bst 不多說廢話。首先，我們需要在入參實體對象中，使用註解，控制 @Datapublic class UpdateShufflingRequest { private Stri

JQueryPagination分頁插件,ajax從struts請求數據

參數 ret closed struts2 全局 lib assembly tlist com 2017-07-16 學完了struts,做了個關於分頁的小例子,用到了JQuery分頁插件Pagination,先貼下插件下載地址 http://www.jq22.com/j

jstree插件的使用(進階)——動態json數據創建樹

folder clas -c con file 文件 script 存儲 col 容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Ajax獲取 Json文件提取數據

insert app ajax play func -1 com line product 摘自 Ajax獲取 Json文件提取數據 1. json文件內容(item.json) [ { "name":"張國立", "sex":"男", "

angular js 多處獲取ajax數據的方法

list ont listctrl lct module 方法 detail car 獲取 angular js 多處獲取ajax數據的方法var app=angular.module("cart",[]);app.service("getData",function ($

模擬select下拉框之多選（數據源采用模擬Ajax數據--原創）

bbb n) nowrap pac inner sel cte spl innerhtml 最近需要一個下拉多選，本來想偷懶的，所以在網上百度了一番，最終還是發現沒有一個符合自己要求的，所以我自己寫了一個插件。下面是GIF動態效果圖展示相信大家已經看到效果了，接下來

上傳文件到數據庫和服務器

上傳文件上傳文件我們需要做三步。①在頁面中能選擇文件上傳；②能夠將二進制數據轉為byte數組，然後存入數據庫中，註意數據庫字段的類型；③將文件保存到服務器。 @RequestMapping(value = "/upload") public void upload(UpLoadFile uploadFile

C# 各種導入 Excel 文件的數據的方法總結

占用 guid 保存 null amp nbsp 字符串 count str 在導入之前都需要將上傳的文件保存到服務器，所以避免重復的寫這些代碼，先貼出上傳文件並保存到服務器指定路徑的代碼。 protected void btnImport_Click(object s

在java項目中怎樣利用Dom4j解析XML文件獲取數據

avi conf get 自己 mar dom4j eas localhost b2c 在曾經的學習.net時常常會遇到利用配置文件來解決項目中一些須要常常變換的數據。比方數據庫的連接字符串兒等。這個時候在讀取配置文件的時候。我們一般會用到一個雷configuratio

winFormToMysql&&幾個控件的數據綁定

base rgs private bindings mage color img rom images 運行圖：代碼： 1 private void button1_Click(object sender, EventArgs e) 2 { 3

vue組件-#構成組件-父組件向子組件傳遞數據

.com ima 顯式傳遞字符串一個 vue.js vue http 組件對於vue來說非常重要，學習學習了基礎vue後，再回過頭來把組件弄透！一、概念　　組件意味著協同工作，通常父子組件會是這樣的關系：組件 A 在它的模版中使用了組件 B 。　　它們之間

C#各種導入Excel文件的數據的方法總結

context tab 過程 all dap 添加列 map lease 內存在導入前都需要將上傳的文件保存到服務器，所以避免重復的寫這些代碼，先貼出上傳文件並保存到服務器指定路徑的代碼 protected void btnImport_Click(object sen

mysql的load data,高速將文本文件,插入數據庫中

option 子句取數據跳過 expr 數據導入文件名所在 from 1語法 LOAD DATA [ LOW_PRIORITY | CONCURRENT ] [ LOCAL ] INFILE ‘file_name.txt‘ [ REPLACE | IGNORE

【JavaScript】插件參數的寫法

log var [0 gin script ams selector lpar cti 就是實現復制的一個過程 (function() { var Explode = function(container, params) { ‘use stric

Windows App開發之文件與數據

了吧 hide asm ber 下拉列表 cached 默認 dev manager 讀取文件和目錄名這一節開始我們將陸續看到Windows App是如何操作文件的。在Windows上讀取文件名稱、目錄名首先我們在XAML中定義一個But

Java執行SQL腳本文件到數據庫

方法 pep sql腳本 sql文件 -s mps pub sql語句 data 方式一：直接讀取SQL腳本文件的內容，然後傳遞到SQL中。代碼：RunSqlService： @Autowired private RunSqlDao runSqlDao;

控件中數據模板禁用小鍵盤減號折疊

send 當前 void down 輸入後臺進行 listview prev WPF裏面自定義了TreeListView控件，在樹列表項的數據模板中添加了文本框，當在文本框內輸入小鍵盤的減號時，自動折疊；因為小鍵盤+與-符號是自動折疊的；可以對win7及以上系統的文件

使用文件進行數據存儲四種模式

append 視頻筆記 bsp private 存在操作模式 mod 如果 tput 視頻筆記： 1.應用包名：唯一標識一個應用 2.使用文件進行數據存儲：（1）Context.MODE_PRIVATE: 默認操作模式，代表該文件是私有數據，只能被應用本身訪問，在該模式

怎麽恢復手機中誤清空的文件手機數據恢復方法

隨著手機辦公越來越方便快捷化，手機也成為辦公的重要工具，裏面也保存著我們的重要文件數據。當我們在清理手機數據的時候，總是會誤清空手機裏的文件數據，比如上學期間，學習發的各種活動通知和考試安排。這文件被清空，就真的很麻煩。那我們該怎麽恢復手機中被誤刪除的文件呢？強力數據恢復軟件是一款

jsTree 插件Ajax數據

相關推薦