浅析BootStrap Treeview的简单使用
bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用。 废话不多说,直接上干干货。 1、bootstrap-treeview Github网址:2、使用要求:3、数据格式:(注意了,使用过程中,树的数据格式可以Json格式,也可以写死,当然写死的代码肯定不灵活。Json格式的字段名一定要按照tree的字段要求,即文本格式text,子节点名称nodes等)4、简单使用:
4.1 添加容器:
4.2 定义树结构:(data为Json格式数据,这里采用ajax,从后台获取,代码如下)
$(function () {
$.ajax({
type: "Post",url: "/Home/GetTreeJson",dataType: "json",success: function (result) {
$('#tree').treeview({
data: result,// 数据源
showCheckbox: true,//是否显示复选框
highlightSelected: true,//是否高亮选中
//nodeIcon: 'glyphicon glyphicon-user',//节点上的图标
nodeIcon: 'glyphicon glyphicon-globe',emptyIcon: '',//没有子节点的节点图标
multiSelect: false,//多选
onNodeChecked: function (event,data) {
alert(data.nodeId);
},onNodeSelected: function (event,data) {
alert(data.nodeId);
}
});
},error: function () {
alert("树形结构加载失败!")
}
});
})
注:onNodeChecked 和 onNodeSelected 方法是说明文档中默认的方法,还有其他的方法,自己自己查阅说明文档,或者查看 bootstrap-treeview.js 文件,未压缩的js文件内容非常详细,易懂。
4.3 Json格式数据源:(采用.net MVC框架,列出简单的Control代码)
/// 返回Json格式数据
///
///
var nodeB = new List var nodes = new List 5、总结:简单的创建了树,复杂的功能以及逻辑判断还需要进一步设计,自己阅读bootstrap-treeview.js 还是很有启发和发现的0-0,。 补充:基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单1.1版, 总结以上所述是小编给大家介绍的bootstrap treeview的简单使用。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |