简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> JS Tutorial> body text

How to dynamically load data using treeview in the Bootstrap framework

亚连
Release： 2018-06-13 13:59:44
Original
5067 people have browsed it

This article implements the use of bootstrap treeview to dynamically load data, and adds a quick search function. Friends who need it can refer to it

Write in front:

The jQuery multi-level list tree plug-in is based on Bootstrap and displays some inheritance tree structures, such as view trees, list trees, etc., in a simple and elegant way.

Practical Bootstrap tree menu special effects plug-in Bootstrap Tree View, a very good Bootstrap plug-in. Now many pages produced by Bootstrap require this function. This plug-in requires Bootstrap 3 version and jQuery 2.0 or above version support, and supports many parameters The customization functions, such as colors, background colors, icons, links, etc., are still very good.

For specific effects, please temporarily move to: http://jonmiles.github.io/bootstrap-treeview/

Okay, without further ado, let’s get started.

Requires users to quickly query the regional name information of provinces and cities (for user reference, used to standardize writing and import templates), and display it in a tree structure.

Final effect display:

1. Data table structure The data source is the provincial and municipal regional information table, which is a self-associated structure. As shown in the picture:

2. Front page

1. Page introduction
Copy after login

2. Page display area

 
 
 
 
快捷搜索
  
   
 **_ _**    
 
 
省市区名称层级树
 
 
 
 
查询结果展示
Copy after login

3.js script

$(function () { var defaultData; $.ajax({ type: "post", url: "项目请求路径方法.json", dataType: "json", success: function (result) { defaultData=result; var initSearchableTree = function() { return $('#treeview-searchable').treeview({ data: defaultData, nodeIcon: 'glyphicon glyphicon-globe', emptyIcon: '', //没有子节点的节点图标 //collapsed: true, }); }; var $searchableTree = initSearchableTree(); $('#treeview-searchable').treeview('collapseAll', { silent : false//设置初始化节点关闭 }); var findSearchableNodes = function() { return $searchableTree.treeview('search', [ $.trim($('#input-search').val()), { ignoreCase: false, exactMatch: false } ]); }; var searchableNodes = findSearchableNodes(); // Select/unselect/toggle nodes $('#input-search').on('keyup', function (e) { var str = $('#input-search').val(); if($.trim(str).length>0){ searchableNodes = findSearchableNodes(); } else { $('#treeview-searchable').treeview('collapseAll', { silent : false //设置初始化节点关闭 }); } //$('.select-node').prop('disabled', !(searchableNodes.length >= 1)); }); var search = function(e) { var pattern = $.trim($('#input-search').val()); var options = { ignoreCase: $('#chk-ignore-case').is(':checked'), exactMatch: $('#chk-exact-match').is(':checked'), revealResults: $('#chk-reveal-results').is(':checked') }; var results = $searchableTree.treeview('search', [ pattern, options ]); var output = '
' + results.length + ' 匹配的搜索结果
'; $.each(results, function (index, result) { output += '
- ' + result.text + '
'; }); $('#search-output').html(output); } $('#btn-search').on('click', search); $('#input-search').on('keyup', search); $('#btn-clear-search').on('click', function (e) { $searchableTree.treeview('clearSearch'); $('#input-search').val(''); $('#search-output').html(''); $('#treeview-searchable').treeview('collapseAll', { silent : false//设置初始化节点关闭 }); }); }, error: function () { alert("省市区地域信息加载失败！") } }); });
Copy after login

3. The main code in the background uses the SpringMVC Spring Mybatis framework. The following is the Controller layer code

@ResponseBody @RequestMapping(value = "/queryAreaInfo", method = { RequestMethod.POST }, produces = MediaType.APPLICATION_JSON_VALUE) public List queryAreaInfo() { List areaInfo=new ArrayList<>(); try { //获取缓存中的省市区信息（本项目直接从缓存中获取，也可以单独写方法到Service、Dao层查询） EcncSysConfig sysConfig = new EcncSysConfig(); areaInfo = sysConfig.INIT_SYS_ECNC_AREAVO; } catch (Throwable e) { e.printStackTrace(); } //盛放省份 List result=new ArrayList<>(); for (AreaVO areaVO : areaInfo) { Map map= new HashMap<>(); if("2".equals(areaVO.getGrade())){ map.put("text", areaVO.getName()); //盛放地市 List cList=new ArrayList<>(); for (AreaVO cVO : areaInfo) { Map cMap=new HashMap<>(); if (cVO.getParentId() != null && cVO.getParentId().equals(areaVO.getId())) { cMap.put("text", cVO.getName()); //盛放区县 List rList=new ArrayList<>(); for (AreaVO rVO : areaInfo) { Map rMap=new HashMap<>(); if (cVO.getId().equals(rVO.getParentId())) { rMap.put("text", rVO.getName()); rList.add(rMap); } } cMap.put("nodes", rList); cList.add(cMap); } } map.put("nodes", cList); result.add(map); } } return result; }
        

         Copy after login
        

       
       
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. help.

       
Related articles:

       
Using ui-route to implement multi-layer nested routing in AngularJS (detailed tutorial)
       
Using Vue jquery How to shrink text in specified columns of a table
       
How to implement shopping mall using vue
       
How to implement web mouse effects (detailed tutorial)
       

       
The above is the detailed content of How to dynamically load data using treeview in the Bootstrap framework. For more information, please follow other related articles on the PHP Chinese website!

      
     
     

      

       Related labels：
       

        bootstrap
        dynamic loading
       

      

      

       source：php.cn
      

     

     

      Previous article：About the website generation chapter directory code example
      Next article：How to jump to the previous page in vue
     

     

      

       Statement of this Website
      

      

       The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      

     

     

     

      

       Latest Articles by Author
      

      
     

     

      

       Latest Issues
      

      

       

        

         Steps to install jQuery in Nuxt.js
         Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
         

          

           From 2023-11-06 16:41:50
          

          

           

            0
           

           

            1
           

           

            225
           

          

         

        

       

       

       

        

         Laravel 9 still can't find App.css and App.js, even after running npm run dev
         Being fairly new to Laravel, I made sure I did check out the documentation for Laravel9 be...
         

          

           From 2023-10-26 23:41:22
          

          

           

            0
           

           

            1
           

           

            489
           

          

         

        

       

       

       

        

         Customize Bootstrap 4's grid system breakpoints
         I have an application where the design requires 1280 breakpoints from desktop to tablet or...
         

          

           From 2023-10-18 23:01:50
          

          

           

            0
           

           

            2
           

           

            197
           

          

         

        

       

       

       

        

         How to make header images, text and buttons responsive
         I'm making a website using Bootstrap5. In the header of the website I am using carousel fr...
         

          

           From 2023-09-17 09:51:15
          

          

           

            0
           

           

            1
           

           

            283
           

          

         

        

       

       

       

        

         Why doesn't my Bootstrap navigation bar render correctly?
         I'm trying to make a navigation bar using Bootstrap4 but my code doesn't seem to work. My ...
         

          

           From 2023-09-16 16:14:06
          

          

           

            0
           

           

            1
           

           

            522
           

          

         

        

       

       

      

     

     

      

       

        Related Topics
       

       More>
      

      

       
      

     

    
   
   

    

     

      Popular Recommendations
     

     

      
     

    

    

     

      

       Popular Tutorials
      

      More>
     

     

      

       

        Related Tutorials
        

       

       

        Popular Recommendations
        

       

       

        Latest courses
        

       

      

      
      
      
     

    

    

     

      

       Latest Downloads
      

      More>
     

     

      

       

        Web Effects
        

       

       

        Website Source Code
        

       

       

        Website Materials
        

       

       

        Front End Template
        

       

      

      
      
      
      
     

    

   

  
  

   

    

     

      

       

        About us
        Disclaimer
        Sitemap
        

       

       

        php.cn：Public welfare online PHP training，Help PHP learners grow quickly！