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 ...
随机推荐
- [转]让你的网页文本框增加光晕效果与提示,水印(类似QQ2011)
本文转自:http://www.cnblogs.com/xiaofengfeng/archive/2013/01/28/2880344.html 让你的网页文本框增加光晕效果(类似QQ2011) 我们 ...
- linux_api之文件属性
本篇索引:1.引言2.文件类型3.获取文件属性的函数,stat.fstat.lstat4.超级用户(root用户)和普通用户5.进程与用户ID6.文件权限的检查7.新创建的的文件和目录的所有权8.ac ...
- .vimrc的配置
set nocompatible set encoding=utf-8 set fileencodings=utf-8,chinese set tabstop=4 set cindent shiftw ...
- GitKraken使用教程-基础部分(6)
4) 放弃本次文件的改动 有些情况下,由于更改代码造成了编译无法通过等错误时,想要放弃这次对文件的修改,将文件还原成上一次提交后的状态,一种简单的恢复文件的方法就是,在Unstaged Files 列 ...
- SSL、数字签名、CA 工作原理
SSL.数字签名.CA 工作原理 对称加密和非对称加密介绍和区别 什么是对称加密技术? 对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥,即加密密钥也可以用作解密密钥,这种方 ...
- jsp---tomcat===》》内置对象
1.内置对象: request: 方法:getParameter("txtName"):获取和页面上的name属性对象的value值 返回String ...
- spring mvc 与Struts的认识
首先,纠正一个概念上的错误.ssh一般意义上是指 struts,spring framework以及hibernate.这三个框架作用是不一样的.hibernate主要是用于持久层,struts主要是 ...
- Elmah 数据库脚本
/* 错误管理工具 SQL代码 */ CREATE TABLE dbo.ELMAH_Error ( ErrorId UNIQUEIDENTIFIER NOT NULL, Application NVA ...
- 【Angular JS】网站使用社会化评论插件,以及过程中碰到的坑
目前正在开发自己的网站,技术上使用Angular JS + Express JS + Mongo DB.由于网站会有文章发布,因此需要有评论功能.评论功能也可以自己开发,但由于现在社会化评论插件很多, ...
- ScrollView监听滑动到顶部和底部的方法
不需要监听滑动位置,只需要重写ScrollView的onOverScrolled和stopNestedScroll方法就可以了 public class ReadScrollView extends ...