|
@@ -18,10 +18,21 @@ |
|
@@ -18,10 +18,21 @@ |
|
18
|
<h5>Dynamic table</h5>
|
18
|
<h5>Dynamic table</h5>
|
|
19
|
</div>
|
19
|
</div>
|
|
20
|
<!-- 树 -->
|
20
|
<!-- 树 -->
|
|
21
|
- <div ></div>
|
|
|
|
22
|
- <div id="continer" style="margin-top: 45px; float: left;margin-top: 120px;"></div>
|
21
|
+ <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
|
|
|
|
22
|
+ <div class="widget-title">
|
|
|
|
23
|
+
|
|
|
|
24
|
+ <h5>Tree Title</h5>
|
|
|
|
25
|
+ </div>
|
|
|
|
26
|
+ <ul class="ui-widget ui-helper-clearfix" id="icons" style="float: left;margin-left: 165px;">
|
|
|
|
27
|
+ <li title=".ui-icon-plusthick" class="ui-state-default ui-corner-all" onclick="deletebtn()"><span class="ui-icon ui-icon-plusthick"></span></li>
|
|
|
|
28
|
+ </ul>
|
|
|
|
29
|
+ <ul class="ui-widget ui-helper-clearfix" id="icons" style="margin-right: 12px;">
|
|
|
|
30
|
+ <li title=".ui-icon-minusthick" class="ui-state-default ui-corner-all" onclick="editbtn()"><span class="ui-icon ui-icon-minusthick"></span></li>
|
|
|
|
31
|
+ </ul>
|
|
|
|
32
|
+ <div id="continer" ></div>
|
|
|
|
33
|
+ </div>
|
|
23
|
<!-- 列表 -->
|
34
|
<!-- 列表 -->
|
|
24
|
- <div class="widget-content nopadding" style="margin-left: 250px;">
|
35
|
+ <div class="widget-content nopadding" style="margin-left: 300px;">
|
|
25
|
<div class="widget-title" style="height: 53px;">
|
36
|
<div class="widget-title" style="height: 53px;">
|
|
26
|
<div>
|
37
|
<div>
|
|
27
|
<div class="form-inline" role="form" id="inBoxQueryDiv" style=" margin-top: 12px;margin-left: 25px;float: left;">
|
38
|
<div class="form-inline" role="form" id="inBoxQueryDiv" style=" margin-top: 12px;margin-left: 25px;float: left;">
|
|
@@ -37,6 +48,38 @@ |
|
@@ -37,6 +48,38 @@ |
|
37
|
</div>
|
48
|
</div>
|
|
38
|
<button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button>
|
49
|
<button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button>
|
|
39
|
</div>
|
50
|
</div>
|
|
|
|
51
|
+ <div class="widget-box">
|
|
|
|
52
|
+ <div class="widget-title">
|
|
|
|
53
|
+ <h5>Modal dialogs</h5>
|
|
|
|
54
|
+ </div>
|
|
|
|
55
|
+ <div class="widget-content">
|
|
|
|
56
|
+ <a href="#myModal" data-toggle="modal" class="btn btn-primary">Modal dialog</a>
|
|
|
|
57
|
+ <a href="#myAlert" data-toggle="modal" class="btn btn-danger">Alert</a>
|
|
|
|
58
|
+
|
|
|
|
59
|
+ <div id="myModal" class="modal hide">
|
|
|
|
60
|
+ <div class="modal-header">
|
|
|
|
61
|
+ <button data-dismiss="modal" class="close" type="button">×</button>
|
|
|
|
62
|
+ <h3>Modal header</h3>
|
|
|
|
63
|
+ </div>
|
|
|
|
64
|
+ <div class="modal-body">
|
|
|
|
65
|
+ <p>One fine body…</p>
|
|
|
|
66
|
+ </div>
|
|
|
|
67
|
+ </div>
|
|
|
|
68
|
+ <div id="myAlert" class="modal hide">
|
|
|
|
69
|
+ <div class="modal-header">
|
|
|
|
70
|
+ <button data-dismiss="modal" class="close" type="button">×</button>
|
|
|
|
71
|
+ <h3>Alert modal</h3>
|
|
|
|
72
|
+ </div>
|
|
|
|
73
|
+ <div class="modal-body">
|
|
|
|
74
|
+ <p>Lorem ipsum dolor sit amet...</p>
|
|
|
|
75
|
+ </div>
|
|
|
|
76
|
+ <div class="modal-footer">
|
|
|
|
77
|
+ <a data-dismiss="modal" class="btn btn-primary" href="#">Confirm</a>
|
|
|
|
78
|
+ <a data-dismiss="modal" class="btn" href="#">Cancel</a>
|
|
|
|
79
|
+ </div>
|
|
|
|
80
|
+ </div>
|
|
|
|
81
|
+ </div>
|
|
|
|
82
|
+ </div>
|
|
40
|
</div>
|
83
|
</div>
|
|
41
|
<div id="table"></div>
|
84
|
<div id="table"></div>
|
|
42
|
</div>
|
85
|
</div>
|
|
@@ -114,10 +157,10 @@ |
|
@@ -114,10 +157,10 @@ |
|
114
|
//主方法，运用递归实现
|
157
|
//主方法，运用递归实现
|
|
115
|
function createTree(jsons,pid){
|
158
|
function createTree(jsons,pid){
|
|
116
|
if(jsons != null){
|
159
|
if(jsons != null){
|
|
117
|
- var ul = '<ul class="" style="width: 250px;" >' ;
|
160
|
+ var ul = '<ul class="" style="width: 120px;" >' ;
|
|
118
|
for(var i=0;i<jsons.length;i++){
|
161
|
for(var i=0;i<jsons.length;i++){
|
|
119
|
if(jsons[i].pid == pid){
|
162
|
if(jsons[i].pid == pid){
|
|
120
|
- 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>" ;
|
163
|
+ 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>" ;
|
|
121
|
ul += createTree(jsons,jsons[i].id);
|
164
|
ul += createTree(jsons,jsons[i].id);
|
|
122
|
}
|
165
|
}
|
|
123
|
}
|
166
|
}
|
|
@@ -137,5 +180,17 @@ |
|
@@ -137,5 +180,17 @@ |
|
137
|
}) ;
|
180
|
}) ;
|
|
138
|
|
181
|
|
|
139
|
}) ;
|
182
|
}) ;
|
|
|
|
183
|
+
|
|
|
|
184
|
+ var dom = document.getElementById("icons");
|
|
|
|
185
|
+ var str = dom.getAttribute("style");
|
|
|
|
186
|
+ str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, "");
|
|
|
|
187
|
+ dom.setAttribute("style",str);
|
|
|
|
188
|
+ function deletebtn(){
|
|
|
|
189
|
+ alert(1);
|
|
|
|
190
|
+ }
|
|
|
|
191
|
+
|
|
|
|
192
|
+ function editbtn(){
|
|
|
|
193
|
+ alert(2);
|
|
|
|
194
|
+ }
|
|
140
|
</script> |
195
|
</script> |
|
141
|
|
196
|
|
