[jquery] jQuery jsTree V3.2.1 基礎Demo

<link rel="stylesheet" href="../dist/themes/default/style.min.css" />

    <script src="../dist/jquery-2.1.4.min.js"></script>

    <script src="../dist/jstree.min.js"></script>

引入對應的文件

　

$("#deptIdModify").jstree({

                    "core" : {
                        'multiple':false,//單選,true 爲多選
                        "data": {
                            "url" :"../common/getSelectByCodeId2?codeId=PSB",
                            'dataType':'json',
                            'data' : function (node) {
                                return { 'id' : node.id};
                            }
                        }
                    },
                    "plugins" : [ "wholerow", "checkbox" ]
                });

 

deptIdModify 能夠爲:

div,ul其餘沒有試過。

使tree節點選中..

$("#deptIdModify").jstree(true).check_node(data.formData.deptCode);

 可是上面的選擇有一個問題，第一次打開頁面沒法選中，修改後以下：

 

$("#deptIdModify").jstree({

                    "core" : {
                        'multiple':false,
                        "data": {
                            "url" :"../common/getSelectByCodeId2?codeId=PSB",
                            'dataType':'json',
                            'data' : function (node) {
                                return { 'id' : node.id};
                            }
                        }
                    },
                    "plugins" : [ "wholerow", "checkbox" ]
                }).bind("loaded.jstree",function(){
                    var node = data.formData.deptCode;
                    $("#deptIdModify").jstree("check_node",node);
                });

 

 

取值:

var deptIds=$("#deptIdModify").jstree(true).get_selected();

其餘知API,詳細配置信息 可訪問官網：

 jstree 官網:https://www.jstree.com/