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

Miyang 發布于2019-08-23 17:58 / 3239人閱讀

摘要：如圖，要做一個兩級的下拉標簽，可以用函數實現，但是太麻煩，而且不靈活，查閱資料之后發現，很方便，下面介紹一下的入門，并附上代碼。閱讀的官方文檔之后，你會知道，它有很多實現方式，我下面使用的是請求，從后臺獲取數據返回給。

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

jsTree的官網：https://www.jstree.com/
點擊頁面的Download按鈕，下載并解壓之后，將dist下的文件都復制到你自己的項目中

Html代碼





通信監測

后臺代碼

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

    }

數據庫存儲格式

sql查詢

返回前端的json格式為

注意幾點：1.根級parent的值固定設為“#”，其他的不能識別；
2.“parent”，“id",”text“都是固定的命名，且都是小寫，如果數據庫字段是大寫，可以AS為小寫；
如果沒有這樣的數據庫結構，也可以通過后臺代碼將數據改造為上述格式

更多詳細的用法，可以參考官方網站

云服務器 GPU云服務器多級菜單下拉列表 mkdir創建多級目錄 js實現計算器代碼 d3.js案例及代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104459.html

強推！大牛程序員必備的Java日志框架，性能無敵

摘要：本文要來分享給大家程序員最常用的日志框架組件。沒有基礎的同學也不要著急，這套教程覆蓋了目前所有的日志框架，只要你學，就一定用得到，先收藏，以備不時之需。作為一名Java程序員，我們開發了很多Java應用程序，包括桌面應用、WEB應用以及移動應用。然而日志系統是一個成熟Java應用所必不可少的。在開發和調試階段，日志可以幫...

zebrayoung 2021-11-25 09:43 評論0 收藏0
CSS 的介紹

摘要：第一章宋體的介紹宋體層疊樣式表，它是宋體的縮寫，作用就是給宋體標簽加表現形式樣式宋體顯示，如字體，圖片，列表，位置等。宋體在制作網頁時必須是背景圖宋體宋體案例? 第一章?的介紹 ? 1.CSS：層疊樣式表，它是cascading style sheets的縮寫，作用就是給HTML標簽加表現形式（樣式-顯示），如：字體，圖片，列表，位置等。在瀏覽器中可以看到部分： HTML：超文本標記語言...

libxd 2019-04-23 13:13 評論0 收藏0
vue.js中如何導出Excel表格

摘要：有一個項目需求，要求在前端項目中導出表格，經過查找代碼確實可以實現，具體實現步驟為安裝依賴導入兩個下載和，在目錄下新建文件夾，里面放入和兩個文件在引入這兩個文件在組件中使用導出的方法序號昵稱姓名上面設置的表格第一行的標題上面的是里對有一個項目需求，要求在前端項目中導出Excel表格，經過查找代碼,Vue.js確實可以實現，具體實現步驟為： 1.安裝依賴 npm install -S ...

lunaticf 2019-08-23 18:03 評論0 收藏0