bootstrap treeview

最新推荐文章于 2023-10-07 23:25:32 发布

小糖逗

最新推荐文章于 2023-10-07 23:25:32 发布

阅读量377

点赞数 1

CC 4.0 BY-SA版权

文章标签： bootstrap treeview

本文链接：https://blog.youkuaiyun.com/weixin_43813425/article/details/85011324

本文介绍了一种使用Ajax从服务器获取数据并构建动态树状菜单的方法。通过设置不同的图标、颜色和行为，如高亮搜索结果和选中项，使菜单更加直观。同时，文章详细展示了如何在用户选择节点时触发事件，以及如何根据窗口高度调整iframe的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对应实体类
private Integer id;
private String text;
private Integer pid;
private String href;

private Boolean selectable;

private List nodes;

$(“iframe”).contents().find(“html,body”).scrollTop(0);
var setHeight = $(window).height()-64-41;

$.ajax({
url:"/order/querytree",
type:“post”,
data:{},
datatype:‘josn’,
success:function(result) {
$("#mytree").treeview({
color: “#428bca”,
//backColor: “black”,背景色
//borderColor:‘green’,
collapseIcon: “glyphicon glyphicon-minus”,//可收缩的节点图标
//nodeIcon: “glyphicon glyphicon-user”,
emptyIcon: “glyphicon glyphicon-asterisk”,//设置列表树中没有子节点的节点的图标
expandIcon: “glyphicon glyphicon-leaf”, //设置列表上中有子节点的图标
highlightSearchResults: true,//是否高亮搜索结果默认true
highlightSelected: true, //是否选中高亮显示
onhoverColor: “#f5f5f5”, //鼠标滑过的颜色
levels: 1, //设置初始化展开几级菜单默认为2
selectedIcon: ‘glyphicon glyphicon-tint’,
//selectedBackColor: ‘black’, //设置被选中的节点背景颜色
//selectedColor : ‘red’, //设置被选择节点的字体、图标颜色
showBorder: true, //是否显示边框
showCheckbox: false, //是否显示多选框
uncheckedIcon:’’, //设置未选择节点的图标
//showTags:true,//显示徽章
data: result, // 数据源
onNodeChecked: function (event, data) {

        },
        onNodeSelected: function (event, data) {

            $.addtabs({iframeHeight: setHeight + 'px'});
            $.addtabs.add({
                id: data.id,
                title: data.text,
                url: data.href,

            });

        },
        onNodeEnabled: function (event, data) {
            alert(data.id);
        }


    })
}

})