layui树形菜单右键_layui.dtree帮助⼿册
iconfont: 该参数为具体某个元素使⽤的字体样式集,默认是使⽤组件提供的dtreefont图标库中的图标组成的集合。在⼀切都默认的基础下,所有的图标都会从该图标库中取得,包括⽤户⾃定义的iconClass、⾃定义menubar、⾃定义toolbar。如需要扩展该属性,则设置的值必须将dtreefont放在第⼀个位置。
iconfont: ["dtreefont", "layui-icon"] // 必须将dtreefont放在第⼀位,后⾯的图标库即可由⽤户⾃定义。
});
如果你实在是不想⽤dtreefont图标库,你可以只配置iconfont:"你⾃⼰的图标库",但是你得确保iconfontStyle属性的每个配置项都有值。⾃定义的iconClass、⾃定义menubar、⾃定义toolbar使⽤的图标库为iconfont属性值配置的第⼀个图标库。
iconfont: ["layui-icon", "iconfont"] // 不使⽤dtreefont,则⽤户⾃定义的iconClass为该属性的第⼀个图标库(即在layui-icon中选择图标)。
iconfontStyle: [{...}] // 不使⽤dtreefont,则必须配置iconfontStyle参数,参数释义请往下看
});
iconfontStyle: 该参数为暴露树内部使⽤的图标集,默认是使⽤组件提供的dtreefont图标库。原则上该属性与iconfont属性为⼀⼀对应关系,即如果iconfont配置的是⼀个字符串,则该属性即为⼀个Object对象;如果iconfont配置的是字符串数组,则该属性即为⼀个JSON数组。
iconfontStyle: 最终该配置项中所有的配置,会被归纳到内置的usefontStyle属性中,即⽆论该配置项是JSON对象还是JSON数组,内置的元素都与usefontStyle对应。
var usefontStyle = { //树最终使⽤的图标集合
fnode:{ //⼀级节点
node:{ //⾮叶⼦节点
open:"", //节点展开
close:"" //节点关闭
},
leaf:"" //叶⼦节点
},
snode:{ //⼆级节点
node:{ //⾮叶⼦节点
open:"", //节点展开
close:"" //节点关闭
},
leaf:"" //叶⼦节点
},
checkbox:{ //复选框
on:"", //复选框选中
out:"", //未选中
noall:"" //半选
},
menubar:{ //菜单栏
movedown:"", //全部展开
moveup:"", //全部收缩
refresh:"", //刷新
remove:"", //删除
search:"" //搜索
},
menubarExt:"", //扩展菜单栏
toolbar:{ //⼯具栏
menubar:{ //依附在菜单栏的⼯具栏
movedown:"", //全部展开
moveup:"", //全部收缩
refresh:"", //刷新
remove:"", //删除
search:"" //搜索
},
menubarExt:"", //依附在菜单栏的扩展菜单栏
add:"", //添加
edit:"", //编辑
del:"" //删除
},
toolbarExt:"" //扩展⼯具栏
};
上述的这些属性中,并不是所有都得配置,你只需要配置你想更改的图标即可,其他未被显⽰定义的属性均会以默认值的形式最终被赋值。der({
iconfont: ["dtreefont", "layui-icon"] // 使⽤dtreefont和layui-icon图标库。
icon图标库iconfontStyle: [{ // 第⼀个JSON
fnode:{
node:{
open: "dtree-icon-jia1" // 这⾥从dtreefont图标库中选择该图标,当节点展开时,⼀级图标使⽤
}
}
},{ // 第⼆个JSON
checkbox:{ // 这⾥从layui-icon图标库中选择
noall:"layui-icon-rate-half", // 复选框半选
on:"layui-icon-rate-solid", // 复选框选中
out:"layui-icon-rate" // 复选框未选中
}
}] // 其他的未定义的图标均从iconfont数组中第⼀个图标库的图标中选择树默认的图标。
});
树使⽤的图标总结:
树使⽤的图标优先级排序:⾃定义的iconClass > iconfontStyle配置项中的指定图标 > ficon 和 icon配置的图标 > 内置skin中默认使⽤的ficon 和 icon。
dot属性设置决定⼀级图标的叶⼦图标是否显⽰。
⾃定义的iconClass、⾃定义menubar、⾃定义toolbar使⽤的图标库为iconfont属性中配置的第⼀个图标库。
iconfontStyle属性可以扩展树任意位置使⽤的图标。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论