backbone-treeview
a treeview component for backbone.marrionette
How to use
NodeJs
、yo
、bower
、grunt
安装 安装完成运行 grunt
构建项目
使用 grunt server
进行预览
安装RequireJS
在 require.config
的 paths
中指定 treeview
的路径
通过RequireJS使用:
require(['backbone', 'marionette', 'treeview'], function(Backbone, Marionette, TreeView) {
...
}
css使用
组件的图标是基于font-awesome的,样式文件tree_view.css基于bootstrap
初始化组件:
tree = new TreeView({checkable: true, is_static: false})
如果 is_static 是true,表示静态树,不会动态加载触发 load 事件。
直接加载数据:
tree.load_nodes({id:'1',
name:'node 1',
icon:'folder',
is_folder:true,
data:{'type':'folder',},
nodes: {id:'1.1',
name:'node1.1',
is_folder:false,
icon:'file',
data:{'type':'file'}}
},
{id:'2',
name:'node 2',
icon:'folder',
is_folder:true,
data:{type:'shorcut'}
})
可以设置加载子树事件,动态加载:
tree.on('load', function(node){})
如果点击一个节点:
tree.on('clicknode', function(node){ })
显示树:
tree.render('#tree-container')
得到选中项, 得到node的集合:
tree.get_checked()
得到当前激活项, 得到一个node:
tree.get_activated()
在当前已经加载的所有节点中,找到指定ID的节点:
tree.get_node(node_id)
tree.get_node([node_id_1, node_id_2, node_3], function (node) {
node.expand()
})
node是具体的某个节点对象,有如下功能:
node.load_nodes({}) # 继续加载子节点
node.model # node_view绑定的model信息
node.expand(function (node) {} ) # 展开,如果没有加载过,会自动触发加载
node.collapse() # 折叠
node.activate() # 高亮激活