artTemplate巢狀使用(二)
阿新 • • 發佈:2018-12-31
先展示json資料的組成:
public void getAllTanWeiAndTanWeiDetail(){
List<Ttanwei> plist=this.tanWeiService.getAllTanWei();
JSONArray jsonArray=new JSONArray();
JSONArray myArray=new JSONArray();
JSONObject jsonObject=new JSONObject();
JSONObject myObject=new JSONObject();
for(int i=0;i<plist.size();i++){
Ttanwei tanwei=plist.get(i);
//新增
myObject.clear();
myObject.put("id",tanwei.getId());
myObject.put("tname",tanwei.getTanWeiName());
myObject.put("imgUrl",tanwei.getImgUrl());
//select detail.id ,detail.detailName,p.pname,p.smallImgUrl
List tanWeiDetailList=this.tanWeiService.getTtanweidetail(tanwei.getId());
//select detail.id,detail.detailName,p.pname,p.smallImgUrl
for(int j=0;j<tanWeiDetailList.size();j++){
Object[] t=(Object[]) tanWeiDetailList.get (j);
jsonObject.clear();
jsonObject.put("id",t[0]);
jsonObject.put("detailName",t[1]);
jsonObject.put("pname",t[2]);
jsonObject.put("smallImgUrl",t[3]);
myArray.add(jsonObject);
}
myObject.put("details",myArray);
jsonArray.add(myObject);
}
HashMap<String, Object> jsMap=new HashMap<String, Object>();
jsMap.put("rows", jsonArray);
this.JSObj=JSONObject.fromObject(jsMap);
this.writeJson(JSObj);
}
實體資料:
{
"rows":[{
"details":[
{
"id":1,
"pname":"FR",
"smallImgUrl":"/yamadv/upload/2015081111402253e70d45e8506.jpg"
},
{
"id":2,
"pname":"WER009",
"smallImgUrl":"/yamadv/upload/2015081111443353e70d45e8506.jpg"
}
],
"id":1,
"imgUrl":"/yamadv/upload/2015082116352053e70d45e8506.jpg",
"tname":"套套天堂"
}]
}
js程式碼:
<script type="text/html" id="TanWeiTemplate">{{each rows as value i }}
<div class="tanwei">
<div class="tanweiBox_left">
<div class="tanweiname" onclick="addTanWeiDetails({{value.id}})"><span>新增明細</span></div>
<img alt="" src="{{value.imgUrl}}">
<div><span>{{value.tname}}</span></div>
</div>
<div class="tanweiBox_right">
{{include 'detaiList' value}}
</div>
</div>
{{/each}}</script>
<script type="text/html" id="detaiList">
<ul>
{{each details as value i}}
<li>
<img alt="" src="{{value.imgUrl}}">
<div><span>{{value.pname}}</span></div>
</li>
{{/each}}
</ul>
</script>
注意:{{include ‘detaiList’ value}} detaiList:表示子模板 value:表示資料來源
html程式碼:
<div>
<div class="tanweiname"><span onclick="addTanWei()">新增新攤位</span></div>
<div id="tanweiBox" class="tanweiBox">
<!-- <div class="tanwei">
<div class="tanweiBox_left">
<div class="tanweiname" onclick="addTanWeiDetail()"><span>新增明細</span></div>
<img alt="" src="">
<div><span>攤位名稱</span></div>
</div>
<div class="tanweiBox_right">
<ul>
<li>
<img alt="" src="">
<div>攤位明細名稱</div>
</li>
<li>
<img alt="" src="">
<div>攤位明細名稱</div>
</li>
<li>
<img alt="" src="">
<div>攤位明細名稱</div>
</li>
<li>
<img alt="" src="">
<div>攤位明細名稱</div>
</li>
</ul>
</div>
</div> -->
</div>
介面效果: