bootstrap tree ajax,浅析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格式数据

///

///

[HttpPost]

public JsonResult GetTreeJson()

{

var nodeA = new List();

nodeA.Add(new Node(4,"A01",null));

nodeA.Add(new Node(5,"A02",null));

nodeA.Add(new Node(6,"A03",null));

var nodeB = new List();

nodeB.Add(new Node(7,"B07",null));

nodeB.Add(new Node(8,"B08",null));

nodeB.Add(new Node(9,"B09",null));

var nodes = new List();

nodes.Add(new Node(1,nodeA));

nodes.Add(new Node(2,"B02",nodeB));

nodes.Add(new Node(3,null));

return Json(nodes,JsonRequestBehavior.AllowGet);

}

/// /// Tree类

///

public class Node

{

public Node() { }

public Node(int id,string str,Listnode)

{

nodeId = id;

text = str;

nodes = node;

}

public int nodeId; //树的节点Id，区别于数据库中保存的数据Id。若要存储数据库数据的Id，添加新的Id属性；若想为节点设置路径，类中添加Path属性

public string text; //节点名称

public Listnodes; //子节点，可以用递归的方法读取，方法在下一章会总结

}

5、总结：

简单的创建了树，复杂的功能以及逻辑判断还需要进一步设计，自己阅读bootstrap-treeview.js 还是很有启发和发现的0-0,。

补充：

基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单1.1版，

总结

以上所述是小编给大家介绍的bootstrap treeview的简单使用。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。