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 我们就按这个教程开始入门 首先新 ...
随机推荐
- MySQL RPM二进制安装
+++++++++++++++++++++++++++++++++++++++++++标题:MySQL RPM二进制安装时间:2019年2月24日内容:MySQL RPM二进制安装重点:MySQL R ...
- PyQt5基础应用一
一.PyQt5基础 1.1 创建窗口 import sys from PyQt5.QtWidgets import QApplication, QWidget if __name__ == '__ ...
- HTTP状态码表
HTTP状态码(英语:HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.所有状态码的第一个数字代表了响应的五种状态之一. 1xx消息 这一类型的状态码,代表请求已被 ...
- WSL、Git on Windows 、Putty等的创建的rsa秘钥与连接linux的使用。
1. 在windows 上面可以使用多种方式创建公钥和私钥 这里从一开始说: 1.1 windows subsystem linux 的方式最简单了 cmd 命令行 下 进入 WSL 输入命令 bas ...
- linux文件目录权限和系统基础优化命令(yum源配置)
一.用户 1.介绍 我们都知道linux中有root用户和普通用户,但是同样是普通用户,为什么有些用户的权限却不一样呢?其实这就类似于我们的QQ群,root用户就是QQ群主,他拥有最高的权利,想干什么 ...
- 虚拟机iso整理
供个人备用,随缘补充 ubuntu-16.04.6-desktop-amd64.iso 资源: https://pan.baidu.com/s/1ZR_5jgzNsGeOrkE6hAqxEA 提取码: ...
- Nginx禁止IP直接访问网站
禁止别人直接通过IP访问网站,在nginx的server配置文件前面加上如下的配置,如果有通过IP直接访问的,直接拒绝连接(需要去掉别的server下的default_server). server ...
- 初识 go 语言：数据类型
目录 数据类型 指针 结构体 数组 切片 切片的方法 映射 函数闭包 结束语 前言: go语言的第三篇文章,主要讲述go语言中的数据类型,包括指针,结构体,数组,切片,映射,函数闭包等,每个都提供了示 ...
- CentOS7安装jdk8及环境变量配置
下载jdk8 这里可以使用Windows下载,然后传到虚拟机 进入jdk下载页面 https://www.oracle.com/technetwork/java/javase/downloads/in ...
- POJ 3186 Treats for the Cows (动态规划）
Description FJ has purchased N (1 <= N <= 2000) yummy treats for the cows who get money for gi ...