麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

bootstrap-treeview實現(xiàn)多級樹形菜單 后臺JSON格式如何組織?

2019-11-19 11:07:46
字體:
供稿:網(wǎng)友

樹形列表菜單的數(shù)據(jù)組織形式一般有兩種:一種是一次性向服務(wù)器請求所有節(jié)點的數(shù)據(jù),一種是先請求根目錄的節(jié)點,當用戶點擊該節(jié)點時,再去請求該節(jié)點的子葉節(jié)點的數(shù)據(jù)。這里我們的需求是第一種。

樹形菜單是我們經(jīng)常會用到的一種菜單展現(xiàn)方式,這里我推薦bootstrap-treeview,它是一款效果非常酷的基于bootstrap的jQuery多級列表樹插件。該jQuery插件基于Twitter Bootstrap,以簡單和優(yōu)雅的方式來顯示一些繼承樹結(jié)構(gòu),如視圖樹、列表樹等。

前端頁面的編寫,比較簡單,故簡略描述,我們著重將后端如何按照要求組織返回所需的Json。

使用方法

首先要在頁面中引入依賴的css樣式和 bootstrap-treeview.js文件。

<!-- Required Stylesheets --><link href="./css/bootstrap.css" rel="external nofollow" rel="stylesheet"> <!-- Required Javascript --><script src="./js/jquery.js"></script><script src="./js/bootstrap-treeview.js"></script>

可以使用任何HTML DOM元素來作為該列表樹的容器:

<div id="tree"></div>

調(diào)用

<script type="text/javascript"> $(function() {$.ajax({  type: "Get",  url: "doctype/FarmDoctypeLoadTreeNodes.do",  data: {id: ""},  dataType: "json",  success: function (result) {  $("#tree").treeview({  data: result.nodes,  // 數(shù)據(jù)源  levels:1, //設(shè)置繼承樹默認展開的級別  showTags: true, //是否在每個節(jié)點右邊顯示tags標簽。tag值必須在每個列表樹的data結(jié)構(gòu)中給出  onNodeSelected: function (event, data) {   /* console.log(data); */   /* alert(data.nodeId); */   window.location = basePath + "webtype/view" + data.id + "/Pub1.html";   }   });   },  error: function () {  alert("加載失敗!")  } });   });</script>

數(shù)據(jù)源要求的數(shù)據(jù)格式:

 var tree = [  {  text: "Parent 1",  tags: ['2'],  nodes: [   {   text: "Child 1",   tags: ['3'],   nodes: [   {   text: "Grandchild 1",   tags: ['1']   },   {   text: "Grandchild 2",   tags: ['1']   }   ]   },   {   text: "Child 2",   tags: ['1']   }  ]  },  {  text: "Parent 2",   tags: ['1']  },  {  text: "Parent 3",   tags: ['1']  },  {  text: "Parent 4",   tags: ['1']  },  {  text: "Parent 5",   tags: ['1']  }  ]; 

看到這個數(shù)據(jù)結(jié)構(gòu),我們首先想到的是數(shù)據(jù)結(jié)構(gòu)中的二叉樹。歐拉,我們不妨可以把它理解成,這樣的數(shù)據(jù)結(jié)構(gòu):

創(chuàng)建一個實例,組織所需要的數(shù)據(jù)結(jié)構(gòu)的json.

public class BootstrapUiTreeNode implements Serializable { private static final long serialVersionUID = 1L; static final Logger log = Logger.getLogger(BootstrapUiTreeNode.class);  private String id; private String parentId; private String text;  //子葉節(jié)點 private List<BootstrapUiTreeNode> nodes = new ArrayList<>();  //統(tǒng)計該節(jié)點分類下文檔的數(shù)量 private List<String> tags = new ArrayList<>(); // tags: ['NUM']  public BootstrapUiTreeNode(String id, String parentId, String text) { super(); this.id = id; this.parentId = parentId; this.text = text; }   public BootstrapUiTreeNode(String id, String parentId, String text, List<BootstrapUiTreeNode> nodes) { super(); this.id = id; this.parentId = parentId; this.text = text; this.nodes = nodes; }   public String getParentId() { return parentId; }   public void setParentId(String parentId) { this.parentId = parentId; }   public String getId() { return id; }  public void setId(String id) { this.id = id; }  public String getText() { return text; }  public void setText(String text) { this.text = text; }  public List<BootstrapUiTreeNode> getNodes() { return nodes; }  public void setNodes(List<BootstrapUiTreeNode> nodes) { this.nodes = nodes; }   public List<String> getTags() { return tags; }   public void setTags(List<String> tags) { this.tags = tags; }    /** * 加載第一層樹節(jié)點 父節(jié)點的根目錄的父id必須為"NONE",包含字段名ID,PARENTID,NAME *  * @param parentId *  父親節(jié)點id * @param SortTitle *  排序字段index * @param tableTitle *  表名index * @param id_title *  表id的index * @param parentId_title *  表parentid的index * @param name_title *  表name的index * @param icon_title */ public static List<Map<String, Object>> queryTreeNodeOne(String parentId, String SortTitle, String tableTitle, String id_title, String parentId_title, String name_title) { if (StringUtils.isEmpty(parentId)) { parentId = "NONE"; } DataResult nodeResult = null; DBSort sort = new DBSort("a." + SortTitle, "ASC"); DataQuery query = DataQuery.getInstance("1",  id_title + "," + parentId_title + " as " + parentId_title + "," + name_title + " as " + name_title, tableTitle + " a"); query.setPagesize(100); query.addSort(sort); DataQuerys.wipeVirus(parentId); query.setSqlRule("and " + parentId_title + "='" + parentId + "'"); try { nodeResult = query.search(); } catch (SQLException e) { log.error(e.getMessage()); } return nodeResult.getResultList(); }  public static List<TypeBrief> getPopTypesForReadDoc() { DataQuery query = DataQuery.init(new DataQuery(), "(SELECT a.NAME as NAME,a.SORT as SORT, a.ID as ID, a.READPOP as READPOP,a.WRITEPOP AS WRITEPOP, a.AUDITPOP AS AUDITPOP, a.PARENTID AS PARENTID, (SELECT COUNT(B1.ID) FROM FARM_DOC B1 LEFT JOIN FARM_RF_DOCTYPE B2 ON B1.ID = B2.DOCID LEFT JOIN FARM_DOCTYPE B3 ON B3.ID = B2.TYPEID WHERE B1.STATE='1' and B3.TREECODE LIKE CONCAT(A.TREECODE,'%') AND B1.STATE='1') AS NUM,f.oid as OID,f.FUNTYPE as FUNTYPE FROM farm_doctype AS a left join FARM_DOCTYPE_POP as f on f.TYPEID=a.ID WHERE 1 = 1 AND (TYPE = '1' OR TYPE = '3') AND PSTATE = '1' ) AS e", "NAME,ID,PARENTID,NUM,OID,READPOP,AUDITPOP,WRITEPOP,FUNTYPE,SORT"); query.setPagesize(1000); query.setNoCount(); query.setCache(Integer.valueOf(0), CACHE_UNIT.second); query.addSort(new DBSort("SORT", "ASC")); try { DataResult result = query.search(); //利用反射獲取對象集合 return result.getObjectList(TypeBrief.class); } catch (SQLException e) { log.error(e.toString()); return new ArrayList<TypeBrief>(); } }    /** * 遍歷集合獲得對象 *  * @param nodeList * @return */ public static List<BootstrapUiTreeNode> findNode(List<TypeBrief> typeBriefs, List<Map<String, Object>> data, String id_title, String parentId_title, String name_title) { List<BootstrapUiTreeNode> nodeList = new ArrayList<>(); try { for (Map<String, Object> node : data) { if (node.get(id_title) == null) { continue; } BootstrapUiTreeNode item = new BootstrapUiTreeNode(node.get(id_title).toString(),  node.get(parentId_title).toString(), node.get(name_title).toString()); //統(tǒng)計該節(jié)點下分類的文檔數(shù) for(TypeBrief typeBrief : typeBriefs) { if(typeBrief.getId().equals(node.get(id_title).toString())) { item.getTags().add(typeBrief.getNum() + ""); break; } } nodeList.add(item); } } catch (Exception e) { throw new RuntimeException(e); } return nodeList; }  /** * 先用遞歸構(gòu)造除第一層幾個根節(jié)點外的類多叉樹結(jié)構(gòu) * @param node * @param parentId * @param sortTitle * @param tableTitle * @param id_title * @param parentId_title * @param name_title * @return */ public static BootstrapUiTreeNode createSubtreeTreeNodes(List<TypeBrief> typeBriefs, BootstrapUiTreeNode node, String parentId, String sortTitle, String tableTitle, String id_title, String parentId_title, String name_title) {  //獲取該根節(jié)點下的所有子節(jié)點 List<Map<String, Object>> data = queryTreeNodeOne(parentId, sortTitle, tableTitle, id_title, parentId_title, name_title); List<BootstrapUiTreeNode> roots = findNode(typeBriefs, data, id_title, parentId_title, name_title);  if(null != roots && roots.size() > 0) { //遞歸繼續(xù)查詢 for(BootstrapUiTreeNode child : roots) { BootstrapUiTreeNode treeNode = createSubtreeTreeNodes(typeBriefs, child, child.getId(), sortTitle, tableTitle, id_title, parentId_title, name_title); node.getNodes().add(treeNode); }  } else { node.setNodes(null);  }  return node; }  /** * 補上第一層的幾個根節(jié)點 * @param parentId * @param sortTitle * @param tableTitle * @param id_title * @param parentId_title * @param name_title * @return *  * 注意:所以會存在葉子節(jié)點中的nodes沒有數(shù)據(jù)的情況,這個時候會出現(xiàn)葉子節(jié)點是可以伸縮的, * 因為nodes屬性就是一個對象數(shù)組,它會被認為它還有子節(jié)點,其實是沒有的。 *  */ public static List<BootstrapUiTreeNode> createTreeNodes(String parentId, String sortTitle, String tableTitle, String id_title, String parentId_title, String name_title) { //統(tǒng)計所有節(jié)點分類對應(yīng)的文檔數(shù)目 List<TypeBrief> typeBriefs = getPopTypesForReadDoc();  List<BootstrapUiTreeNode> nodes = new ArrayList<>(); //查詢第一層根節(jié)點 List<Map<String, Object>> data = queryTreeNodeOne(parentId, sortTitle, tableTitle, id_title, parentId_title, name_title); List<BootstrapUiTreeNode> treeNodes = findNode(typeBriefs, data, id_title, parentId_title, name_title);  for(BootstrapUiTreeNode node : treeNodes) { BootstrapUiTreeNode treeNode = createSubtreeTreeNodes(typeBriefs, node, node.getId(), sortTitle, tableTitle, id_title, parentId_title, name_title); nodes.add(treeNode); }  return nodes; }}

控制器:

@RequestMapping("/FarmDoctypeLoadTreeNodes") @ResponseBody public Map<String, Object> loadTreeNodes(DataQuery query, HttpServletRequest request, String id) { query = EasyUiUtils.formatGridQuery(request, query); try { List<BootstrapUiTreeNode> treeNodes = BootstrapUiTreeNode.createTreeNodes(id, "SORT", "FARM_DOCTYPE", "ID", "PARENTID", "NAME"); return ViewMode.getInstance().putAttr("nodes", treeNodes).returnObjMode(); } catch (Exception e) { log.error(e.getMessage()); return ViewMode.getInstance().setError(e.getMessage()).returnObjMode(); } }

訪問結(jié)果:

最終樹形菜單效果:

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 九九热在线视频观看 | 亚洲最大久久 | 欧美一极视频 | 久久男人 | 色人阁导航| 极品销魂一区二区三区 | 成码无人av片在线观看网站 | 欧美一级美国一级 | av在线免费观看网 | 欧美日韩手机在线观看 | 成人一级黄色大片 | 91 久久 | 99精品欧美一区二区 | 午夜精品成人一区二区 | 欧美成人精品一区二区男人小说 | 国产一区二区二 | 九九热精品在线 | www.91sp| 色婷婷久久久久久 | 久久久久久久久久久久99 | 免费毛片免费看 | 欧美日本在线播放 | 成人爱爱电影 | 久久国产秒 | 久久久久久久久久久av | 91网在线播放 | 91成人午夜性a一级毛片 | 宅男噜噜噜66一区二区 | 久久国产一级片 | 久久精品中文字幕一区二区 | 午夜国产成人 | 免费观看一区 | 日本在线免费观看视频 | 日本在线一区二区 | 成人资源在线 | 欧美日韩a∨毛片一区 | 51国产偷自视频区视频小蝌蚪 | 久久精品视频一区二区 | 中文字幕欧美亚洲 | 久久久久一区二区三区 | 久久久久久久国产视频 |