前端页面实现树形结构

树形结构的实现

---

第一步导入js

下载地址:https://codeload.github.com/vakata/jstree/legacy.zip/3.3.4
记得引到用到的页面

HTML代码

<div id="dialogRoleAuthority">
        <form id="dlg_Add_Hospital" target="submitFrame" >
        <%--存放树形结构的div--%>
        <div id="menuTree" style="height: 400px;overflow:auto"></div>
        <input type="hidden" value="" id="rid">
        <div>
            <input type="hidden" id="inna">
            <input type="hidden" id="inmes">
        </div>
    </form>
</div>

JS代码

//展示树形的方法
var editRoleAuthModal = function(id){
   
        $("#rid").val(id);
        $.ajaxSetup({cache:false});
        $.ajax({
            url : contextPath + "/rolePower/power/"+id,
            type : 'get',
            dataType : 'json',
            success : function(result) {
   
                console.log(result);
                var check = result.checkNodeIds.toString();
                var checkNodeIds = check.split(",");//需要选中的节点ID，为数组
                $('#inmes').val(checkNodeIds);
                $("#menuTree").bind('loaded.jstree', function (e, data) {
   
                    $("#menuTree").jstree("open_all");
                    $("#menuTree").find("li").each( function () {
   
                        if (checkNodeIds!=null){
                            for (var i = 0; i < checkNodeIds.length; i++) {
                                if ($(this).attr("id") == checkNodeIds[i]) { //如果节点的ID等于checkNodeIds[i]，表示要选中//alert($(this).attr(“id”));
                                    $("#menuTree").js