art-template渲染表格

art-template渲染表格

1、首先先引入art-template的包

 <script src="js/template-web.js"></script>

2、将你要渲染的数据写在一对script标签中

 <script type="text/javascript">
       // $(function(){

       var data = {
           list: [
               {
                   id: 1,
                   sName: '1',
                   eqlist: [
                       { id: '1', eName: '大枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '2', eName: '大枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '3', eName: '大枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                      
                   ]
                   // }
               },
               {
                   id: 2,
                   sName: '2',
                   eqlist: [
                       { id: '1', eName: '小枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '2', eName: '小枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                      
                   ]
               }, 



           ]
       };

3、渲染你的模板，将你要渲染的模板写在带有id的，type=“text/html”的script标签内
4、将你的模板填充到你所要渲染的盒子里
其中include代表你要讲哪个模板包含在另一个模板中

<div id="box"></div>
  <script  type="text/html" id="tpl">
       <table class="table table-bordered text-center">
               <tr style=" background-color: #becffe;">
                   <th style="width:60px;">序号</th>
                   <th style="width:80px;">货架号</th>
                   <th>品名</th>
                   <th>种类</th>
                   <th>存放量</th>
                   <th>可用量</th>
                   <th>新品</th>
                   <th>备注</th>
               </tr>
               <!-- 1 -->
               {{each list}}
               <tr >
                   <td rowspan={{$value.eqlist.length+1}}>{{$index+1}}</td>
                   <td  rowspan={{$value.eqlist.length+1}}>{{$value.sName}}</td>
                   {{include 'tpl2' $value}}
               </tr>
               
              {{/each}}
           </table>
   </script>
   <script id="tpl2" type="text/html">
       {{each eqlist}}
       <tr>
       <td >{{$value.eName}}</td>
       <td>{{$value.cName}}</td>
       <td>{{$value.totalNum}}</td>
       <td>{{$value.canUNum}}</td>
       <td>{{$value.newNum}}</td>
       <td>{{$value.note}}</td>
       </tr>
       {{/each}}

   </script>
   <script type="text/javascript">
       // $(function(){

       var data = {
           list: [
               {
                   id: 1,
                   sName: '1',
                   eqlist: [
                       { id: '1', eName: '大枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '2', eName: '大枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '3', eName: '大枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                      
                   ]
                   // }
               },
               {
                   id: 2,
                   sName: '2',
                   eqlist: [
                       { id: '1', eName: '小枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '2', eName: '小枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                      
                   ]
               }, {
                   id: 3,
                   sName: '3',
                   eqlist: [
                       { id: '1', eName: '大刀', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '2', eName: '大刀', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '3', eName: '大刀', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '4', eName: '大刀', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                      
                   ]
               }, {
                   id: 4,
                   sName: '4',
                   eqlist: [
                       { id: '1', eName: '手枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '2', eName: '手枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '3', eName: '手枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '4', eName: '手枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       { id: '5', eName: '手枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                       
                   ]
               }, {
                   id: 5,
                   sName: '5',
                   eqlist: [
                       { id: '1', eName: '大枪', cName: '武器', totalNum: 400, canUNum: 400, newNum: 100, note: '无' },
                      
                      
                   ]
               },


           ]
       };

       var box = document.getElementById('box');
       var tmp = template('tpl', data);
       box.innerHTML = tmp;



           // });
   </script>