虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > JavaScript > 浅析BootStrap Treeview的简单使用

浅析BootStrap Treeview的简单使用
类别:JavaScript   作者:码皇   来源:互联网   点击:

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, //是否显示复选框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("树形结构加载失败!")}
    }
    );
    }
    )</script>

注:onNodeChecked 和 onNodeSelected 方法是说明文档中默认的方法,还有其他的方法,自己自己查阅说明文档,或者查看 bootstrap-treeview.js 文件,未压缩的js文件内容非常详细,易懂。

  4.3 Json格式数据源:(采用.net MVC框架,列出简单的Control代码)

    /// <summary>/// 返回Json格式数据/// </summary>/// <returns></returns>[HttpPost]public JsonResult GetTreeJson(){
    var nodeA = new List<Node>();
    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<Node>();
    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<Node>();
    nodes.Add(new Node(1, "A01", nodeA));
    nodes.Add(new Node(2, "B02", nodeB));
    nodes.Add(new Node(3, "A03", null));
    return Json(nodes, JsonRequestBehavior.AllowGet);
    }
    /// <summary>/// Tree类/// </summary>public class Node{
    public Node() {
    }
    public Node(int id, string str, List<Node> node){
    nodeId = id;
    text = str;
    nodes = node;
    }
    public int nodeId;
    //树的节点Id,区别于数据库中保存的数据Id。若要存储数据库数据的Id,添加新的Id属性;若想为节点设置路径,类中添加Path属性public string text;
    //节点名称public List<Node> nodes;
    //子节点,可以用递归的方法读取,方法在下一章会总结}

5、总结:

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

补充:

以上所述是小编给大家介绍的bootstrap treeview的简单使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关热词搜索: bootstrap treeview