<%@page language="java" contentType="text/html;charset=utf-8" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a> </div> <div class="container-fluid"> <div class="widget-box"> <div class="widget-title"> <h5>Dynamic table</h5> </div> <!-- 树 --> <div ></div> <div id="continer" style="margin-top: 45px; float: left;margin-top: 120px;"></div> <!-- 列表 --> <div class="widget-content nopadding" style="margin-left: 250px;"> <div class="widget-title" style="height: 53px;"> <div> <div class="form-inline" role="form" id="inBoxQueryDiv" style=" margin-top: 12px;margin-left: 25px;float: left;"> <div class="input-group" style="float: left;"> <span class="input-group-addon">IP:</span> <input type="text" id="" class="form-control" placeholder=""/> </div> <div class="input-group" style="float: left;"> <span class="input-group-addon">IP:</span> <input type="text" id="" class="form-control" placeholder=""/> </div> <button id="submit" class="btn btn-default">搜索</button> </div> <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button> </div> </div> <div id="table"></div> </div> </div> </div> <script> $(function () { var data = []; for (var i = 0; i < 20; i++) { data.push({ moName: i, moHostIp: "用户" + i, moType: i % 3 == 0 ? 0 : 1, moStatus: "normal" }); } $("#table").table({ striped: true, panelClass: "panel-success", pagination: true, columns: [{ title: "监控网元", field: "moName" }, { title: "主机地址", field: "moHostIp" }, { title: "网元类型", field: "moType" },{ title: "网元状态", field: "moStatus" }, { title: "操作", formatter : function(value, rowData, rowIndex) { var div = $("<div>"); var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div); //修改 editBtn.click(function() { editTemplate(rowData.inboxTemplateId); }); div.append(" "); var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div); delBtn.click(function() { }); return div; } }], data: data }); }); //模拟数据 var jsonData = [ {"id":"1","name":"父节点1","url":"www.baidu.com","pid":"0"}, {"id":"4","name":"父节点11","url":"","pid":"1"}, {"id":"14","name":"父节点112","url":"","pid":"4"}, {"id":"5","name":"父节点12","url":"","pid":"1"}, {"id":"6","name":"父节点13","url":"","pid":"1"}, {"id":"2","name":"父节点4","url":"","pid":"0"}, {"id":"7","name":"父节点41","url":"","pid":"2"}, {"id":"8","name":"父节点42","url":"","pid":"2"}, {"id":"9","name":"父节点43","url":"","pid":"2"}, {"id":"3","name":"父节点5","url":"","pid":"0"}, {"id":"10","name":"父节点51","url":"","pid":"3"}, {"id":"13","name":"父节点111","url":"","pid":"4"}, {"id":"11","name":"父节点52","url":"","pid":"3"}, {"id":"12","name":"父节点53","url":"","pid":"3"} ] ; //主方法,运用递归实现 function createTree(jsons,pid){ if(jsons != null){ var ul = '<ul class="" style="width: 250px;" >' ; for(var i=0;i<jsons.length;i++){ if(jsons[i].pid == pid){ ul += '<input type="checkbox" name="checkBox" value='+jsons[i].id+' style="float: left;margin-top: 6px;width:10px;height:10px;"><li class="tree" value='+jsons[i].id+'>' + jsons[i].name + "</li>" ; ul += createTree(jsons,jsons[i].id); } } ul += "</ul>" ; } return ul ; } $(function(){ var ul = createTree(jsonData,0) ; $("#continer").append(ul) ; //控制菜单的隐藏显示 $("ul[class] li").each(function(){ $(this).click(function(){ $(this).next().toggle(); }) ; }) ; }) ; </script>