Avalon.js 实现列表
<table border="0" cellpadding="0" cellspacing="0" class="tab1" >
<tr>
<td width="7%"> </td>
<td width="19%">运输类型</td>
<td width="7%">包裹类型</td>
<td width="8%">计费重量</td>
<td width="12%" class="sort-box"><span class="sort-price" ms-click='changeTimeSort'>参考时效<font class="sort-img unsort"></font></span></td>
<td width="8%">燃油价</td>
<td width="10%">运输价</td>
<td width="10%" class="sort-box"><span class="sort-price" ms-click='changePriceSort'>总价<font class="sort-img unsort"></font></span></td>
<td class="cz-list" width="10%">操作</td>
<td width="10%"> </td>
</tr>
</table>
//循环AirlLineList
<div class="myTable" ms-repeat="AirlLineList">
<table border="0" cellpadding="0" cellspacing="0" class="tab1" ms-repeat-el="ek.Item" >
<tr>
<td width="7%">
<img ms-src="{{el.logo}}" style="width: 60px; height: 50px;" /></td>
<td width="20%"><span>{{el.TransportName}} ({{el.PackageTypeName}})
<img src="data:images/wenhao.png" style="width: 15px; height: 15px;" ms-if="el.ClientDesc!=null&&el.ClientDesc!=''" ms-mouseover="tipAir(this,el)" ms-mouseout="tipClose(this)" /></span><br />
{{el.AirLineName}}</td>
<td width="7%">{{el.PackageTypeName}}</td>
<td width="8%" ms-if="el.Type!='2'"><span> {{el.weight|number(2,'.',',')}}</span> kg</td>
<td width="8%" ms-if="el.Type=='2'"><span> {{el.weight3}}</span> m³</td>
<td width="12%" ms-if="el.Duration!=null&&el.IsDraw=='0'">
<span>{{el.Duration}}个工作日</span>
</td>
<td width="12%" ms-if="el.Duration!=null&&el.IsDraw=='1'">
<span>{{el.Duration}}个工作日提取</span>
</td>
<td width="8%" >¥<span> {{el.OilPrice|number(2,'.',',')}}</span></td>
<td width="10%">¥<span>{{el.Price2|number(2,'.',',')}}</span></td>
<td width="10%" class="money" >¥<span>{{el.Price|number(2,'.',',')}}</span><img src="data:images/tip_gth.png" style="width: 20px; height: 20px;" ms-mouseover="tipPrice(this,el)" ms-mouseout="tipPriceClose(this)" /></td>
<td class="cz-list" width="10%" ms-click=" checkOrder(el.ZoneID,el.AirLineID,el,this)" align="right">
<p class="xd-btn">下单</p>
</td>
<td class="pull-btn pull-btn1" width="10%"><span ms-if="$index==0&&ek.Count>1" ms-click="openList(this)">
<label class="more">更多</label><img src="data:images/bottom.png" /></span></td>
<td style="display:none" id="calcWeight">{{el.weight|number(2,'.',',')}}</td>
</tr>
<tr ms-if="el.OtherDesc!=null">
<td></td>
<td colspan="6">{{el.OtherDesc}}</td>
<td colspan="3"></td>
</tr>
</table>
</div>
//声明定义avalon
var vm = avalon.define({
$id: 'internationalLineList',
AirlLineList: [], });
//查询方法
function QueryAirLinePriceList() {
debugger;
_czc.push(["_trackEvent", "在线下单", "查询"]); //czc记录点击事件
var country = $('#SendCountry').val();
if (country == null || country == "" || country==0) {
var countryID = $("#countryID").val();
$('#SendCountry').val(countryID)
}
var weight = $("input[name='Quantity']").val();
if (country == "" || country == 0 || weight == "" || weight == 0) {
return false;
} vm.AirlLineList = [];
var expressType = $("#ExpressType").val();
$.ajax({
url: "Handle/NewQueryOrderData.ashx?action=QueryAirlineOrderList",
type: "post",
data: $("#form1").serialize(),
beforeSend: function () {
$("#loading").show();
},
dataType: "json",
success: function (data) {
$("#loading").hide();
if (data.success) {
debugger;
vm.AirlLineList = data.data; hideData();
$('.more').html("更多");
$('.more').next().attr("src", "images/bottom.png");
}
else
{
alert("未查到任何数据!");
} },
error: function (data) {
$("#loading").hide();
}
});
}
Avalon.js 实现列表的更多相关文章
- avalon.js 1.4.6简单列表数据绑定ms-repeat ms-click
1.列表数据绑定 <html> <head> <meta charset="UTF-8"> <meta name="viewpo ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- avalon.js路由
之前自己写了一个AJAX加载页面的方法:有时候一个页面里面会分区域加载不同的东西(div,html),但是IE的回退按钮,就失去任何意义了: 这两天研究了一下avalon.js的路由: 需要准备: 1 ...
- avalon.js 多级下拉框实现
学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
- avalon.js实践 svg地图配置工具
MVVM模式,在很多复杂交互逻辑下面,有很大的优势.现在相关的框架也很多,现在项目中使用了avalon.js,选择它的原因,是兼容性的考虑,当然也要支持下国内开发大牛,至于性能方面的,没有实际测试过, ...
- avalon.js实现一个简易日历
使用MVVM框架avalon.js实现一个简易日历 最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...
- 一款轻量级前端框架Avalon.Js
avalon2是一款基于虚拟DOM与属性劫持的 迷你. 易用. 高性能 的 前端MVVM框架, 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开 ...
- 15个Node.js项目列表
前言: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台,是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascri ...
- avalon.js的循环操作在表格中的应用
avalon.js的循环操作在表格中的应用 一个JAVA开发,因为做的门户系统中,数据的展示加载的速度很影响使用效果,想到的是尽量少的请求后台,然后接触到了avalon,看介绍这是一个很轻很轻的MVV ...
随机推荐
- 有关PHP数组
在PHP中,数组就是关键字和值的集合,我们可以使用array关键字创建: $arr=array[100,200,300,400,500]: //这是一个自定义数组,数组里面的值是自 ...
- APUE学习笔记2——文件I/O
1 引言 本章首先讨论Unix系统中大多数文件I/O最常用的5个系统函数:open.read.write.lseek以及close. 本章所说明的函数又被成为不带缓冲的I/O,不带缓冲是指每个read ...
- Book 树状数组 小结
差不多花了10天学树状数组,是照着这篇博客做的题目,还差几道---------- http://blog.csdn.net/chenguolinblog/article/details/9916229 ...
- java中端口号被占用的解决办法
第一步,命令提示符号,执行命令:netstat -ano 可见,占用1099端口的进程的PID是10460. 第二步,命令提示符号,执行命令:tasklist(通过pid 10460定位) 可见,该占 ...
- Spark 代码走读之 Cache
Spark是基于内存的计算模型,但是当compute chain非常长或者某个计算代价非常大时,能将某些计算的结果进行缓存就显得很方便了.Spark提供了两种缓存的方法 Cache 和 checkPo ...
- 进入docker 容器内命令
docker exec :在运行的容器中执行命令 语法 docker exec [OPTIONS] CONTAINER COMMAND [ARG...] OPTIONS说明: -d :分离模式: 在后 ...
- MySQL主从宕机的解决方法
测试系统:centos6.5系统 测试环境IP地址划分: master: 192.168.80.130 slave:192.168.80.143 slave:192.168.80.146 首先模拟(M ...
- [剑指offer] 1. 二维数组中的查找 (数组)
注意是有序数组!! 思路: 1.利用二维数组由上到下,由左到右递增的规律,选取右上角或者左下角的元素a[m][n]与target进行比较, 当target小于元素a[m][n]时,那么target必定 ...
- 小学生都能学会的python(函数)
小学生都能学会的python(函数) 神马是函数 函数: 对功能或者动作的封装 函数的定义 def 函数名(形参列表): 函数体(return) ret = 函数名(实参列表) 函数的返回值 retu ...
- C/C++ 浮点数比较问题
本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50255623 Never try to ...