jstree的基本应用----记录

阅读原文时间：2023年07月08日阅读：1

<head>  
    <meta charset="utf-8" />  
    <title></title>  
    <link rel="stylesheet" type="text/css" href="jstree/dist/themes/default/style.min.css" />  
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" />  
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />  
</head>

<body>  
    <div class="container">  
        <div class="row" style="height: 100px;"></div>  
        <div class="row">  
            <div class="col-md-3">  
                <!-- 描述：搜索框 -->  
                <div class="input-group row">  
                    <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-screenshot"></i></span>  
                    <input type="text" class="form-control" placeholder="请输入功能名称..."

                        id="search\_ay" aria-describedby="basic-addon1">  
                </div>  
                <!--描述：jstree 树形菜单容器-->  
                <div id="jstree\_demo\_div" class="row">

                </div>  
            </div>  
            <div lass="col-md-9">  
                <button class="btn btn-tab" var='json/data.json'>data.json</button> <!--点击切换资源-->  
                <button class="btn btn-tab" var='json/data2.json'>data2.json</button> <!--点击切换资源-->  
                <button class="btn refresh "><i class="glyphicon glyphicon-refresh"></i></button> <!--点击刷新资源-->  
            </div>  
        </div>  
    </div>

    <script type="text/javascript" src="js/jquery.js"></script>  
    <script type="text/javascript" src="jstree/dist/jstree.min.js"></script>  
</body>

使用了技术有： bootstrap、 jstree、 font-awesome 、jquery

这些可以到官网去下：下面会给链接的

需要ajax 动态获取后台属性菜单的json数据请看下面：

把core下的data改成如下。

"data" : function(obj, callback) {
$.ajax({
type : "POST",
url : "/treeviewisjstree/JSTreeServlet",
dataType : "json",
async : false,
success : function(result) {
console.info(result);
if (result) {
callback.call(this, result);
} else {
$("#jstree_div").html("暂无数据！");
}
}
});
}

json数据的格式：

[
{
"id": "ajson1", //id
"parent": "#", // 父节点 #标识这个是根节点
"text": "Simple root node", //显示的文本
"a_attr":{
"href":"链接",
"id": 1
},
"li_attr": {
"href":"属性",
"id": 2
},
"state" :{ //启动状态
"opened" : false,
"disabled" : false,
"selected" : true
}
}, {
"id": "ajson2",
"parent": "#",
"text": "Root node 2"
}, {
"id": "ajson3",
"parent": "ajson1",
"icon" : "fa fa-file",
"text": "Child 1"
}, {
"id": "ajson4",
"parent": "ajson2",
"icon" : "fa fa-file",
"text": "Child 2"
}, {
"id": "ajson6",
"parent": "ajson4",
"icon" : "fa fa-file",
"text": "Child 6"
}, {
"id": "ajson5",
"parent": "ajson4",
"icon" : "fa fa-file",
"text": "Child 5"
}, {
"id": "ajson7",
"parent": "ajson4",
"icon" : "fa fa-file",
"text": "Child 7"
}
]

效果图：

手机扫一扫

移动阅读更方便

你可能感兴趣的文章