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 ...
随机推荐
- Maven 学习笔记(二)
前面一文——Maven 学习笔记(一)中已经提到了 pom 的大部分配置,Maven 本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给创建来完成,每一个任务都会对应一个插件 ...
- mac下安装postgreSql
在 mac 下,可以利用 homebrew 直接安装 PostgreSQL: 1 brew install postgresql -v 稍等片刻,PostgreSQL 就安装完成.接下来就是初始数据库 ...
- element-ui自定义table表头,修改列标题样式
elementUI table表格一般的样式是这样的: 但是要改变表头是比较麻烦的一个事情,但是往往有些项目是需要的比如改成如下样式: 一般直接改起来挺麻烦,好在官网提供了一个方法:render-he ...
- UWP tips (与wp8.1的不同)
一.异步调用之后,要更新UI时,代码如下 await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =&g ...
- 工作需求——VBA操作打印机
因为最近做的事情比较多,平时也多用EXCEL,所以顺便学习EXCEL的功能性的东西 转载:https://msdn.microsoft.com/zh-tw/vba/excel-vba/articles ...
- NTP同步底层实现
RFC http://www.ietf.org/rfc/rfc5905.txt https://www.eecis.udel.edu/~mills/ntp/html/select.html https ...
- 01 C#基础
第一天 .net平台(中国移动互联网平台): .net框架(信号塔): CLR(公共语言运行时) .Net类 库 我们使用的语言是——C# 2.解决方案项目与类的关系: 解决方案:公司 项目:部门 类 ...
- Android开发进度05
1,今日:目标:完成后台用户的增删改查 2,昨天:完成登录和注册功能 3,收获:熟练了SQLite操作 4,问题:无
- java实现登录的验证码和猜数字游戏_图形化界面
实验任务四 1,出现设计思想 (1)先定义文本框.密码框和验证码框的组件 (2)定义面板和按钮的个数 (3)定义公有的虚构方法,通过对象实例化来调用 (4)利用Random类来实现生成0-9的随机数 ...
- java.lang.RuntimeException: java.sql.SQLSyntaxErrorException: ORA-00911: 无效字符
这种情况可能是因为在设置数据库的时候,没有配置数据库的方言,导致sql语句无法被识别. 例如在配置Jfinal的配置文件的时候 如果不配置数据库的方言,默认下它是MySQL的,当使用oracle数据库 ...