浅析BootStrap Treeview的简单使用
121 浏览量
2020-10-21
08:46:45
上传
评论
收藏 60KB PDF 举报
浅析浅析BootStrap Treeview的简单使用的简单使用
bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用，涉及到使用要
求及数据格式的介绍，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友参考下
bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用。
废话不多说，直接上干干货。
1、、bootstrap-treeview Github网址：网址：
https://github.com/jonmiles/bootstrap-treeview
2、使用要求：、使用要求：
<!-- 样式表 -->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/bootstrap-treeview.css" rel="stylesheet" />
<!-- JS文件 -->
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>
3、数据格式：（、数据格式：（注意了，使用过程中，树的数据格式可以Json格式，也可以写死，当然写死的代码肯定不灵活。Json格式的
字段名一定要按照tree的字段要求，即文本格式text，子节点名称nodes等）
var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
4、简单使用：、简单使用：
4.1 添加容器：添加容器：
<div id="tree"></div>
4.2 定义树结构：（定义树结构：（data为Json格式数据，这里采用ajax，从后台获取，代码如下）
<script>
$(function () {
$.ajax({
type: "Post",
url: "/Home/GetTreeJson",
dataType: "json",
success: function (result) {
$('#tree').treeview({
data: result, // 数据源
showCheckbox: true, //是否显示复选框
评论0
最新资源