zoukankan      html  css  js  c++  java
  • 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,。

    本人毕业刚开始工作,如有不当和不规范的地方,还请指正!

  • 相关阅读:
    To select the file to upload we can use the standard HTML input control of type
    Cascading Menu Script using Javascript Explained
    网站首页head区代码规范
    轻松掌握 Java 泛型
    JDK 5.0 中的泛型类型学习
    如何在firefox下获取下列框选中option的text
    是同步方法还是 synchronized 代码? 详解多线程同步规则
    javascript select option对象总结
    Select的动态取值(Text,value),添加,删除。兼容IE,FireFox
    javascript在ie和firefox下的一些差异
  • 原文地址:https://www.cnblogs.com/mahuanpeng/p/5785497.html
Copyright © 2011-2022 走看看