Bootstrap treeview dynamically loads data and adds a quick search function, bootstraptreeview

Bootstrap treeview dynamically loads data and adds a quick search function, bootstraptreeview

Preface:

Based on Bootstrap, The jQuery Multi-Level list tree plug-in displays some inherited tree structures, such as view trees and list trees, in a simple and elegant manner.

Bootstrap Tree View, a useful Bootstrap Tree menu special effect plug-in, is required for many pages created by Bootstrap. This plug-in requires support from Bootstrap3 and jQuery 2.0 and later versions, supports many parameter customization functions, such as color, background color, icon, and link.

Specific effect please temporarily move: http://jonmiles.github.io/bootstrap-treeview/

Okay, let's talk about it.

Users are required to be able to quickly query the region name information of the province, city, and district (for user reference, used to standardize the writing of the import template) and display it in a tree structure.

Final effect display:

 

1. The data table structure data source is the province, city, and district region information table, which is a self-Join structure.

 

Ii. Front-end page

1. Page Introduction

<Link rel = "stylesheet" href = "project static resource path/bootstrap-treeview/css/bootstrap.css" rel = "external nofollow"> <script type = "text/javascript" src = "project static resource path/js/jquery/3.1.0/jquery-3.1.0.min.js"> </script> <script type = "text/javascript" src = "project static resource path/bootstrap. js "> </script> <script type =" text/javascript "src =" project static resource path/bootstrap-treeview/js/jquery. js "> </script> <script type =" text/javascript "src =" project static resource path/bootstrap-treeview/js/bootstrap-treeview.js "> </script>

2. Page display area

<! -- Provincial and municipal area query display --> <div class = "container"> <div class = "row"> <div class = "col-sm-4"> 
3. js script
$ (Function () {var defaultData; $. ajax ({type: "post", url: "Project Request Path Method. json ", dataType:" json ", success: function (result) {defaultData = result; var initSearchableTree = function () {return $ ('# treeview-searchable '). treeview ({data: defaultData, nodeIcon: 'glyphicon-globe ', emptyIcon: '', // node icon without subnodes // collapsed: true ,});}; var $ searchableTree = initSearchableTree (); $ ('# treeview-searc Hable '). treeview ('collapseall', {silent: false // set initialization node to close}); 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 (st R ). length> 0) {searchableNodes = findSearchableNodes ();} else {$ ('# treeview-searchable '). treeview ('collapseall', {silent: false // set the initialization node to close});} // $ ('. 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 = '<p>' + results. length + 'matched searches Result </p> '; $. each (results, function (index, result) {output + = '<p>-<span style = "color: red;">' + result. text + '</span> </p>';}); ('your search-output'your .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 (''); values ('{search-output'{.html (''); $ ('# tr Eeview-searchable '). treeview ('collapseall', {silent: false // set initialization node to close}) ;}, error: function () {alert ("loading province/city region information failed! ")}});});
III. The main background Code 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 <Object> queryAreaInfo () {List <AreaVO> areaInfo = new ArrayList <> (); try {// obtain the Provincial and Municipal Information in the cache (this project is obtained directly from the cache, you can also write a method to query at the Service and Dao layers) EcncSysConfig sysConfig = new EcncSysConfig (); areaInfo = sysConfig. INIT_SYS_ECNC_AREAVO;} catch (Throwable e) {e. printStackTrace ();} // List of provinces in full storage <Object> result = new ArrayList <> (); for (AreaVO areaVO: areaInfo) {Map <String, object> map = new HashMap <> (); if ("2 ". equals (areaVO. getGrade () {map. put ("text", areaVO. getName (); // List of prefecture-level cities <Object> cList = new ArrayList <> (); for (AreaVO cVO: areaInfo) {Map <String, object> cMap = new HashMap <> (); if (cVO. getParentId ()! = Null & cVO. getParentId (). equals (areaVO. getId () {cMap. put ("text", cVO. getName (); // List of regions and counties <Object> rList = new ArrayList <> (); for (AreaVO rVO: areaInfo) {Map <String, object> 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 ;}
Summary
The above is the Bootstrap treeview introduced by the editor to dynamically load data and add a quick search function. I hope it will help you. If you have any questions, please leave a message!