|
...
|
...
|
@@ -18,10 +18,21 @@ |
|
|
|
<h5>Dynamic table</h5>
|
|
|
|
</div>
|
|
|
|
<!-- 树 -->
|
|
|
|
<div ></div>
|
|
|
|
<div id="continer" style="margin-top: 45px; float: left;margin-top: 120px;"></div>
|
|
|
|
<div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
|
|
|
|
<div class="widget-title">
|
|
|
|
|
|
|
|
<h5>Tree Title</h5>
|
|
|
|
</div>
|
|
|
|
<ul class="ui-widget ui-helper-clearfix" id="icons" style="float: left;margin-left: 165px;">
|
|
|
|
<li title=".ui-icon-plusthick" class="ui-state-default ui-corner-all" onclick="deletebtn()"><span class="ui-icon ui-icon-plusthick"></span></li>
|
|
|
|
</ul>
|
|
|
|
<ul class="ui-widget ui-helper-clearfix" id="icons" style="margin-right: 12px;">
|
|
|
|
<li title=".ui-icon-minusthick" class="ui-state-default ui-corner-all" onclick="editbtn()"><span class="ui-icon ui-icon-minusthick"></span></li>
|
|
|
|
</ul>
|
|
|
|
<div id="continer" ></div>
|
|
|
|
</div>
|
|
|
|
<!-- 列表 -->
|
|
|
|
<div class="widget-content nopadding" style="margin-left: 250px;">
|
|
|
|
<div class="widget-content nopadding" style="margin-left: 300px;">
|
|
|
|
<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;">
|
|
...
|
...
|
@@ -37,6 +48,38 @@ |
|
|
|
</div>
|
|
|
|
<button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button>
|
|
|
|
</div>
|
|
|
|
<div class="widget-box">
|
|
|
|
<div class="widget-title">
|
|
|
|
<h5>Modal dialogs</h5>
|
|
|
|
</div>
|
|
|
|
<div class="widget-content">
|
|
|
|
<a href="#myModal" data-toggle="modal" class="btn btn-primary">Modal dialog</a>
|
|
|
|
<a href="#myAlert" data-toggle="modal" class="btn btn-danger">Alert</a>
|
|
|
|
|
|
|
|
<div id="myModal" class="modal hide">
|
|
|
|
<div class="modal-header">
|
|
|
|
<button data-dismiss="modal" class="close" type="button">×</button>
|
|
|
|
<h3>Modal header</h3>
|
|
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
|
|
<p>One fine body…</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="myAlert" class="modal hide">
|
|
|
|
<div class="modal-header">
|
|
|
|
<button data-dismiss="modal" class="close" type="button">×</button>
|
|
|
|
<h3>Alert modal</h3>
|
|
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
|
|
<p>Lorem ipsum dolor sit amet...</p>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
|
|
<a data-dismiss="modal" class="btn btn-primary" href="#">Confirm</a>
|
|
|
|
<a data-dismiss="modal" class="btn" href="#">Cancel</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="table"></div>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -114,10 +157,10 @@ |
|
|
|
//主方法，运用递归实现
|
|
|
|
function createTree(jsons,pid){
|
|
|
|
if(jsons != null){
|
|
|
|
var ul = '<ul class="" style="width: 250px;" >' ;
|
|
|
|
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+'>' + jsons[i].name + "</li>" ;
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
...
|
...
|
@@ -137,5 +180,17 @@ |
|
|
|
}) ;
|
|
|
|
|
|
|
|
}) ;
|
|
|
|
|
|
|
|
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(){
|
|
|
|
alert(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
function editbtn(){
|
|
|
|
alert(2);
|
|
|
|
}
|
|
|
|
</script> |
|
|
|
|
|
|
\ No newline at end of file |
...
|
...
|
|
