bootstrap tree及json

bootstrap tree及json

一直做android开发的，好多年不做web项目了，突然team有一个web小项目要我上，然后就迅速连搜带查的把之前的web相关知识捡了捡。
但是对于最近流行的一些技术还是稍微有一点陌生，bootstrap就是其中之一，但是一般做了很久开发的人，对于新技术应该是学习很快，所以参考网上的例子，再结合api，一般的问题都能顺利解决。
这里针对bootstrap tree开发过程中的一些困惑，做一个笔记，不然时间久了会忘吧。

参考资料及api

首先是看一些例子，找到自己想要实现的效果，这里参看的下面链接的效果：
http://www.htmleaf.com/Demo/201502141380.html

相关的基础api找一个，不知道是不是最全的，但是基本的一些属性和方法都有：
https://www.npmjs.com/package/bootstrap-treeview#emptyicon

实现效果

网上很多用bootstrap tree是用一些标签拼的，我要实现的是基于数据库数据的，所以json是比较合适的数据结构。

（因为公司的项目数据不能展示，以下的效果截自网络，代码逻辑是没问题，做简单的替换即可）

最终要实现的效果：
-基本功能就是生成树，单选；
-不是叶子节点，不能被选中，只有叶子节点才能被选中；
-对树的数据进行更新操作，就需要更新的时候有之前的默认选中节点。

代码实现

首先jsp引入需要的资源：

"bootstrap.css" rel="stylesheet">

相关代码：

    Tree
    "6">
        
"selectable_tree" class="tree">div> 
    td>
tr>
<script type="text/javascript">
        $("#selectable_tree").treeview({
         data: <%=JSONArray.fromObject(TreeMgr.createCatalogTree("1",-1)).toString()%>,
         multiSelect:false,

         onNodeSelected: function(event, node) {

         },
         onNodeUnselected: function (event, node) {

         }, 


         onNodeChecked: function(event, node) {

         },
         onNodeUnchecked: function (event, node) {

         }


        });   

script>

节点的类对象定义：

public class TreeNode{

    public static final int LEAF_NODE_LEVEL = 4;
    private Integer id;
    private String text;
    private Integer pid;
    private Integer level;
    private boolean isLeaf = false;
    //默认不能被选中，这里实现的只有叶子节点才能被选中，在TreeManager.java中有判断
    private boolean selectable = false;
    private State state = new State();
    private List nodes = new ArrayList();

    //中间的所有成员变量的getter,setter方法省略

    //内部类，定义节点的状态，这是根据bootstrap tree api中的节点结构定义的，其中的定义要求
    //是：state：Object Optional Describes a node's initial state. 所以必须是类成员，
    //该内部类也可以单独拿出来，但是还是定义为内部类比较合适
    public class State {
        private boolean checked = false;
        private boolean disabled = false;
        private boolean expanded = false;
        private boolean selected = false;

        public boolean isChecked() {
            return checked;
        }

        public void setChecked(boolean checked) {
            this.checked = checked;
        }

        public boolean isDisabled() {
            return disabled;
        }

        public void setDisabled(boolean disabled) {
            this.disabled = disabled;
        }

        public boolean isExpanded() {
            return expanded;
        }

        public void setExpanded(boolean expanded) {
            this.expanded = expanded;
        }

        public boolean isSelected() {
            return selected;
        }

        public void setSelected(boolean selected) {
            this.selected = selected;
        }

    }

}

在定义要生成json数据的节点对象的时候要注意，根据开头提到的api中对于bootstrap tree的节点格式定义是以下这样，那么这里有几点要注意：

1. 成员变量名应该与api中节点属性名一致，不然会出现该属性会使用bootstrap 默认的节点属性和值。
   例如，如果没有定义id，当取对id进行取值操作的时候会发现，并不是你数据源的id值，而是bootstrap按照从上至下的顺序排列出来的一个id值。
2. 节点对象的定义要去满足api中节点的数据结构，例如state，api指定说明需要一个类对象来初始化，我也是反复看了几遍，试了很多次才明白它的意思。
3. 因为json数组的生成格式是一样的，所以会存在叶子节点中的nodes没有数据的情况，这个时候会出现叶子节点是可以伸缩的，因为nodes属性就是一个对象数组，它会被认为它还有子节点，其实是没有的。我觉得这里如果能把叶子节点的这个nodes成员变量去掉就好了，就可以实现叶子节点不能收缩的效果，不然会让人以为它还有子节点。暂时没有想到好办法，有好办法的朋友可以留言。

{
  text: "Node 1",
  icon: "glyphicon glyphicon-stop",
  selectedIcon: "glyphicon glyphicon-stop",
  color: "#000000",
  backColor: "#FFFFFF",
  href: "#node-1",
  selectable: true,
  state: {
    checked: true,
    disabled: true,
    expanded: true,
    selected: true
  },
  tags: ['available'],
  nodes: [
    {},
    ...
  ]
}

生成json的数据库操作：

public class TreeMamager {

    @SuppressWarnings("unchecked")
    public static TreeNode createTree(String id,int historyId) {
        // 第一次应该获取的根节点
        TreeNode node = getTreeNode(id);

        // 获取根节点下的所有子节点
        List<TreeNode> childTreeNodes = queryChildTreeNode(String.valueOf(node.getId()));
        // 判断是否为叶子节点
        if (childTreeNodes.isEmpty()) {
            node.setLeaf(true);
            node.setSelectable(true);//只有叶子节点才可以被选中
            node.getState().setExpanded(true);
            // 如果叶子节点的id等于之前选中的historyId，那么该叶子节点默认选中
            if(node.getId()==historyId){
                node.getState().setSelected(true);
            }
        } else {
            //不是叶子节点，递归查询下一层子节点
            for (TreeNode child : childTreeNodes) {
                TreeNode n = createTree(String.valueOf(child.getId()),historyId); // 递归
                node.getNodes().add(n);
            }
        }

        return node;
    }

    private static TreeNode getTreeNode(String id) {
        TreeNode node = new TreeNode();
        //从数据库中查询节点
        Object object = DBManager.getDataById(id);
        node.setText(object.getCatalogName());
        node.setId(object.getId());
        node.setLevel(object.getCatalogLevel());
        node.setPid(object.getParentId());
        return node;
    }

    private static List<TreeNode> queryChildTreeNode(String pId) {
        //从数据库中查询pId下的子节点数据
        List<Object> objects = DBManager.getChildDataByPId(pId);
        List<TreeNode> childTreeNodes = new ArrayList<TreeNode>();
        for (Object object : objects) {
            TreeNode node = new TreeNode();
            node.setText(object.getCatalogName());
            node.setId(object.getId());
            node.setLevel(object.getCatalogLevel());
            node.setPid(object.getParentId());
            childTreeNodes.add(node);
        }
        return childTreeNodes;
    }
}