artTemplate嵌套使用（二）

先展示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 οnclick="addTanWei()">添加新攤位</span></div>
        <div id="tanweiBox" class="tanweiBox">

            <!-- <div class="tanwei">
                <div class="tanweiBox_left">
                    <div class="tanweiname" οnclick="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>  

界面效果：