引导树视图的简单使用

Bootstrap-treeview.js1是一个强大的树菜单插件。本文介绍了引导树视图的简单用法。

废话不多说，直接干货。

1.bootstrap-treeview Github网站：

https://github.com/jonmiles/bootstrap-treeview

2.使用要求：

！-样式表-链接href=' ~/内容/bootstrap.css' rel='样式表'/链接href=' ~/bootstrap-treeview . CSS ' rel='样式表'/！- JS文件-script src=' http : jquery . JS '/script script src=' http 3360 bootstrap-treeview . JS '/script 3、数据格式：(注意，在使用过程中，树的数据格式可以是Json格式，也可以写死。当然，写死的代码肯定是呆板的。Json格式的字段名必须符合树的字段要求，即文本格式text、子节点名nodes等。)

var tree=[{text: 'Parent 1 '，node :[{text: ' Child 1 '，node :[{ text : '孙子1'}，{ text : '孙子2'}]}，{ text : ' Child 2 ' } }，{text: 'Parent 2'}，{text: 'Parent 3'}，{ text: ' Parent 4 ' }4.简单使用：

4.1添加容器：

Div id='tree'/div4.2定义树结构：(数据为Json格式数据，由ajax从后台获取，代码如下)

script$(function () {$)。ajax({type: 'Post '，url: '/Home/GetTreeJson '，dataType: 'json '，success 3360 function(result){ $(' # tree ')。treeview ({data:result，//数据源showCheckbox: true，//是否显示复选框highlightselected 3360true，//是否突出显示//nodeicon : '字形图标-用户'，//节点上的图标nodeicon 3360 '字形图标-globe '，空图标3360 ' '，//没有子节点图标multiSelect: false，//多个onnodechecked 3360函数(事件，数据){ alert(data . node id)；}，onNodeSelected:函数(事件，数据){ alert(data . nodeid)；}});}，error: function () {alert('树结构加载失败！')}});})/脚本注意：onNodeChecked和onNodeSelected方法是描述文档中的默认方法，还有其他方法，比如自己检查描述文档，或者检查bootstrap-treeview.js文件。未压缩的js文件非常详细，容易理解。

4.3 Json格式数据源：(使用。net MVC框架并列出简单的控制代码)

///summary///returns Json格式数据////summary///returns/returns[http post]public Json result gettreeJson(){ var node=new listnode()；nodeA。添加(新节点(4，‘A01’，空))；nodeA。添加(新节点(5，' A02 '，空))；nodeA。添加(新节点(6，' A03 '，空))；var nodeB=new ListNode()；nodeB。添加(新节点(7，' B07 '，空))；nodeB。添加(新节点(8，' B08 '，空))；nodeB。添加(新节点(9，' B09 '，空))；var nodes=new ListNode()；节点。添加(新节点(1，' A01 '，NodeA))；节点。添加(新节点(2，' B02 '，NodeB))；节点。添加(新节点(3，' A03 '，空))；返回Json(节点，JsonRequestBehavior。allow get)；}///summary////Tree class////summary public class节点{ public node(){ } public node(int id，string str，list node node){ nodeid=id；text=strnodes=node} public int nodeId//树的节点标识，与数据库中保存的数据标识不同。要存储数据库数据的标识，添加一个新的标识属性；如果要为节点设置路径，请将路径属性公共字符串文本添加到类中；//节点名称公共列表节点；//子节点，可以递归读取。该方法将在下一章中总结。}5.总结：

树创建简单，复杂的功能和逻辑判断需要进一步设计。阅读bootstrap-treeview.js仍然是一个非常有启发性和可发现的0-0。

补充：

一个基于bootstrap-treeview的美丽无限分类树级联动菜单1.1版，点击下载源代码

摘要

以上是边肖介绍的bootstrap treeview的简单用法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！