json定位,使用tmplus

//这里一定要加上,是在文档载入完成之后,才执行绑定模板的
        $(function () {
            var demodata = [{
                    "Cid": "1",
                    "Cname": "三年二班",
                    "Check": "0   0表示1个都没有勾选  1表示至少勾选了1个  2表示全部勾选",
                    "Cphoto": "班级图片地址",
                    "Students": [
                        {
                            "Sid": "s1",
                            "Sname": "周杰伦",
                            "Sphoto": "",  //这里可能没有图片,那么我们显示的时候,还要判断是否显示默认图片
                            "Check": "0表示没有勾选 1表示已经勾选"
                        },
                        {
                            "Sid": "s2",
                            "Sname": "李宇春",
                            "Sphoto": "http://pic.cnitblog.com/face/582230/20131114141342.png",
                            "Check": "0表示没有勾选 1表示已经勾选"
                        }
                    ]
                }
                , {
                    "Cid": "1",
                    "Cname": "三年四",
                    "Check": "0   0表示1个都没有勾选  1表示至少勾选了1个  2表示全部勾选",
                    "Cphoto": "班级图片地址",
                    "Students": [
                        {
                            "Sid": "s3",
                            "Sname": "周笔畅",
                            "Sphoto": "http://pic.cnitblog.com/face/572602/20131112163110.png",
                            "Check": "0表示没有勾选 1表示已经勾选"
                        },
                        {
                            "Sid": "s4",
                            "Sname": "董瑞",
                            "Sphoto": "http://pic.cnitblog.com/face/u119077.jpg",
                            "Check": "0表示没有勾选 1表示已经勾选"
                        }
                    ]
                }];

            //编译模板classMuban为一个变量名-> nameClassMuban  这样以后在其他地方,就可以方便调用 nameClassMuban了
            $.template("nameClassMuban", window.classMuban);

            //把模板缓存 加入 数据,然后添加到容器里面
            $.tmpl("nameClassMuban", demodata).appendTo("#showMyJson");     
        });


<!—模板  直接用script脚本包围的变量  注意后面一定要加type为 tmpl的特定值-->
    <script id="classMuban" type="text/x-jquery-tmpl"> 
        <tr><td>${Cid}</td>

                          <td>${Cname}</td><td><ul>{{each Students}}
                        <li>序号${$index + 1}: <label>学生id:${$value.Sid}学生名称:${$value.Sname}
                             学生头像:{{if $value.Sphoto}}  

                                     <img src="${$value.Sphoto}" /> 
                                      {{else}}  
                                       <img src="images/ico_01.png" title="这里是默认头像"/>   
                                         {{/if}}   
                            学生是否选中:${$value.Check}</label></li>{{/each}}</ul>

                     </td>

  </tr>        
    </script>


<table id="showMyJson" border="1">
            <tr>
                <td> 班级Id</td>
                <td> 班级名称</td>
                <td> 班级学生</td>
            </tr>
        </table>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值