最近在项目中,需要迭代,显示树形菜单,这里我们使用的是bootstracp,所以使用的是bootstracp多级列表树,
使用的时候,非常简单,只需
<!-- Required Stylesheets --> <link href="./css/bootstrap.css" rel="stylesheet"> <!-- Required Javascript --> <script src="./js/jquery.js"></script> <script src="./js/bootstrap-treeview.js"></script>
按照 实例,就可以在页面展示出tree了。
******************我要说的当然不是这个***************************************************
这里,我想说的是,后台的一些技巧。
数据库中,在我们考虑tree的时候,一般都是ID,和parentID。
以 分类树 为例, 直接上代码:
<select id="loadChild" resultMap="categoryResult"> select * FROM P_CATEGORY WHERE PARENTID = #id# </select>
/** * 将类别转换为json数据对象; * 这里可以直接返回,SpringMVC支持返回json数据; * 这里使用BTree 和Gson,简化返回的参数. */ @Override public String dealListToJson(Category cg) { cg = childNode( cg); BTree bt = new BTree(); bt = covertToTree(bt,cg); Gson gson =new Gson(); return gson.toJson(bt); } /** * 迭代获取每一级的 子节点,填充完整; * @param cg * @return */ private Category childNode(Category cg) { cg = listChildNode(cg); if (cg.getCategoryList().size() > 0) { for (Category cgTemp : cg.getCategoryList()) { childNode(cgTemp); } } return cg; } private BTree covertToTree(BTree bt,Category cg ){ bt.setText(cg.getName()); bt.setId(cg.getId()); List<BTree> btList = new ArrayList<BTree>(); if (cg.getCategoryList().size() > 0) { for(Category cgTemp : cg.getCategoryList()){ BTree btTemp = new BTree(); btTemp=covertToTree(btTemp,cgTemp); btList.add(btTemp); } } bt.setNodes(btList); return bt; } /** * 获取当前类别的下一级 子节点,【只是获取下一级】 * @param cg * @return */ public Category listChildNode(Category cg) { cg.setCategoryList(getSqlMapClientTemplate().queryForList("Category.loadChild",cg)); return cg; }
迭代的时候,每次都去请求 数据库了,这里可以用缓存。。暂时没还添加。[其实是我们的节点不多]
这里使用Gson转换List,其实和其他的一样,
使用自定义的BTree,这个可以减少一些不必要的属性加到Tree 的 JSON字符串中。
。。
最终返回的数据格式:
{"text":"图书分类","id":1,"nodes":[{"text":"纺织专业图书","id":9,"nodes":[{"text":"纺织手工图书","id":11,"nodes":[]},{"text":"纺织加工图书","id":12,"nodes":[]}]},{"text":"纺织机械图书","id":10,"nodes":[]}]}
就是这样了,
有一点:
var tree = [${gsonCol}]; $(function(){ //初始化树 $(‘#tree‘).treeview({ data: tree }); //节点被选中 $(‘#tree‘).on(‘nodeSelected‘, function(event, data) { $("#hidClo_parent").val(data.id); }); $(‘#tree_main‘).treeview({ data: tree });
在初始化的时候,var tree=[${gsonCol}],这里要使用[],不然显示不出树来。
时间: 2024-11-10 17:43:21