zoukankan      html  css  js  c++  java
  • BootStrap TreeView使用示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
            <link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet">
         <link href="/Scripts/bootstrap/css/bootstrap-treeview.css" rel="stylesheet">
    
           <script src="/Scripts/bootstrap/js/jquery.js" type="text/javascript"></script>
          <script src="/Scripts/bootstrap/js/bootstrap-treeview.js"  type="text/javascript"></script>
    
    </head>
    <body>
    <div id="tree"></div>
    
    <input type="button" id="btn" value="查询" />
    
    <script type="text/javascript">
        $(function () {
            function getTree() {
                // Some logic to retrieve, or generate tree structure
    
    
                var data = [{
                    text: "p1",
                    nodes: [{ text: "p1-1", id: '00001', nodeId: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}]
    
                }]
                return data;
            }
            var obj = {};
            obj.text = "123";
            $('#tree').treeview({
                data: getTree(),         // data is not optional
                levels: 5,
                multiSelect: true
    
            });
    
            $("#btn").click(function (e) {
    
                var arr = $('#tree').treeview('getSelected');
    
                alert(JSON.stringify(arr));
                for (var key in arr) {
                    alert(arr[key].id);
                }
    
            })
    
        })
       
    </script>
    </body>
    </html>

     弹窗口+树形菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
                <link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet">
         <link href="/Scripts/bootstrap/css/bootstrap-treeview.css" rel="stylesheet">
    
           <script src="/Scripts/bootstrap/js/jquery.js" type="text/javascript"></script>
           <script src="/Scripts/bootstrap/js/bootstrap.js" type="text/javascript"></script>
          <script src="/Scripts/bootstrap/js/bootstrap-treeview.js"  type="text/javascript"></script>
    </head>
    <body>
    
    <p id="c"></p>
    
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" 
       data-target="#myModal">
       开始演示模态框
    </button>
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal" aria-hidden="true">
                      &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                   模态框(Modal)标题
                </h4>
             </div>
             <div class="modal-body">
              <div id="tree"></div>
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default" 
                   data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="btn">
                   提交更改
                </button>
             </div>
          </div><!-- /.modal-content -->
    </div><!-- /.modal -->
    </div>
    
    <script type="text/javascript">
        $(function () {
            function getTree() {
                // Some logic to retrieve, or generate tree structure
    
    
                var data = [{
                    text: "p1",
                    nodes: [{ text: "p1-1", id: '00001', nodeId: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}]
    
                }]
                return data;
            }
            var obj = {};
            obj.text = "123";
            $('#tree').treeview({
                data: getTree(),         // data is not optional
                levels: 5,
                multiSelect: true
    
            });
    
            $("#btn").click(function (e) {
    
                var arr = $('#tree').treeview('getSelected');
    
    
                for (var key in arr) {
                    c.innerHTML = c.innerHTML + "," + arr[key].id;
                }
    
            })
    
        })
       
    </script>
    </body>
    </html>
    View Code
  • 相关阅读:
    百度地图根据经纬度计算瓦片行列号
    【完全开源】百度地图Web service API C#.NET版,带地图显示控件、导航控件、POI查找控件
    TCP/UDP简易通信框架源码,支持轻松管理多个TCP服务端(客户端)、UDP客户端
    重中之重:委托与事件
    可复用代码:组件的来龙去脉
    [史上最全]C#(VB.NET)中位运算符工作过程剖析(译)
    物以类聚:对象也有生命
    导入导出Android手机文件
    Android修改system只读权限
    SSHDroid(SSH Server for Android)通过PC或命令连接android
  • 原文地址:https://www.cnblogs.com/tiancai/p/5749232.html
Copyright © 2011-2022 走看看