Bootstrap Tree View,简单而优雅的树结构组件(1)-阿里云开发者社区

开发者社区> 沉默王二> 正文

Bootstrap Tree View,简单而优雅的树结构组件(1)

简介: Bootstrap Tree View,简单而优雅的树结构组件
+关注继续查看

A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer.

这是Bootstrap Tree View在git上的简介。

注意simple、elegant,简单而优雅,我喜欢这两个词。

那么今天的实例是通过Bootstrap Tree View来制作一款省市级菜单的应用。


###一、效果图

image.png

image.png




###二、应用

####①、首先,项目需要引入bootstrap.css、jquery.js、bootstrap-treeview.js


<link type="text/css" rel="stylesheet" href="${ctx}/components/bootstrap/css/bootstrap.min.css" />

<script type="text/javascript" src="${ctx}/components/jquery/jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="${ctx}/components/treeview/js/bootstrap-treeview.js"></script>

1

2

3

####②、接下来,页面上需要放一个dom元素。


<div id="procitytree" style="height: 400px;overflow-y :scroll;"></div>

1

通过设置height和overflow-y,使treeview能够在垂直方向上出现滚动条。


####③、由于省市级数据一般都是固定不变的,那么页面初次加载时,我们把省市级数据先拿到。


Java端非常简单:


@RequestMapping(value = "loadProcitysInfo")
public void loadProcitysInfo(HttpServletResponse response) {
    logger.debug("获取所有省市");
    try {
  List<Provincial> provincials = provincialService.getProvincials();
  for (Provincial provincial : provincials) {
    List<City> citys = cityService.getCitysByProvincialId(provincial.getId());
    provincial.setCitys(citys);
  }
  renderJsonDone(response, provincials);
    } catch (Exception e) {
  logger.error(e.getMessage(), e);
  logger.error(e.getMessage());
  renderJsonError(response, Constants.SERVER_ERROR);
    }
}


这段代码需要优化,通过mybatis其实可以一次就获得省级和市级的集合。

获取数据后,通过json写入到response中。


protected void renderJsonDone(HttpServletResponse response, final Object value) {
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("statusCode", 200);
    map.put("result", value);
    String jsonText = JSON.toJSONString(map);
    PrintWriter writer = null;
    try {
  response.setHeader("Pragma", "no-cache");
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expires", 0);
  response.setContentType(contentType);
  writer = response.getWriter();
  writer.write(jsonText);
  writer.flush();
    } catch (IOException e) {
  throw new OrderException(e.getMessage());
    } finally {
  if (writer != null)
    writer.close();
    }
}


前端通过ajax对数据进行组装保存。

jQuery.ajax({
    url : common.ctx + "/procity/loadProcitysInfo", // 请求的URL
    dataType : 'json',
    async : false,
    timeout : 50000,
    cache : false,
    success : function(response) {
        var json = YUNM.jsonEval(response);

        if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
            var records = json[YUNM.keys.result];
            if (!json)
                return;

            // 城市列表都存在
            if (records != null && records.length > 0) {
                // 遍历子节点
                $.each(records, function(index, value) {
                    var proNode = {};
                    // text是显示的内容
                    proNode["text"] = value.proname;
                    proNode["id"] = value.id;
                    proNode["procode"] = value.procode;
                    // 节点不可选中
                    proNode["selectable"] = false;
                    // 初始化市级节点
                    proNode["nodes"] = [];

                    $.each(value.citys, function(index, value) {
                        var cityNode = {};
                        cityNode["text"] = value.cname;
                        cityNode["id"] = value.id;
                        cityNode["proid"] = value.proid;
                        cityNode["code"] = value.code;
                        // 节点不可选中
                        cityNode["selectable"] = false;

                        proNode["nodes"].push(cityNode);
                    });
                    // 保存页面端对象中
                    //YUNM._set.procityTreeData的数据结构就是二维数组。
                    YUNM._set.procityTreeData.push(proNode);
                });
            }
        }
    }
});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26529 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2827 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
10975 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11930 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
8791 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12254 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7329 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
21710 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载