会员架构显示

ruoyi-business/src/main/resources/templates/business/member/accountTeam.html

@@ -17,16 +17,23 @@
             </div>
         </div>
         <div class="form-group">
-            <div class="col-sm-8">
+            <div class="childDiv" style="display: none"></div>
-                <div id="teamDiv"></div>
+            <div id="container" class="col-sm-8" style="width: 90%;margin-top: 10px;">
                 <!--<input name="memberName" th:field="*{memberName}" class="form-control" type="text" required maxlength="10">-->
             </div>
         </div>
 
     </div>
     <th:block th:include="include :: footer" />
+    <style>
+        .childDiv{padding:7px 0 0 0}
+        .childDiv .cont{padding-left: 20px}
+        .childDiv span{display:block;font-size: 14px;line-height: 24px;padding:0 0 4px 4px;cursor:pointer;border-radius: 5px;border:1px solid #AAAAAA}
+        .childDiv span.noneChild{padding-left: 29px;padding-top: 2px;padding-bottom: 2px}
+    </style>
     <script th:inline="javascript">
         var prefix = ctx + "business/member";
+        var clone = $(".childDiv");
 
         $(function() {
             showTeam($("#productID").val());
@@ -36,14 +43,33 @@
         function showTeam(productID){
             $.post(prefix + "/accountTeamDetail", "memberID=" + $("#memberID").val() + "&productID=" + productID, function(resp){
                 if(resp.code != 0) return;
-
+                $("#numSpan").text(resp.data.teamNum);
+                showChildren($("#container"), resp.data.memberList);
+                $("#container .cont").hide();
             });
         }
 
         //列出子级
-        function showChildren(){
+        function showChildren(div, list){
-
+            for(let i=0;i<list.length;i++){
+                let item = list[i];
+                let children = item.children;
+                let child = clone.clone().show();
+                child.html("<span class='" + (children ? "glyphicon glyphicon-chevron-right" : "noneChild") + "'>&nbsp;" + item.member_name + " " + item.num + "盒</span>");
+                div.append(child);
+                if(children){
+                    child.append("<div class='cont'></div>");
+                    showChildren(child.find(".cont").eq(0), children);
+                }
+            }
         }
+
+        //点击事件
+        $("#container").on("click", ".childDiv span", function(){
+            let cont = $(this).next(".cont");
+            let isShow = cont.css("display") != "none";
+            isShow ? cont.hide() : cont.show();
+        });
     </script>
 </body>
 </html>