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 我们就按这个教程开始入门 首先新 ...
随机推荐
- jQuery文件分片上传
前端代码: <input type="file" id="file6" multiple> <button type="button ...
- 原生Ajax XMLHttpRequest对象
一.Ajax请求 - 现在常见的前后端分离项目中,一般都是服务器返回静态页面后浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求获取数据,然后调用回调函数,将数据添加 ...
- Redhat6.4安装Oracle 11gr2 64位 注意事项
安装步骤略, 安装步骤参考:https://www.cnblogs.com/jhlong/p/5442459.html 注意的是,会出现找不到一些依赖库,我根据光盘已有的库安装了所有64位的依赖库,强 ...
- css高級技巧
1.鼠標顯示 a:小手cursor:pointer b:默認cursor:default c:勾選文本cursor:text d:拖動cursor:move 2.css三種佈局模型 a.流動模型(默認 ...
- Linux 学习 (十一) 软件安装管理
Linux软件安装管理 学习笔记 软件包简介 软件包分类: 源码包 :脚本安装包 二进制包(RPM 包.系统默认包) 源码包的优点: 开源,如果有足够的能力,可以修改源代码 可以自由选择所需的功能 软 ...
- CSS代码检查工具stylelint
前面的话 CSS不能算是严格意义的编程语言,但是在前端体系中却不能小觑. CSS 是以描述为主的样式表,如果描述得混乱.没有规则,对于其他开发者一定是一个定时炸弹,特别是有强迫症的人群.CSS 看似简 ...
- Day 4 测试（QwQ 表示没考好 未完待续。。。 可能要过一段时间才会更
#include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...
- Django+Vue打造购物网站(六)
商品详情页功能 商品详情页和CategoryViewSet类似,只需要多继承一个类(mixins.RetrieveModelMixin)就可以了 class GoodsListViewSet(mixi ...
- 【LR9】【LOJ561】CommonAnts 的调和数 数论 筛法
题目大意 有一个长度为 \(n\) 的序列. 有 \(m\) 次修改,每次给你 \(x,y\),令 \(\forall 1\leq i\leq \lfloor\frac{n}{x}\rfloor,a_ ...
- Django admin组件使用
ADMIN 组件 介绍 admin 组件实现了更方便的WEB后台数据管理方式 settings.py 中第一个组件就是 : INSTALLED_APPS = [ 'django.contrib.adm ...