avalon.js的循环操作在表格中的应用
avalon.js的循环操作在表格中的应用
<div ms-controller="list" class="block">
<table width="100%" border="" cellspacing="0" cellpadding="0">
<thead>
<tr height="25">
<th>价区</th>
<th>本期</th>
<th>上期</th>
<th>环比</th>
<th>同比</th>
</tr>
</thead>
<tbody>
<tr height="25" ms-for="($index, el) in @infoList">
<td><label>{{el.region}}</label></td>
<td><label>{{el.current}}</label></td>
<td><label>{{el.prior}}</label></td>
<td><label>{{el.relative}}</label></td>
<td><label>{{el.basis}}</label></td>
</tr>
</tbody>
</table>
</div>
Html中用到了ms-for指令,指明当前标签是一个循环体,el是循环的对象,@infoList是循环数组,可以用$index表示索引。
var vm = avalon.define({
$id:'list',
infoList:[{
region:"--",
current:"--",
prior:"--",
relative:"--",
basis:"--"
}]
});
avalon.scan(document.body);
ajax的回调中可以对vm.infoList赋值,表格就出来了。
avalon.js的循环操作在表格中的应用的更多相关文章
- js动态的往表格中加入表单元素
效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...
- [JS&Jquery]实现页面表格中相同内容的行或列合并
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak<script type=&qu ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- js通过行列获取表格中input的值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- (转)用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
- js如何实现动态的在表格中添加和删除行?(两种方法)
js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...
- js如何实现动态在表格中添加标题和去掉标题?
js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...
- Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能
Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...
- MVVM大比拼之avalon.js源码精析
简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...
随机推荐
- jQuery源代码学习_工具函数_type
jquery源代码学习_工具函数_type jquery里面有一个很重要的工具函数,$.type函数用来判断类型,今天写这篇文章,是来回顾type函数的设计思想,深入理解. 首先来看一下最终结果: 上 ...
- 判断表单中是否含有disabled属性
我想判断input里面是否有disabled.或者选中未选中的selected checked 属性时,需要用 prop() 方法,返回的结果是 true 或 false . attr()这个方 ...
- Linux 安装 webmin
下载webmin的rpm包 yum install webmin-rpm systemctl start webmin 即可
- Day7上
T1 部分分 枚举某个数 100 离散化.或 map 相对了不知道呢过不能过. T2 逆序对,不知对不对 归并排序,
- List转为DataTable并可以导出为Excel
using com.jd120.Core.Utility; using System; using System.Collections.Generic; using System.Data; usi ...
- 零度4W1H提问规则
WHAT:您现在的需求和目的是什么,请按条理描述清楚. WHERE:在什么平台.环境和工具下发生此问题. WHEN:何时发生的该问题,该问题是否能够重现. WHY:为什么不能通过搜索引擎来解决您的问题 ...
- 如何绘制ER图
先画出多个实体(用长方形表示),然后是联系类型(菱形),和属性(椭圆).
- maven课程 项目管理利器-maven 1-1课程概述
1 为什么使用maven? 多框架应用项目,jar包太多且冲突,为了解决这个问题,引入maven.(类似还有ant,gradle) 2 课程概述 maven快速入门 maven核心知识 maven建造 ...
- ORACLE:毫秒与日期的相互转换,获取某天的信息
毫秒转换为日期 SELECT TO_CHAR(1406538765000 / (1000 * 60 * 60 * 24) + TO_DATE('1970-01-01 08:00:00', 'YYYY- ...
- jQuery属性选择器中加变量
$(function () { $('#bkhandle').on('click','#bkdel',function () { $.ajax( { url:"{% url 'bkdel' ...