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 ...
随机推荐
- php锁定文本框内容的方法
有时候我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如<input type="text" name="zg" value="中国& ...
- Unity C# ref与out
ref和out 都是按地址传递的,使用后都将改变原来的数值.ref 方法参数关键字使方法引用传递到方法的同一个变量.当控制传递回调用方法时,在方法中对参数所做的任何更改都将反映在该变量中.若要使用 r ...
- wait/notify
某面试题,实现一个生产者——消费者模型 题目:采用多线程技术,通过wait/notify,设计实现一个符合生产者和消费者问题的程序,对某一个对象(枪膛)进行操作,其最大容量是20颗子弹,生产者线程是一 ...
- if转switch
if($a=="a") { echo "a"; } elseif ($a == "b") { echo "b"; } e ...
- 执行引入外部 jar 包的类的方法
liunx 系统中,命令行中语法:(.后面是冒号:) java -cp .:third.jar MyClass windows 系统中命令行的语法:(.后面是分号;) java -cp .;third ...
- 超链接导致window.location.href失效的解决办法
通常我们采用 window.location.href 执行页面间的跳转,比如下面的语句 window.location.href = 'https://www.baidu.com/'; 一般执行上面 ...
- html+css杂记
overflow可设置超出后隐藏 子元素撑开父级元素:①父级元素宽度不固定,②父级元素设置为inline-block或者添加float: html中的中文在浏览器打开为乱码(已经写了<meta ...
- [持续更新] Linux基础的重要命令
命令总结:100个左右 mkdir 方法一 [root@localhost ~]# mkdir /test && ls -ld /test 方法二 [root@localhost ~] ...
- <Android开源库 ~ 1> GitHub Android Libraries Top 100 简介
转载自GitHub Android Libraries Top 100 简介 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据 GitH ...
- Unity3d开发集成Google Admob广告增加收入
在Unity游戏中植入广告是Unity 游戏产品增加收入的一种重要方式,常用的广告有谷歌Admob,百度ssp,腾讯广点通,unity公司的unityads等等,而使用的最多的应该属于谷歌Admob, ...