【JRender学习】（二）表格渲染

最新推荐文章于 2025-01-09 10:25:42 发布

原创

最新推荐文章于 2025-01-09 10:25:42 发布 · 置顶 · 593 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jrender #jrender入门 #渲染表格 #模板渲染

本文介绍了如何使用JRender进行表格渲染。首先讲解了渲染所需的三元素：数据（馅料）、模板（包子皮）和容器（盘子）。通过一个json数组作为数据，展示了模板脚本中的for循环语法。接着，创建了最终的HTML容器，并演示了如何将数据填充到表格中。文章还提到了{{:#getIndex()}}用于获取遍历的索引，并强调了大小写敏感性。作者鼓励读者掌握这种表格渲染方法，为后续的预编译模板学习打下基础。

继上一个帖子讲基础，这个帖子直接来：

1、画表格，第一想到用循环对吧，因为是一堆规律的数组数据，如下：三元素（数据、模板、容器）即（馅料、包子、盘子）

馅料（数据），一个json数组：

        var data = {
				'ct': [{
					'name': 'tony',
					'age': 15
				}, {
					'name': 'van',
					'age': 18
				}, {
					'name': 'simon',
					'age': 18
				}, {
					'name': 'hebi',
					'age': 18
				}]
			}

包子皮（模板）：

            <script type="text/x-jsrender" id="Tmpl">
			<table border="1" style="margin-left: 50px;" width="200px" >
			<tr align="center">
			<td>序号</td>
			<td>姓名</td>
			<td>年龄</td>
			</tr>
			{
  
  {for ct }}
				<tr align="center">
				<!--  注意 getIndex 的大小写-->
				<td>{
  
  {:#getIndex() + 1}}</td>
				<t