bootstrap-treeview的一些使用方法

bootstrap-treeview是一款基于bootstrap的jQuery多级列表树插件。下面记录了一些我在开发过程中的使用方法:

1.如何给子节点添加不同的背景颜色?(效果如下图)

代码如下(开发语言为PHP,框架为TP5):

$nodes = model('Chapter')->field('chapter_name as text,chapter_id,chapter_pid,grade_id')->where('chapter_pid='.$chapter['chapter_id'])->select();
foreach($nodes as $node) {
    $node['backColor'] = '#e9e9e9'; //给每个子节点添加背景颜色
}

2.如何给节点添加链接?

如上图,我希望点击子节点跳转到另一个页面,于是需要给子节点添加链接。

bootstrap-treeview中有一个href属性,用于给node添加链接。代码如下(开发语言为PHP,框架为TP5):

foreach($nodes as $node) {
    $node['href'] = Url::build('index/doexam',['cid'=>$node['chapter_id']]);  //给每个子节点添加链接
    $node['backColor'] = '#e9e9e9';  //给每个子节点添加背景颜色
}

刷新页面后发现刚才添加的href属性并没有生效,查找文档发现,需要在treeview初始化的时候配置一下enableLinks属性,前端代码如下:

$('#tree').treeview({
    data: data,
    highlightSelected:false,
    enableLinks: true //设置链接可用
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注