BootStrap TreeView使用示例

来源：互联网发布：对linux系统的认识编辑：程序博客网时间：2024/04/30 00:46

<!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>

阅读全文

0 0