j'sTree （js 實現多級列表，文件目錄）詳細使用案例+代碼

時間 2019-12-07

標籤 j'stree stree 實現多級列表文件目錄詳細使用案例代碼欄目 JavaScript 简体版

原文原文鏈接

如圖，要作一個兩級的下拉標籤，能夠用函數實現，可是太麻煩，並且不靈活，查閱資料以後發現，jsTree很方便，下面介紹一下jsTree的入門，並附上代碼。
閱讀jsTree的官方文檔以後，你會知道，它有不少實現方式，我下面使用的是Ajax請求，從後臺獲取json數據返回給jsTree。javascript

jsTree的官網：https://www.jstree.com/
點擊頁面的Download按鈕，下載並解壓以後，將dist下的文件都複製到你本身的項目中css

Html代碼html

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>通訊監測</title>
<script type="application/javascript"
    src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="dist/js/themes/default/style.min.css" />
<script type="application/javascript" src="dist/js/jstree.js"></script>
</head>
<script>
 $(function() {
            $('#routerip').jstree({
                "core" : {
                    'data' : {
                        'url' : "router/selectConEqui",//後臺訪問路徑
                        'data' : function(node) {
                            console.log(node);
                            return node;

                        }
                    },
                    "themes" : {
                        "ellipsis" : true
                    //文字多時省略
                    },
                    "check_callback" : true
                },
                "types" : {
                    "default" : {
                        "icon" : "false"
                    },
                    "text" : {
                        "icon" : "false"
                    }
                },

                "plugins" : [ "wholerow", "types", "themes" ]
            }).on('select_node.jstree', function(event, data) {
                //console.log(data.node);
            }).on('changed.jstree', function(event, data) {
                //console.log("-----------changed.jstree");
                //console.log("action:" + data.action);
                //console.log(data.node);
            });

        });
        

    function create() {
        debugger;
        var ref = $('#jstree1').jstree(true);
        var currNode = _getCurrNode();
        currNode = ref.create_node(currNode, {
            "type" : "file"
        });
        if (currNode) {
            ref.edit(currNode);
        }
    }

    function rename() {
        var ref = $('#jstree1').jstree(true);
        var currNode = _getCurrNode();
        ref.rename_node(currNode, "rename node222");
    }

    function del() {
        var ref = $('#jstree1').jstree(true);
        var currNode = _getCurrNode();
        ref.delete_node(currNode);
    }

    function moveup() {
        var ref = $('#jstree1').jstree(true);
        var currNode = _getCurrNode();
        var prevNode = ref.get_prev_dom(currNode, true);
        ref.move_node(currNode, prevNode, 'before');
    }

    function movedown() {
        var ref = $('#jstree1').jstree(true);
        var currNode = _getCurrNode();
        var nextNode = ref.get_next_dom(currNode, true);//返回兄弟節點的下一個節點  
        ref.move_node(currNode, nextNode, 'after');
    }

    /**  
     *   獲取當前所選中的結點  
     */
    function _getCurrNode() {
        var ref = $('#jstree1').jstree(true), sel = ref.get_selected();
        console.log(sel);
        if (!sel.length) {
            console.log("----");
            return false;
        }
        selsel = sel[0];
        return sel;
    }
</script>
</head>
<body>
    <input type="button" value="create node" onclick="create();">
    <input type="button" value="rename node" onclick="rename();">
    <input type="button" value="del node" onclick="del();">
    <input type="button" value="上移" onclick="moveup();">
    <input type="button" value="下移" onclick="movedown();">
    <div id="jstree1" style="width: 200px; background: #fff322"></div>
</body>
</html>

後臺代碼前端

@ResponseBody
    public void selectConEqui(Model model, HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        List<Map<String, String>> router = routerService.selectConEqui();
        response.setContentType("application/json; charset=UTF-8");
        response.getWriter().write(new Gson().toJson(router));

    }

數據庫存儲格式java

sql查詢node

<select id="selectMenu"  resultType="java.util.HashMap">
    select 
    <include refid="Base_Column_List" />
    from menu
  </select>

返回前端的json格式爲jquery

注意幾點：1.根級parent的值固定設爲「#」，其餘的不能識別；
2.「parent」，「id",」text「都是固定的命名，且都是小寫，若是數據庫字段是大寫，能夠AS爲小寫；
若是沒有這樣的數據庫結構，也能夠經過後臺代碼將數據改造爲上述格式sql

更多詳細的用法，能夠參考官方網站數據庫

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。