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(, "A01", null));

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

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

            var nodeB = new List<Node>();

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

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

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

            var nodes = new List<Node>();

            nodes.Add(new Node(, "A01", nodeA));

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

            nodes.Add(new Node(, "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简单使用

最新文章

热门文章