|
...
|
...
|
@@ -17,6 +17,7 @@ |
|
|
|
|
|
|
|
<h5>Dynamic table</h5>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 树 -->
|
|
|
|
<div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
|
|
|
|
<div class="widget-title">
|
|
...
|
...
|
@@ -46,118 +47,216 @@ |
|
|
|
</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>
|
|
|
|
<button id="addBtn" class="" style="margin-top: 12px;margin-left: 500px;" data-target="#myModal" data-toggle="modal">新增</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="table"></div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<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">×</button>
|
|
|
|
<h4 class="modal-title" id="myModalLabel">新增</h4>
|
|
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
|
|
<div class="row-fluid">
|
|
|
|
<div class="span12">
|
|
|
|
<div class="widget-content nopadding">
|
|
|
|
<form action="#" method="get" class="form-horizontal">
|
|
|
|
<div class="control-group">
|
|
|
|
<label class="control-label" style="float: left;">Normal text input</label>
|
|
|
|
<div class="controls">
|
|
|
|
<input type="text" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
|
|
<label class="control-label" style="float: left;">Password input</label>
|
|
|
|
<div class="controls">
|
|
|
|
<input type="password" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
|
|
<label class="control-label" style="float: left;">Input with description</label>
|
|
|
|
<div class="controls">
|
|
|
|
<input type="text" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
|
|
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-primary">提交更改</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- /.modal-content -->
|
|
|
|
</div>
|
|
|
|
<!-- /.modal -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
$(function () {
|
|
|
|
$(function() {
|
|
|
|
var data = [];
|
|
|
|
for (var i = 0; i < 20; i++) {
|
|
|
|
data.push({
|
|
|
|
moName: i,
|
|
|
|
moHostIp: "用户" + i,
|
|
|
|
moType: i % 3 == 0 ? 0 : 1,
|
|
|
|
moStatus: "normal"
|
|
|
|
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: "操作",
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
var editBtn = $("<button value='"+rowData.mid+"'>").html("edit").appendTo(div);
|
|
|
|
div.append(" ");
|
|
|
|
var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
|
|
|
|
var delBtn = $("<button>").html("delete").appendTo(div);
|
|
|
|
delBtn.click(function() {
|
|
|
|
|
|
|
|
});
|
|
|
|
return div;
|
|
|
|
}
|
|
|
|
}],
|
|
|
|
data: data
|
|
|
|
} ],
|
|
|
|
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"}
|
|
|
|
] ;
|
|
|
|
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: 120px;" >' ;
|
|
|
|
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+'><a href="#">' + jsons[i].name + "</a></li>" ;
|
|
|
|
ul += createTree(jsons,jsons[i].id);
|
|
|
|
function createTree(jsons, pid) {
|
|
|
|
if (jsons != null) {
|
|
|
|
var ul = '<ul class="" style="width: 120px;" >';
|
|
|
|
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+'><a href="#">'
|
|
|
|
+ jsons[i].name + "</a></li>";
|
|
|
|
ul += createTree(jsons, jsons[i].id);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
ul += "</ul>" ;
|
|
|
|
ul += "</ul>";
|
|
|
|
}
|
|
|
|
return ul ;
|
|
|
|
return ul;
|
|
|
|
}
|
|
|
|
|
|
|
|
$(function(){
|
|
|
|
var ul = createTree(jsonData,0) ;
|
|
|
|
$("#continer").append(ul) ;
|
|
|
|
$(function() {
|
|
|
|
var ul = createTree(jsonData, 0);
|
|
|
|
$("#continer").append(ul);
|
|
|
|
//控制菜单的隐藏显示
|
|
|
|
$("ul[class] li").each(function(){
|
|
|
|
$(this).click(function(){
|
|
|
|
$("ul[class] li").each(function() {
|
|
|
|
$(this).click(function() {
|
|
|
|
$(this).next().toggle();
|
|
|
|
}) ;
|
|
|
|
}) ;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
}) ;
|
|
|
|
});
|
|
|
|
|
|
|
|
var dom = document.getElementById("icons");
|
|
|
|
var str = dom.getAttribute("style");
|
|
|
|
str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, "");
|
|
|
|
dom.setAttribute("style",str);
|
|
|
|
function deletebtn(){
|
|
|
|
dom.setAttribute("style", str);
|
|
|
|
function deletebtn() {
|
|
|
|
alert(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
function editbtn(){
|
|
|
|
function editbtn() {
|
|
|
|
alert(2);
|
|
|
|
}
|
|
|
|
</script> |
...
|
...
|
|
