From b9dba76cee0f592da2cb3747a2104dfe048f9390 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E6=BA=AA=E5=85=88=E7=94=9F?= <usfree2021@163.com>
Date: Tue, 6 Sep 2022 18:06:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E5=AD=90=E8=A1=A8=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0=E5=AD=90=E8=A1=A8=E5=A4=9A?=
 =?UTF-8?q?=E7=BA=A7=E8=81=94=E5=8A=A8=E7=AE=80=E5=8D=95=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 清溪先生 <usfree2021@163.com>
---
 .../templates/demo/table/subdata.html         | 50 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/ruoyi-admin/src/main/resources/templates/demo/table/subdata.html b/ruoyi-admin/src/main/resources/templates/demo/table/subdata.html
index 99330d762..5b3a18b2d 100644
--- a/ruoyi-admin/src/main/resources/templates/demo/table/subdata.html
+++ b/ruoyi-admin/src/main/resources/templates/demo/table/subdata.html
@@ -95,6 +95,7 @@
             	price: "12.5",
             	date: "2021-02-01",
             	type: "1",
+                cascadeType: "3"
 	    	},
 	    	{
 	    		id: "101",
@@ -103,6 +104,7 @@
             	price: "10.8",
             	date: "2021-02-01",
             	type: "0",
+                cascadeType: "2"
 	    	}];
 		    var options = {
 		    	data: data,
@@ -170,6 +172,22 @@
 		                return $("#goodsTypeTpl").tmpl(data).html();
                     }
 		        },
+                {
+                    field: 'cascadeType',
+                    align: 'center',
+                    title: '级联类型',
+                    formatter: function(value, row, index) {
+                        //模拟后台同步获取数据(根据type的当前类型获取cascadeType类型，用于数据回显,此为示例，实际业务需要灵活处理)
+                        var cascadeTypesData = [];
+                        if (row.type === "0"){
+                            cascadeTypesData = [{id:"1",name:"AA"},{id:"2",name:"BB"}];
+                        }else if(row.type === "1"){
+                            cascadeTypesData = [{id:"3",name:"CC"},{id:"4",name:"DD"}];
+                        }
+                        var data = {index: index, cascadeType: value,cascadeTypes:cascadeTypesData};
+                        return $("#cascadeTypeTpl").tmpl(data).html();
+                    }
+                },
 		        {
                     title: '操作',
                     align: 'center',
@@ -214,6 +232,7 @@
             	price: "",
             	date: "",
             	type: "",
+                cascadeType: ""
             }
         	sub.addRow(row);
         }
@@ -226,6 +245,23 @@
 	            pickerPosition:'top-right'
 	        });
     	});
+        function changeHandler(el) {
+            //模拟后台获取新数据
+            let name = $(el).attr('name').split(".")[0]+".cascadeType";
+            let newOptions = [];
+            if($(el).val() == "0"){
+                newOptions = [{id:"1",name:"AA"},{id:"2",name:"BB"}];
+            }else{
+                newOptions = [{id:"3",name:"CC"},{id:"4",name:"DD"}];
+            }
+            let select = $("[name='"+name+"']");
+            select.empty();
+            var index;
+            for (index = 0; index < newOptions.length; ++index) {
+                var child = newOptions[index];
+                select.append("<option value='" + child.id + "'>" + child.name +"</option>");
+            }
+        }
     </script>
 </body>
 </html>
@@ -233,10 +269,22 @@
 <!-- 商品类型 -->
 <script id="goodsTypeTpl" type="text/x-jquery-tmpl">
 <div>
-<select class='form-control' name='goods[${index}].type'>
+<select class='form-control' onchange="changeHandler(this)" name='goods[${index}].type'>
     <option value="">所有</option>
     <option value="0" {{if type==="0"}}selected{{/if}}>寒性</option>
     <option value="1" {{if type==="1"}}selected{{/if}}>热性</option>
 </select>
 </div>
+</script>
+
+<!-- 级联类型 -->
+<script id="cascadeTypeTpl" type="text/x-jquery-tmpl">
+<div>
+<select class='form-control' name='goods[${index}].cascadeType'>
+    <option value="">所有</option>
+    {{each(i,type) cascadeTypes}}
+        <option value=${type.id} {{if cascadeType=== type.id}}selected{{/if}}>${type.name}</option>
+    {{/each}}
+</select>
+</div>
 </script>
\ No newline at end of file