JSTree的使用

1.导入外部文件

2.jsp

<div id="divd"  style="font-size: 12px" >
    <div id="container"></div> //container为这棵树的id
</div>

3.js

（1）加载这棵树的数据

$(function() {
    var d = document.getElementById("baac");
    d.style.backgroundColor = "whitesmoke";

    //控制这个树的背景div的高度（获得当前页面的高度）
    d.style.height= document.body.clientHeight +"px";
    $('#container').jstree({
        plugins : ["checkbox","types","themes","state"],  // state保存选择状态
        'core' : {
            'data' : {
                "url" : "tree/treeController",
                "dataType" : "json", // needed only if you do not supply JSON headers
            }
        },
        "types" : {
            "default" : {
                "icon" : "fa fa-folder icon-state-warning icon-lg"
            },
            "file" : {
                "icon" : "fa fa-file icon-state-warning icon-lg"
            }
        },
        "checkbox":{  // 去除checkbox插件的默认效果，默认效果为可以一次选中多个
              tie_selection : false,
            whole_node : false
        },
    });
});

（2）jsree的默认状况是全部节点闭合，但是我们在某种特定的情况下要使用全部节点展开（请用一下方法）

$(function () { // 展开节点  $("#container").on("loaded.jstree", function (event, data) { // 展开所有节点  $('#container').jstree('open_all'); // 展开指定节点  //data.instance.open_node(1); // 单个节点 （1 是顶层的id）  // data.instance.open_node([1, 10]); // 多个节点 (展开多个几点只有在一次性装载后所有节点后才可行）  }); });

（3）获取选中的id数组

//获取选中选中的id数组
function confirm() {
    var nondes = $("#container").jstree("get_checked");
    console.log(nondes)
}

（4）刷新jstree，虽然是有刷新功能，但是不会的选中的进行重置

function recoveryE() {
    console.log("D")
    $("#container").jstree("refresh");
}

(5)当我们知道id是多少的时候就可以进行反选，根据id对树进行选中

（6）controller层

@RequestMapping(value = "/treeController", produces = "text/html;charset=UTF-8") @ResponseBody public String bomTreeController() { List<Map<String, Object>> data = treeService.treeAllService(); List<Map<String, Object>> result = new ArrayList<Map<String, Object>>(); if (data != null && data.size() > 0) { for (Map<String, Object> map : data) { if ("0".equals(map.get("tree_parent_id").toString())) { result.add(map); } } } JSONArray array = new JSONArray(); for (Map<String, Object> node : result) { array.add(new JSONObject(node)); } return array.toJSONString(); }

（7）Serviceimp层

public List<Map<String, Object>> treeAllService() {
    List<Map<String, Object>> avaliableAuths = treeDao.treeAllMapper();
    Map<String, Object> node1 = null;
    Map<String, Object> node2 = null;
    List<Map<String, Object>> children = null;
    for (int i = 0; i < avaliableAuths.size(); i++) {
        node1 = avaliableAuths.get(i);
        children = new ArrayList<Map<String, Object>>();
        for (int j = 0; j < avaliableAuths.size(); j++) {
            node2 = avaliableAuths.get(j);
            if (node1.get("id").toString().equals(node2.get("tree_parent_id").toString())) {
                children.add(node2);
            }
        }
        node1.put("children", children);
    }
    return avaliableAuths;
}

（8）推荐：http://blog.csdn.net/zhuyu19911016520/article/details/51711293

方法已经相当详尽，如有不对之处，希望多多指出，很愿意与同行互相交流，互相学习我是：勤劳的蚂蚁gf

猜你喜欢