Bootstrap Tree View，簡單而優雅的樹結構元件（1）

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來制作一款省市級菜單的應用。

###一、效果圖

###二、應用

####①、首先，項目需要引入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>

通過設定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);
                });
            }
        }
    }
});