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 我们就按这个教程开始入门 首先新 ...
随机推荐
- OSGI打安装包步骤（底包制作）
相关资源下载 equinox-SDK-LunaSR2 : https://pan.baidu.com/s/1xOzZZ3_VAuQJ3Zfp4W8Yyw 提取码: gjip gemini-web- ...
- @Valid注解的使用（转）
原文地址:http://blog.csdn.net/xzmeasy/article/details/76098188 @Valid注解用于校验,所属包为:javax.validation.Valid. ...
- Flask 微信公众号开发
公众号接口 1. 公众号消息会话 目前公众号内主要有这样几类消息服务的类型,分别用于不同的场景. 群发消息 公众号可以以一定频次(订阅号为每天1次,服务号为每月4次),向用户群发消息,包括文字消息.图 ...
- adoop（四）HDFS集群详解
阅读目录(Content) 一.HDFS概述 1.1.HDFS概述 1.2.HDFS的概念和特性 1.3.HDFS的局限性 1.4.HDFS保证可靠性的措施 二.HDFS基本概念 2.1.HDFS主从 ...
- Shell命令-文件及内容处理之cut、rev
文件及内容处理 - cut.rev 1. cut:切割文件内容 cut命令的功能说明 cut 命令用于显示每行从开头算起num1 到 num2 的文字. cut命令的语法格式 cut [OPTION] ...
- Django+Vue打造购物网站(五)
注册和登陆 drf的认证 http://www.django-rest-framework.org/api-guide/authentication/ settings.py文件的配置 INSTALL ...
- UOJ#310.【UNR #2】黎明前的巧克力（FWT）
题意 给出 \(n\) 个数 \(\{a_1, \cdots, a_n\}\),从中选出两个互不相交的集合(不能都为空),使得第一个集合与第二个集合内的数的异或和相等,求总方案数 \(\bmod 99 ...
- 使用js获取页面参数
方法一 function GetUrlParam (name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + ' ...
- idea搭建springboot
1.创建新项目 2.继续项目配置 Name:项目名称Type:我们是Maven构建的,那么选择第一个Maven ProjectPackaging:打包类型,打包成Jar文件Java Version: ...
- 柳叶刀重磅出击！全外显子测序在胎儿结构异常的评估Whole-exome sequencing in the evaluation of fetal structural anomalies: a prospective cohort study
柳叶刀发表的文献解读:Whole-exome sequencing in the evaluation of fetal structural anomalies: a prospective coh ...