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(); }
