作者：instr

链接：https://www.cnblogs.com/tangzeqi/p/8021637.html

来源：博客园

简要教程

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。

 插件依赖

• Bootstrap v3.0.3
• jQuery v2.0.3

以上两个外部依赖文件已经经过测试可以正常使用，其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。

 使用方法

首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。

<link href="./css/bootstrap.css" rel="stylesheet">

<script src="./js/jquery.js">script>

<script src="./js/bootstrap-treeview.js">script> 

可以使用任何HTML DOM元素来作为该列表树的容器：

 HTML结构

<div id="tree">div>

该列表树插件最基本的调用方法如下：

 调用插件

function getTree() {

    // Some logic to retrieve, or generate tree structure

    return data;

}


$('#tree').treeview({data: getTree()}); 

为了创建树的继承结构，需要为该列表树插件提供一个嵌套结构的js对象。例如： 数据结构

var tree = [

  {

    text:"Parent 1",

    nodes: [

      {

        text:"Child 1",

        nodes: [

          {

            text:"Grandchild 1"

          },

          {

            text:"Grandchild 2"

          }

        ]

      },

      {

        text:"Child 2"

      }

    ]

  },

  {

    text:"Parent 2"

  },

  {

    text:"Parent 3"

  },

  {

    text:"Parent 4"

  },

  {

    text:"Parent 5"

  }

];          

{

    text:"Node 1"

}

如果你需要自定义更多的内容，可以参考下面：最简单的树结构可以只有一个节点，使用一个带text属性的js对象来实现即可：

{

  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: [

    {},

    ...

  ]

.......//可以扩展属性

}        

下面的参数可用于树节点的属性定义，如节点的文本、颜色和标签等。

 节点属性

 全局参数

参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入：

// Example: initializing the treeview

// expanded to 5 levels

// with a background color of green

$('#tree').treeview({

  data: data,         // data is not optional

  levels: 5,

  backColor:'green'

});       

 可用方法

你可以通过两种方式来调用方法：

• 1、插件包装器：插件的包装器可以作为访问底层方法的代理。

$('#tree').treeview('methodName', args) 

多个参数必须使用数组对象来传入。

• 2、直接使用treeview：你可以通过下面两种方法中的一种来获取treeview对象实例。

//该方法返回一个treeview的对象实例

$('#tree').treeview(true)

  .methodName(args);



//对象实例也保存在DOM元素的data中，

//可以使用'treeview'的id来访问它。

$('#tree').data('treeview')

  .methodName(args);

 treeview方法列表

• checkAll(options)：选择所有的节点。

  $('#tree').treeview('checkAll', { silent: true });

  触发nodeChecked事件，传入silent来阻止其它事件。

• checkNode(node | nodeId, options)：选择指定的节点，接收节点或节点ID。

  $('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);

  触发nodeChecked事件，传入silent来阻止其它事件。

• clearSearch()：清空以前的搜索结果。例如清除它们的高亮状态。

  $('#tree').treeview('clearSearch');

  触发searchCleared事件。

• collapseAll(options)：折叠所有的节点，折叠整个树。

  $('#tree').treeview('collapseAll', { silent: true });

  触发nodeCollapsed事件，传入silent来阻止其它事件。

• collapseNode(node | nodeId, options)：折叠指定节点和它的子节点。如果不想折叠子节点，可以设置{ ignoreChildren: true }。

  $('#tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]);

  触发nodeCollapsed事件，传入silent来阻止其它事件。

• disableAll(options)：禁用所有的节点。

  $('#tree').treeview('disableAll', { silent: true });

  触发nodeDisabled事件，传入silent来阻止其它事件。

• disableNode(node | nodeId, options)：禁用指定的节点，接收节点或节点ID。

  $('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);

  触发nodeDisabled事件，传入silent来阻止其它事件。

• enableAll(options)：启用所有的节点。

  $('#tree').treeview('enableAll', { silent: true });

  触发nodeEnabled事件，传入silent来阻止其它事件。

• enableNode(node | nodeId, options)：启用指定的节点，接收节点或节点ID。

  $('#tree').treeview('enableNode', [ nodeId, { silent: true } ]);

  触发nodeEnabled事件，传入silent来阻止其它事件。

• expandAll(options)：展开所有的树节点。也可以展开任何给定级别的树节点。

  $('#tree').treeview('expandAll', { levels: 2, silent: true });

  触发nodeExpanded事件，传入silent来阻止其它事件。

• expandNode(node | nodeId, options)：展开指定的树节点，接收节点或节点ID。也可以展开任何给定级别的树节点。

  $('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent: true } ]);

  触发nodeExpanded事件，传入silent来阻止其它事件。

• getCollapsed()：返回折叠节点的数组。例如state.expanded = false。

  $('#tree').treeview('getCollapsed', nodeId);

• getDisabled()：返回被禁用节点的数组。

  $('#tree').treeview('getDisabled', nodeId);

• getEnabled()：返回可用节点的数组。

  $('#tree').treeview('getEnabled', nodeId);

• getExpanded()：返回所有展开节点的数组。

  $('#tree').treeview('getExpanded', nodeId);

• getNode(nodeId)：返回给定节点ID的单一节点对象。

  $('#tree').treeview('getNode', nodeId);

• getParent(node | nodeId)：返回给定节点的父节点，如果没有则返回undefined。

  $('#tree').treeview('getParent', node);

• getSelected()：返回所有被选择节点的数组，例如：state.selected = true。

  $('#tree').treeview('getSelected', nodeId);

• getSiblings(node | nodeId)：返回给定节点的兄弟节点的数组，如果没有则返回undefined。

  $('#tree').treeview('getSiblings', node);

• getUnselected()：返回没有被选择节点的数组。例如：state.selected = false。

  $('#tree').treeview('getUnselected', nodeId);

• remove()：移除列表树容器。移除附加的事件、附加对象和额外的html元素。

  $('#tree').treeview('remove');

• revealNode(node | nodeId, options)：显示一个树节点，展开从这个节点开始到根节点的所有节点。

  $('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);

  触发nodeExpanded事件，传入silent来阻止其它事件。

• search(pattern, options)：搜索匹配是非常的指定树节点，并高亮它们。返回配平节点的数组。

  $('#tree').treeview('search', [ 'Parent', {   ignoreCase:true,    // case insensitive   exactMatch:false,   // like or equals   revealResults:true, // reveal matching nodes }]); $('##tree').treeview('search', [ value,{ ignoreCase: false, exactMatch: false },attr]); value:值， attr:需要查询的属性

  触发searchComplete事件。

• selectNode(node | nodeId, options)：选择一个给定的树节点，接收节点或节点ID。

  $('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);

  触发nodeSelected事件，传入silent来阻止其它事件。

• toggleNodeChecked(node | nodeId, options)：切换节点的Check状态。

  $('#tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);

  触发nodeChecked事件或nodeUnchecked事件，传入silent来阻止其它事件。

• toggleNodeDisabled(node | nodeId, options)：切换一个节点的可用和不可用状态。

  $('#tree').treeview('toggleNodeDisabled', [ nodeId, { silent: true } ]);

  触发nodeDisabled事件或nodeEnabled事件，传入silent来阻止其它事件。

• toggleNodeExpanded(node | nodeId, options)：切换一个节点的展开和折叠状态。

  $('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);

  触发nodeExpanded事件或nodeCollapsed事件，传入silent来阻止其它事件。

• toggleNodeSelected(node | nodeId, options)：切换一个节点的选择状态。

  $('#tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);

  触发nodeSelected事件或nodeUnselected事件，传入silent来阻止其它事件。

• uncheckAll(options)：Uncheck所有的节点。

  $('#tree').treeview('uncheckAll', { silent: true });

  触发nodeUnchecked事件，传入silent来阻止其它事件。

• uncheckNode(node | nodeId, options)：Uncheck一个给定的节点，接收节点或节点ID。

  $('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);

  触发nodeUnchecked事件，传入silent来阻止其它事件。

• unselectNode(node | nodeId, options)：不选择指定的节点，接收节点或节点ID。

  $('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);

  触发nodeUnselected事件，传入silent来阻止其它事件。

 事件

你可以在参数中使用回调函数来绑定任何事件，或者使用标准的jQuery .on()方法来绑定事件。

在参数中调用的示例：

$('#tree').treeview({

  // The naming convention for callback's is to prepend with `on`

  // and capitalize the first letter of the event name

  // e.g. nodeSelected -> onNodeSelected

  onNodeSelected:function(event, data) {

    // 事件代码...

}); 

$('#tree').on('nodeSelected',function(event, data) {

  // 事件代码...

});        

使用jQuery .on方法：

 可用事件列表

• nodeChecked (event, node)：一个节点被checked。
• nodeCollapsed (event, node)：一个节点被折叠。
• nodeDisabled (event, node)：一个节点被禁用。
• nodeEnabled (event, node)：一个节点被启用。
• nodeExpanded (event, node)：一个节点被展开。
• nodeSelected (event, node)：一个节点被选择。
• nodeUnchecked (event, node)：一个节点被unchecked。
• nodeUnselected (event, node)：取消选择一个节点。
• searchComplete (event, results)：搜索完成之后触发。
• searchCleared (event, results)：搜索结果被清除之后触发。

后台数据传递可用递归（

参数分别为实体对象、结果数组、数据数组

如果使用Map替代实体对象的话，写法可以简洁很多，只需几行代码

方法分为两部分：第一部分为初始化，第二部分开始递归

）：

/**
     * 获取树
     * @方法名:getTreeList
     * @参数 @param kpi
     * @参数 @return
     * @返回类型 String
     */
    public String getTreeList(Kpi kpi,List<Map<String, Object>> listmap,List<Kpi> list) {

        if(listmap == null || list == null ) {
            list= super.findList(kpi);
            listmap = new ArrayList<Map<String,Object>>();
            for(Kpi k: list) {
                if(k.getParentId() == null || "".equals(k.getParentId()) || "null".equals(k.getParentId())) {
                    Map<String, Object> map = new HashMap<String, Object>();
                    map.put("id", k.getId().toString());
                    map.put("text", k.getKpiName());
                    listmap.add(map);
                }
            }
            getTreeList(kpi,listmap,list);

        } else if(listmap.size()>0 && list.size()>0) {
            for(Map<String, Object> mp:listmap) {
                List<Map<String, Object>> childlist = new ArrayList<Map<String,Object>>();
                for(Kpi k:list) {
                    String id = mp.get("id")+"";
                    String pid = k.getParentId()+"";
                    if(id.equals(pid)) {
                        Map<String, Object> m = new HashMap<String, Object>();
                        m.put("id", k.getId().toString());
                        m.put("text", k.getKpiName());
                        childlist.add(m);
                    }
                }
                if(childlist.size()>0) {
                    List<String> sizelist = new ArrayList<String>();
                    sizelist.add(childlist.size()+"");
                    mp.put("nodes", childlist);
                    mp.put("tags", sizelist);
                    getTreeList(kpi,childlist,list);
                }
            }
        }
        return JSONArray.fromObject(listmap).toString();
    }

亲爱的读者：有时间可以点赞评论一下