前端控件jsTree 使用方法（后台数据抛给前台）

第一步导入jsTree的JS包

<link rel="stylesheet" th:href="@{../css/plugins/jsTree/style.min.css}">
<script type="text/" th:src="@{../js/plugins/jsTree/jstree.min.js}"></script>

第二步加载数据

jQuery代码

var data=[[${data}]];//后台传到前台的数据
var jsObject = JSON.parse(data); //转换为json对象

$('#departmentTreeDiv').on('ready.jstree', function (event, data) {
    //根据ID获取要赋值的树
    var jstree = $.jstree.reference('#departmentTreeDiv');
    //要展开的节点ID
    jstree.open_node("0");
    //禁用ID为0的节点 ，使该节点不可选中
    jstree.disable_node("0");
}).on('activate_node.jstree', function (node, e) {
//此处是点击节点时 执行的方法
    var id = e.node["id"];//获取节点ID
    var text = e.node["text"];//获取节点名称
   
}).jstree({
    'core': {
        'data': jsObject,
        "check_callback": true,
        "themes": {"stripes": true},
    },
    "types": {
        "default": {
            "icon": "glyphicon glyphicon-bookmark"
        },
        "valid_children": {
            "icon": "glyphicon glyphicon-ok"
        }
    },
    "state": {"opened" : true},
    "plugins": [ //要使用的插件
        "types", "wholerow", "sort"
    ],
    "sort": function (a, b) {//排序
    var aOrderNo = this.get_node(a)["original"]["sort"];
    var bOrderNo = this.get_node(b)["original"]["sort"];
    return (this.get_node(a)["parent"] == "#" && this.get_node(b)["parent"] == "#") ? (aOrderNo >= bOrderNo ? 1 : -1) : (aOrderNo >= bOrderNo ? 1 : -1);
}

})

HTML代码

<div class="col-lg-4">
    <div class="ibox float-e-margins">

        <div class="ibox-content">
            <div id="departmentTreeDiv"></div>
        </div>
    </div>
</div>

最终效果

标签： jsTree java