理论:http://blog.csdn.net/babyxue/article/details/73835444

插依赖Bootstrap 和jQuery

<link href="~/bootstrap-treeview.css" rel="stylesheet" />
<link href="./css/bootstrap.css" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap-treeview.js"></script>

jsp中

<div class="col-sm-3">
<input type="hidden" id="powerList" name="powerList" value='${powerList}'/>
<input type="hidden" id="ids" name="ids" value="${ids}" />
<c:if test="${powerList!=null}">
<div id="tree"></div>
</c:if>
</div>

js中

var log = {
initTree: function () {
var data = $('#powerList').val();
$('#tree').treeview({
data: data,
showCheckbox:false,
multiSelect:false,
onNodeSelected:function(event,node){ //选中节点其子节点,父节点
var ids = [];
var parentNode = $('#tree').treeview('getParent',node); //父节点//
var nodes = node.nodes; //子节点
if(nodes){
for(var i=0; i<nodes.length; i++){
ids.push(nodes[i].id)
var childNode = nodes[i].nodes;
if(childNode){
for(var j=0; j<childNode.length; j++){
ids.push(childNode[j].id)
}
}
}
}else{
ids.push(node.id)
}
//console.info(ids);
$('#ids').val(ids);
setTimeout(function () {
log.reload();
}, 1000)
},
onNodeUnselected:function(event,node){
$('#ids').val('');
setTimeout(function () {
log.reload();
}, 1000)
}
}); }
};

这里得到节点的id的时候,有点小问题

@RequestMapping(value = "view")
public ModelAndView toLog(ModelAndView modelAndView) throws Exception {
modelAndView.setViewName("system/log");
try{
List<TreeObject> list = getTree(Long.parseLong("-1"));
TreeObject treeObject = new TreeObject();
treeObject.setId(-1L);
treeObject.setText("全部菜单");
State rootState = new State();
rootState.setExpanded(true);
rootState.setChecked(false);
treeObject.setState(rootState); //只显示递归产生的两层
TreeObject treeObj = new TreeObject();
for(int i = 0; i < list.size(); i++){
List<TreeObject> list2 = list.get(i).getNodes();
if(list2 != null && list2.size() > 0){
for(int j = 0; j < list2.size(); j++){
if(list2.get(j).getNodes() != null){
list2.get(j).setNodes(null);
}
}
}
}
treeObject.setNodes(list);
modelAndView.addObject("powerList", "[" + JSON.toJSONString(treeObject) + "]");
}catch(Exception ex){
logger.error("进入日志管理页面出错!",ex);
}
return modelAndView;
} //递归树
public List<TreeObject> getTree(Long parentid) {
List<TreeObject> list = new ArrayList<TreeObject>();
List<TreeObject> total = new ArrayList<TreeObject>();
Map<String, Object> map = new HashMap<String, Object>();
map.put("parent_id", parentid);
map.put("sys_type", 1);
List<Power> powerList = powerService.getPowerByGroupLevel(map);
for (Power power : powerList) {
TreeObject tb = new TreeObject();
tb.setId(power.getPower_id());
tb.setText(power.getPower_name());
State state = new State();
state.setChecked(false);
state.setExpanded(false);
if (power.getChildcnt() > 0) {
List<TreeObject> child = getTree(power.getPower_id());
tb.setNodes(child);
}
tb.setState(state);
list.add(tb);
}
total.addAll(list);
return total;
}

bootstrap-treeview的 简单使用的更多相关文章

  1. 对bootstrap modal的简单扩展封装

    对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...

  2. Bootstrap treeview增加或者删除节点

    参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...

  3. 初始化bootstrap treeview树节点

    最近在做启明星图库时,使用了Jquery Bootstrap  Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...

  4. webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署

    本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...

  5. Bootstrap在线编辑器简单分享

    Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...

  6. jQuery treeview的简单用法

    最近的项目要用到treeview插件,刚好就自己整理一下这方面的资料. 1.文档树示例 最简单的一个例子就是文档树的实现.效果如下图所示. 在使用treeview之前,html文档中需要包含几个jqu ...

  7. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  8. BootStrap TreeView使用示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. bootstrap treeview 树形数据生成

    这个问题还是挺经典的,后台只是负责查出所有的数据,前台js来处理数据展示给treeview;show you the code below:<script> $(function () { ...

  10. bootstrap treeview实现菜单树

    本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...

随机推荐

  1. Maven 项目中 添加自己的jar包

    mvn install:install-file   -Dfile=java-bloomfilter-1.0.jar  -DgroupId=com.sina  -DartifactId=java-bl ...

  2. UI5-文档-4.38-Accessibility

    作为本教程的最后一步,我们将改进应用程序的可访问性. 为此,我们将添加ARIA属性.屏幕阅读器使用ARIA属性识别应用程序结构并正确解释UI元素.通过这种方式,我们可以让我们的应用程序对那些使用电脑有 ...

  3. UI5-文档-4.8-Translatable Texts

    在这一步中,我们将UI的文本移动到一个单独的资源文件中. 这样,他们都在一个中心位置,可以很容易地翻译成其他语言.这个国际化过程(简称i18n)是在SAPUI5中通过使用一种特殊的资源模型和标准的数据 ...

  4. Spring的国际化(转载)

    1:在MyEclipse下面创建一个test的Web  Project,然后添加Spring相关的文件,在src根目录下创建applicationContext.xml文件. applicationC ...

  5. 专业英语词汇(Java)

    abstract (关键字)             抽象 ['.bstr.kt] access                            vt.访问,存取 ['.kses]‘(n.入口, ...

  6. k-means处理图片

    问题描述:把给定图片,用图片中最主要的三种颜色来表示该图片 k-means思想: 1.选择k个点作为初始中心 2.将每个点指派到最近的中心,形成k个簇cluster 3.重新计算每个簇的中心 4.如果 ...

  7. python函数式编程(转)

    函数式编程是使用一系列函数去解决问题,按照一般编程思维,面对问题时我们的思考方式是“怎么干”,而函数函数式编程的思考方式是我要“干什么”. 至于函数式编程的特点暂不总结,我们直接拿例子来体会什么是函数 ...

  8. SpringBoot配置文件YML 注意事项

    YML读取注意事项 使用YML时遇到的坑: 最近在做项目时,遇到了一些在读取YML配置时发生的问题,在这里写一并写下来,希望给自己以及大家一个提示,能尽量避免在读取配置文件时发生这些错误,给开发带来不 ...

  9. C#语法基础

    泛型 1.default(T)可以返回T类型的空值,因为你不知道T是值类型还是引用类型,所以别擅自用null 2.泛型约束 很多时候我们不希望使用者太过自由 我们希望他们在使用我们设计的泛型类型时 不 ...

  10. global statement

    [global statement] 在线程里,默认所有变量都是本线程局部变量,要想访问全局变量,则要先用global声明. 如全局有变量totalCount,线程中有语句 totalCount += ...