JsTree3 基本用法 – checkbox和动态加载

jsTree是jQuery的插件，具有交互性的树。

它是免费的、开源的、容易扩展、主题化和可配置的，它支持HTML、JSON数据源和数据加载。

HTML:

<div class="row">
    <div class="col-xs-3">
        <div class="box box-primary">
            <div class="box-header with-border">
                <i class="fa fa-gears"></i><h3 class="box-title">权限选择实验</h3>
            </div>
            <div class="box-body table-responsive">
                <div id="mytree">
                </div>
                <button class="btn btn-primary" type="button" onclick="submitForm()">提交</button>
            </div>

            <div class="box-header with-border">
                <i class="fa fa-gears"></i><h3 class="box-title">动态加载实验</h3>
            </div>
            <div class="box-body table-responsive">
                <div id="mytree2">
                </div>
                <button type="button" class="btn btn-success btn-sm" onclick="demo_create();">添加子节点</button>
            </div>

        </div>
    </div>
</div>

使用场景一：checkbox （如：权限设置）

需求1：加载所有权限树形清单
需求2：加载完后动态勾选已有权限
需求3：提交勾选的权限列表

// 选择实验
$('#mytree').jstree({
    "plugins": ["sort", "checkbox", "state"], //"wholerow",
    "check_callback" : true,
    "checkbox": {
        //"keep_selected_style": false//是否默认选中
        //"three_state": false//父子级别级联选择
    },
    "core" : {
        "themes" : {
            "responsive": false,
            "stripes" : true
            // "icons" : true,
            // "dots" : false
        },
        'check_callback': true,
        'data': [
            { "id" : "1", "parent" : "#", "text" : "test1 1"},
            { "id" : "2", "parent" : "#", "text" : "test2 1" },
            { "id" : "3", "parent" : "#", "text" : "test3 1" },
            { "id" : "21", "parent" : "2", "text" : "test21 21" },
            { "id" : "22", "parent" : "2", "text" : "test22 22" },
            { "id" : "11", "parent" : "1", "text" : "test11 11" },
            { "id" : "12", "parent" : "1", "text" : "test12 11" },
            { "id" : "31", "parent" : "3", "text" : "test31 11" },
            { "id" : "311", "parent" : "31", "text" : "test311 11" },
            { "id" : "312", "parent" : "31", "text" : "test312 11" }
        ]

    },
    "types": {
        "default": {
            "icon": "fa fa-folder icon-state-warning icon-lg"
        },
        "file": {
            "icon": "fa fa-file icon-state-warning icon-lg"
        }
    },
    'state': "closed"
});

$('#mytree').on("loaded.jstree", function (event, jstree) {   
    let _inst = jstree.instance;
    let $jstree = $('#mytree').jstree(true);
    let data = _inst._model.data;

    let ids = ["1", "3", "31", "312"];

    // 根据json参数勾选默认
    for(let key in data) {
        if('#' === key) {
            continue;
        }
        if ($.inArray(key, ids) != -1) {
            $jstree.check_node(key);
        }
    }

    $jstree.jstree('close_all');
});

/**
 * 获取所有选择的数据
 * @param treeId
 */
function getCheckTreeIds(treeId) {
    // 方法一
    // 打开所有的节点，不然获取不到子节点数据
    var that = $("#" + treeId);
    that.jstree('open_all');

    var ids = [];
    var treeNode = that.jstree(true).get_selected(true);

    for (var i = 0; i < treeNode.length; i++) {

        var node = treeNode[i];
        var nodeId = node.original.id;

        // 判断是否重复
        if ($.inArray(nodeId, ids) == -1) {
            ids.push(nodeId);
        }

        for (var j = 0; j < node.parents.length; j++) {
            // 判断是否重复
            var parentId = node.parents[j];
            if (parentId != "#" && $.inArray(parentId, ids) == -1) {
                ids.push(parentId);
            }
        }
    }
    that.jstree('close_all');
    return ids;

    // 方法二
    // var ids = [];
    // var $jstree = $('#mytree').jstree(true);
    // var data = $jstree._model.data;
    // for(key in data) {
    //     if($jstree.is_checked(key)) {
    //         //alert(data[key].li_attr._id);
    //         ids.push(data[key].id);
    //     }
    // }
}

// 提交表单
function submitForm(){
    var userTreeIds = getCheckTreeIds("mytree");
    bootbox.alert(userTreeIds);
    $.ajax({
        type :"post",
        url : "<?= Url::to(['edit', 'id' => $model->id])?>",
        dataType : "json",
        data : {
            id : '<?= $model['id']?>',
            pid : $("#authrole-pid").val(),
            sort : $("#authrole-sort").val(),
            title : $("#authrole-title").val(),
            userTreeIds : userTreeIds
        },
        success : function(data){
            if (parseInt(data.code) === 200) {
                window.location = "<?= Url::to(['index'])?>";
            } else {
                error(data.message);
            }
        }
    });
}

使用场景二：动态加载（如：文件展示、部门展示等）

需求1：展开时动态加载节点
需求2：有子节点的节点上显示 + 号
需求3：异步加载
需求4：节点支持超链接

//动态加载实验
$('#mytree2').jstree({
    "plugins" : ["sort", "state"],
    "core" : {
        //"animation" : 0,
        "check_callback" : true,
        "themes" : {
            "responsive": false,
            "stripes" : true
        },
        //"force_text" : true,
        "data": {
            "url" : "<?=Url::toRoute('/article-cat/tree00');?>",
            // 'data' : function (node) {
            //     return { 'id' : node.id };
            // },
            // 'success': function(data) {
            //     //console.info(data);
            //     if(data) {
            //         callback.call(this, data);
            //     }else{
            //         $("#jstree").html("暂无数据！");
            //     }
            // }
            'dataType' : 'json'
        },
        "state": "closed"
    },
});

$('#mytree2').on("open_node.jstree", function (e, data) {
//$('#mytree2').on("select_node.jstree", function (e, data) {
    /*//添加节点
    var node = [{id:"111",parent:"2",text:"1111"},{id:"222",parent:"2",text:"2222"}];
    var selNodeId = data.node.id;
    var parentId = data.node.parent;
    for(var i=0;i<node.length;i++){
        $("#mytree2").jstree("create_node", selNodeId,  node[i], "last", false, true);
    }*/

    //适配 open_node.jstree 和 select_node.jstree
    var selNode = (typeof(data.selected) == "undefined") ? data.node : data.selected;

    var inst = data.instance;
    var selectedNode = inst.get_node(selNode);
    var level = $("#"+selectedNode.id).attr("aria-level");

    if(parseInt(level) <= 4){
        loadNodes(inst, selectedNode);
    }
});

//添加节点
function demo_create() {
    var ref = $('#mytree2').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 loadNodes(inst, selectedNode) {
    //inst.open_node(selectedNode);
    //alert(selectedNode.text);
    $.ajax({
        url: "<?=Url::toRoute('/article-cat/tree01');?>",
        data : {'pid': selectedNode.id},
        dataType: "json",
        type: "POST",
        success: function (data) {
            if (data) {
                //json 中添加此语句可以支持超链接:   "a_attr":{"href":"xxxx"}
                //data = [{"id":"6","text":"aaaaa","icon":"fa fa-file", "a_attr":{"href":""}},
                    //    {"id":"5","text":"bbbbb","icon":"fa fa-file", "children":[{"text":"-","icon":"fa fa-folder"}]}];
                selectedNode.children = [];
                $.each(data, function (i, item) {
                    var obj = {text: item};
                    //$('#mytree2').jstree('create_node', selectedNode, obj, 'last');
                    inst.create_node(selectedNode, item, "last");
                });
                inst.open_node(selectedNode);

            } else {
                $("#mytree2").html("暂无数据！");
            }
        },
        error : function(){
            alert("操作失败");
        }
    });
}

//点击跳转
$("#mytree2").on('activate_node.jstree', function(e, data){
        alert(data.node.a_attr.href);
        document.location.href = data.node.a_attr.href;
});

//查询所有 id 的 child 数量
//遍历此数据，如果 child > 0则添加空节点以显示加号，展开时再添加全部数据: "children":[{"text":"","icon":false}]
$sql = "SELECT f2.id, COUNT(b.id) amount FROM
            (
              SELECT id,pid FROM ".static::tableName()."
            ) b
            right join 
            (
              SELECT id,pid FROM ".static::tableName()."
            ) f2
            on f2.id=b.pid  GROUP BY f2.id";