官网地址: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学习笔记之实现一个简单的查询页的更多相关文章

  1. Linux系统学习笔记之 1 一个简单的shell程序

    不看笔记,长时间不用自己都忘了,还是得经常看看笔记啊. 一个简单的shell程序 shell结构 1.#!指定执行脚本的shell 2.#注释行 3.命令和控制结构 创建shell程序的步骤 第一步: ...

  2. 【opencv学习笔记五】一个简单程序:图像读取与显示

    今天我们来学习一个最简单的程序,即从文件读取图像并且创建窗口显示该图像. 目录 [imread]图像读取 [namedWindow]创建window窗口 [imshow]图像显示 [imwrite]图 ...

  3. Django 学习笔记之六 建立一个简单的博客应用程序

    最近在学习django时建立了一个简单的博客应用程序,现在把简单的步骤说一下.本人的用的版本是python 2.7.3和django 1.10.3,Windows10系统 1.首先通过命令建立项目和a ...

  4. [原创]java WEB学习笔记12:一个简单的serlet连接数据库实验

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  5. UNP学习笔记2——从一个简单的ECHO程序分析TCP客户/服务器之间的通信

    1 概述 编写一个简单的ECHO(回复)程序来分析TCP客户和服务器之间的通信流程,要求如下: 客户从标准输入读入一行文本,并发送给服务器 服务器从网络输入读取这个文本,并回复给客户 客户从网络输入读 ...

  6. Ruby学习笔记2 : 一个简单的Ruby网站,搭建ruby环境

    Ruby on Rails website 的基础是 请求-返回 循环. 首先是浏览器请求服务器, 第二步,Second, in our Rails application, the route ta ...

  7. 【Python学习笔记三】一个简单的python爬虫

    这里写爬虫用的requests插件 1.一般那3.x版本的python安装后都带有相应的安装文件,目录在python安装目录的Scripts中,如下:   2.将scripts的目录配置到环境变量pa ...

  8. DuiLib学习笔记2——写一个简单的程序

    我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...

  9. DuiLib学习笔记2.写一个简单的程序

    我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...

随机推荐

  1. 动态链接库-Win32 DLL的说明

    在实际编程时,我们可以把完成某种功能的函数放在一个动态链接库中,然后给其他程序调用. WinAPI中所有的函数都包含在3个最重要的DLL中. Kernel32.dll 它包含那些用于管理内存.进程和线 ...

  2. 转:Flutter动画一

    1. 动画介绍 动画对于App来说,非常的重要.很多App,正是因为有了动画,所以才会觉得炫酷.移动端的动画库有非常的多,例如iOS上的Pop.web端的animate.css.Android端的An ...

  3. Error updating database. Cause: java.sql.SQLException: Access denied for user '${username}'@'localhost' (using password: YES)

    导入别人的项目,出现一个错误,经过排查,是db.properties配置文件中的用户名与Mybatis-conf.xml配置文件中调用的用户名不一致所导致的 (db.properties中用的是nam ...

  4. Python——逻辑运算(or,and)

    print(0 and 2 > 1) #结果0 print(0 and 2 < 1) #结果0 print(1 and 2 > 1) #结果True print(1 and 2 &l ...

  5. 电脑装windows和ubuntu,如何卸载ubuntu系统

    电脑装windows和ubuntu,如何卸载ubuntu系统 2018年01月17日 16:28:29 职业炮灰 阅读数:684    版权声明:本文为博主原创文章,未经博主允许不得转载. https ...

  6. Django+Vue打造购物网站(四)

    首页商品类别数据显示 商品分类接口 大概需要两个,一个显示三个类别 一个显示类别及类别下的全部商品 现在开始写商品的接口 首先编写三个分类的serializer class CategorySeria ...

  7. python学习日记(OOP——反射)

    反射 反射就是通过字符串的形式,导入模块:通过字符串的形式,去模块寻找指定函数,并执行.利用字符串的形式去对象(模块)中操作(查找/获取/删除/添加)成员,一种基于字符串的事件驱动! hasattr ...

  8. 题解-洛谷P1184 高手之在一起

    https://www.luogu.org/problemnew/show/P1184 (题目出处) 见到地名,自然就想到字符串了.可以从第一天开始,将她的位置与高手方便取得地方一一比较,(char字 ...

  9. ubuntu不能联网的问题

    控制面板\网络和 Internet\网络和共享中心-->更改>配器设置-->以太网-->右键属性-->共享-->允许其他网络用户通过此计算机的internet连接来 ...

  10. halcon预处理函数

    颜色空间变换 trans_from_rgb(ImageRed, ImageGreen, ImageBlue :ImageResult1, ImageResult2, ImageResult3 : Co ...