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 ...
随机推荐
- Log4net根据日志等级输出到不同文件
<?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...
- web前端页面优化——个人见解
web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一. 有关javascript方面 优化见解. 1. 首先举个例子: ...
- Hibernate框架学习(九)——Criteria语法
一.语法 1.基本查询 2.条件查询 3.分页查询 4.排序查询 5.统计查询 二.离线查询 1.非离线的Criteria 2.离线的Criteria 3.演示 public class Demo2 ...
- hdu 5691 Sitting in line 状压动归
在本题中,n<=16n<=16n<=16, 不难想到可以将所选数字的编号进行状态压缩. 定义状态 dp[S][j]dp[S][j]dp[S][j],其中 SSS 代表当前所选出的所有 ...
- Java 面向对象详解
0 引言 接触项目开发也有很长一段时间了,最近开始萌发出想回过头来写写以前学过的基础知识的想法. 1 面向对象 面向对象(Object Oriented)是一种新兴的程序设计方法,或者是一种新的程序设 ...
- CefSharp获取页面Html代码的两种方式
CefSharp在NuGet的简介是“The CefSharp Chromium-based browser component”,机翻的意思就是“基于Cefsharp Chromium的浏览器组件” ...
- Git 合并流程
首先把自己的代码提交到自己的分支 再把master[主分支]的代码拉下来更新 解决冲突 推送至自己的分支 请求合并到master[主分支]
- 利用 ST-LINK Utility软件下载程序
先在电脑上安装STM32 ST-LINK Utility,软件安装一路Next就可以了,安装好软件之后界面如下: 下载程序只需要使用3个图标就可以了 第一个图标Connect to the ta ...
- 2、Koa2 路由+cookie
一.koa2 原生路由的实现 const Koa = require('koa'); const app = new Koa(); const fs = require('fs'); function ...
- 【codeforces 190C】STL
[题目链接]:http://codeforces.com/problemset/problem/190/C [题意] 让你根据去掉标点符号的; pair 以及 int这两种类型; 确定出一种类型; 使 ...