zoukankan      html  css  js  c++  java
  • jsTree 插件

    html代码

    <div id="jstree1"></div>

    js代码:

    <script src="__STATIC__/h5/js/jquery.min.js?v=2.1.4"></script>
    <script src="https://static.jstree.com/3.3.5/assets/dist/jstree.min.js"></script>
    <script>
    $(document).ready(function () {
        $('#jstree1').jstree({
            'core' : {
                "animation" : 0,
                "check_callback" : true,
                'force_text' : true,
                "themes" : { "stripes" : true },
                'data' : {
                    //"url" : "//www.jstree.com/fiddle/?lazy",
                    "url":"{:url('img/imgFolder/jsTree')}",
                    "dataType" : "json",
                    "data" : function (node) {
                        return { "id" : node.id };
    
                    }
                }
            },
            "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]
        });
    
    });
    
    function demo_create() {
        var ref = $('#jstree1').jstree(true), sel = ref.get_selected();
        if(!sel.length) { return false; }
        sel = sel[0];
        sel = ref.create_node(sel, {"type":"file"});
        if(sel) {
            ref.edit(sel);
        }
    };
    function demo_rename() {
        var ref = $('#jstree1').jstree(true),
        sel = ref.get_selected();
        if(!sel.length) { return false; }
        sel = sel[0];
        ref.edit(sel);
    
    };
        function demo_delete(){
            var ref = $('#jstree1').jstree(true),
                    sel = ref.get_selected();
            if(!sel.length) { return false; }
            ref.delete_node(sel);
    
            //$("#1").remove();
            console.log(sel)
    
            ref.set_text(1, '989898');
    
        }
    </script>

    其中data数据格式

    $('#jstree1').jstree({ 'core' : {
        'data' : [
           { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
           { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
           { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
           { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }
        ]
    } });
  • 相关阅读:
    作业 20181030-3互评Alpha版本
    Alpha阶段事后诸葛亮会议记录
    Alpha发布用户使用报告
    20181023-2 贡献分配
    作业 20181016-1 Alpha阶段贡献分配规则
    Scrum立会报告+燃尽图(十月三十日总第二十一次)
    OC中时间函数的使用
    OC中的集合详解
    面向对象的概念详解(转)
    集中类
  • 原文地址:https://www.cnblogs.com/wesky/p/8746553.html
Copyright © 2011-2022 走看看