avalonjs学习笔记之实现一个简单的查询页
官网地址：http://avalonjs.coding.me/
因为是为了学习js，所以对样式没什么要求，先放效果图：
步骤为：初始页面-------条件查询-------编辑员工1-------保存编辑（主要保存这里需要优化，因为新编辑的数据只能放到列表最后位置）
HTML页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>查询页</title>
<meta charset="utf-8" />
<script src="../scripts/avalon.js"></script>
<script src="../scripts/MyQuerypage.js"></script>
</head>
<body ms-controller="querypage">
<div>
<span>开始时间：</span><input style="width:100px" ms-duplex="startTime" />
<span>结束时间：</span><input style="width:100px" ms-duplex="endTime" />
<button ms-click="click">查询</button>
</div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>工作年限</th>
<th>开始时间</th>
<th>结束时间</th>
<th>操作</th>
</tr>
<tr ms-for="($index, el) in @selectedEmployees">
<td>
{{el.name}}
</td>
<td>
{{el.sex}}
</td>
<td>
{{el.age}}
</td>
<td>
{{el.years}}
</td>
<td>
{{el.startTime}}
</td>
<td>
{{el.endTime}}
</td>
<td>
<input type="button" value="编辑" ms-click="editClick($index)" />
</td>
</tr>
</table>
</body>
</html>
MyQuerypage.js代码：
var editIndex = -1;var employees = [
{
name: '员工1',
sex: 'F',
age: 22,
years: 1,
startTime: '2017-3-1',
endTime: '2017-7-1'
}, {
name: '员工2',
sex: 'F',
age: 22,
years: 2,
startTime: '2017-3-1',
endTime: '2017-7-1'
}, {
name: '员工3',
sex: 'F',
age: 22,
years: 1,
startTime: '2017-1-1',
endTime: '2017-8-1'
}, {
name: '员工4',
sex: 'F',
age: 25,
years: 2,
startTime: '2015-3-1',
endTime: '2017-7-1'
}, {
name: '员工5',
sex: 'F',
age: 28,
years: 5,
startTime: '2013-1-1',
endTime: '2017-7-1'
}]; var vm = avalon.define({
$id: "querypage",
startTime: '',
endTime: '',
employees: employees,
selectedEmployees: employees,
vmodel: {},
click: function () {
var ret = [];
for (var i = 0; i < vm.employees.length; i++) {
if ((vm.employees[i].startTime >= this.startTime && vm.employees[i].endTime <= this.endTime)) {
ret[ret.length] = vm.employees[i];
}
}
this.selectedEmployees = ret;
},
editClick: function (i) {
editIndex = i;
var model = this.selectedEmployees[i];
resultData.name = model.name;
resultData.sex = model.sex;
resultData.age = model.age;
resultData.years = model.years;
resultData.startTime = model.startTime;
resultData.endTime = model.endTime; document.getElementById('editWindow').style.display = 'block';
}
}); var resultData = avalon.define({
$id: 'EditForm',
name: '',
sex: '',
age: '',
years: '',
startTime: '',
endTime: '',
saveClick: function () {
var arryObj = {
name: resultData.name,
sex: resultData.sex,
age: resultData.age,
years: resultData.years,
startTime: resultData.startTime,
endTime: resultData.endTime
} //需要优化
vm.employees.remove(vm.employees[editIndex]);
vm.employees.push(arryObj);
closeEditWindow();
},
cancelClick: function () {
closeEditWindow();
}
}); function closeEditWindow() {
document.getElementById('editWindow').style.display = 'none';
orginalModel = [];
}
avalon.js可自行下载 初次学习练习篇，非常简陋，忘见谅！
需要优化的地方，修改：
saveClick: function () {
//var arryObj = {
// name: resultData.name,
// sex: resultData.sex,
// age: resultData.age,
// years: resultData.years,
// startTime: resultData.startTime,
// endTime: resultData.endTime
//}
//需要优化
//vm.employees.remove(vm.employees[editIndex]);
//vm.employees.push(arryObj);
vm.employees[editIndex].name = resultData.name;
vm.employees[editIndex].sex = resultData.sex;
vm.employees[editIndex].age = resultData.age;
vm.employees[editIndex].years = resultData.years;
vm.employees[editIndex].startTime = resultData.startTime;
vm.employees[editIndex].endTime = resultData.endTime;
closeEditWindow();
}
avalonjs学习笔记之实现一个简单的查询页的更多相关文章
- Linux系统学习笔记之 1 一个简单的shell程序
不看笔记,长时间不用自己都忘了,还是得经常看看笔记啊. 一个简单的shell程序 shell结构 1.#!指定执行脚本的shell 2.#注释行 3.命令和控制结构 创建shell程序的步骤 第一步: ...
- 【opencv学习笔记五】一个简单程序：图像读取与显示
今天我们来学习一个最简单的程序,即从文件读取图像并且创建窗口显示该图像. 目录 [imread]图像读取 [namedWindow]创建window窗口 [imshow]图像显示 [imwrite]图 ...
- Django 学习笔记之六 建立一个简单的博客应用程序
最近在学习django时建立了一个简单的博客应用程序,现在把简单的步骤说一下.本人的用的版本是python 2.7.3和django 1.10.3,Windows10系统 1.首先通过命令建立项目和a ...
- [原创]java WEB学习笔记12：一个简单的serlet连接数据库实验
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- UNP学习笔记2——从一个简单的ECHO程序分析TCP客户/服务器之间的通信
1 概述 编写一个简单的ECHO(回复)程序来分析TCP客户和服务器之间的通信流程,要求如下: 客户从标准输入读入一行文本,并发送给服务器 服务器从网络输入读取这个文本,并回复给客户 客户从网络输入读 ...
- Ruby学习笔记2 ： 一个简单的Ruby网站，搭建ruby环境
Ruby on Rails website 的基础是 请求-返回 循环. 首先是浏览器请求服务器, 第二步,Second, in our Rails application, the route ta ...
- 【Python学习笔记三】一个简单的python爬虫
这里写爬虫用的requests插件 1.一般那3.x版本的python安装后都带有相应的安装文件,目录在python安装目录的Scripts中,如下: 2.将scripts的目录配置到环境变量pa ...
- DuiLib学习笔记2——写一个简单的程序
我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...
- DuiLib学习笔记2.写一个简单的程序
我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...
随机推荐
- iView组件添加API中介绍的事件的方式(render方式添加事件)
iView组件好用,文档齐全,品质可靠稳定.最大的好处是使用了Vue框架,使很多数据绑定和交互问题变的轻松,是难得的开源前端组件.给作者点个赞.用这个组件来学习Vue.js也是不错的选择. 最近用的比 ...
- Spring MVC 使用介绍（六）—— 注解式控制器（二）：请求映射与参数绑定
一.概述 注解式控制器支持: 请求的映射和限定 参数的自动绑定 参数的注解绑定 二.请求的映射和限定 http请求信息包含六部分信息: ①请求方法: ②URL: ③协议及版本: ④请求头信息(包括Co ...
- Scrapy 框架 配置文件
配置文件 基本配置 #1.项目名称,默认的USER_AGENT由它来构成,也作为日志记录的日志名 BOT_NAME = 'Amazon' #2.爬虫应用路径 SPIDER_MODULES = ['Am ...
- U66785 行列式求值
二更:把更多的行列式有关内容加了进来(%%%%%Jelly Goat奆佬) 题目描述 给你一个N(n≤10n\leq 10n≤10)阶行列式,请计算出它的值 输入输出格式 输入格式: 第一行有一个整数 ...
- 解决远程连接MongoDB出现错误
前言:最近准备学习下MongoDB,安装什么的都已经弄完了,想远程连接来管理MongoDB,用的软件是robo 3t 第一次连的时候就出错误了 大概意思是连接失败,解决如下 第一步,首先检查你的服务器 ...
- linux log4j乱码问号的解决
原因: linux本地设置的文件编码格式不是UTF-8 解决办法: 运行locale命令看一下结果: 把LC_CTYPE修改为“zh_CN.UTF-8”: cd ~/ vi .bashrc 添加: L ...
- (最短路 Floyd) P2910 [USACO08OPEN]寻宝之路Clear And Present Danger 洛谷
题意翻译 题目描述 农夫约翰正驾驶一条小艇在牛勒比海上航行． 海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛． 一张藏宝图上说,如果他的路程上经过的小岛依次出现了 ...
- 使用WebClient进行文件上传
注释部分为异步上传,几行代码就能搞定 public static bool Upload(string url, string path) { using (WebClient client = ne ...
- swiper常见问题
swiper是一个比较不错的一个轮播插件,但是呢,有时候在使用的时候也会出现很多的问题,我将我遇到的一些问题解决办法写在下面. 第一个问题:swiper分页器不显示 一般swiper使用分页器都是这样 ...
- Exponent CMS 2.3.9 配置文件写入 Getshell分析
在 install/index.php 的第44行 expString::sanitize($_REQUEST); 跟进sanitize函数 public static function saniti ...