avalon实现一个简单的带增删改查的成绩单

时间 2019-12-02

标签 avalon 实现一个简单增删成绩单繁體版

原文原文链接

自从angular问世，一直就有去了解学习angular，一直想用angular去作一个项目，但无奈，大ng是国外产物，ng1.2版本就只兼容到IE8，1.3后的几个版本提高到IE9，听说NG2.0更是向移动端靠拢的。javascript

一次次纠结中一天逛博客看到了司徒正美开发的avalon，当时又兴奋又犹豫，总以为是一个私人在维护的框架，在许多方面都让人提不起信心，虽然一直有在学习avalon,但也一直不敢投入正式的生产环境中，一次次的逛官网看教程运行实例，如今想一想还不如动手多作作示例。css

今天就用avalon来作一个简单的成绩单。代码以下：html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>avalon成绩单</title>
  <style>
      body{
        font-size:14px;
        font-family:"Microsoft YaHei";
      }
      .school-report{
        width:720px;
      }
      table{
        border-collapse:collapse;
      }
      .school-report tr.active{
        background:green;
      }
      .school-report td,.school-report th{
        text-align:center;
        border:1px solid #999;
        height:36px;
        line-height:36px;
      }
      .school-report a{
        color:red;
      }
      .data_con{
        position:relative;
        width:120px;
        height:36px;
      }
      .data_con input{
        position:absolute;
        top:0;
        left:0;
        width:110px;
        height:34px;
        border:none;
        padding:0 5px;
        background:#babadc;
        font-size:14px;
        color:#fff;
      }
  </style>
  <script src="http://cdn.bootcss.com/avalon.js/1.4.7/avalon.js"></script>
  <script>
      var vm = avalon.define({
            $id: "schoolReport", 
            idz:"",
            namez:"",
            gradez:"",
            array:[
                {id: "d1", name: "李世民", score: 67,nowz:false},
                {id: "d2", name: "赢政", score: 90,nowz:false}
            ],
            editindex:-1,
            searchz:"",
            total:{
                get:function(){
                    return this.array.length;
                }
            },
            scoreall:{
                get:function(){
                    var a=0;
                    this.array.forEach(function(el){
                        a+=parseInt(el.score);
                    })
                    return a;
                }
            },
            //增长数据
            addfn:function(){
                var obj=null;
                if(vm.id!="" && vm.name!=""){
                   obj={id:vm.idz,name:vm.namez,score:vm.gradez==""?0:vm.gradez,nowz:false};
                    vm.array.push(obj);
                    console.log(vm.idz,vm.namez,vm.gradez);
                    vm.idz="";
                    vm.namez="";
                    vm.gradez=""; 
                } 
            },
            //启动编辑
            editfn:function(){
                var elem=avalon(this),
                    indexz=elem.data("index");
                vm.editindex=indexz;
                //console.log(elem.data("index"),this["data-index"]);
            },
            //编辑确认
            editok:function(){
                vm.editindex=-1;
            }
        })
        //搜索实现
        vm.$watch("searchz",function(newz,oldz){
            var arr=lookfn(newz,vm.array);
            console.log(arr);
            for(var j=0,len0=vm.array.length;j<len0;j++){
                vm.array[j].nowz=false;
            }
            for(var i=0,len=arr.length;i<len;i++){
                vm.array[parseInt(arr[i])].nowz=true;
            }
            console.log(vm.$model);
        })
        //根据值取得对应的索引号集合
        function lookfn(str,arr){
            var returnarr=[];
            for(var i=0,len=arr.length;i<len;i++){
                if(str!="" && arr[i].id.indexOf(str)!=-1){
                    returnarr.push(i);
                    continue;
                }
                if(str!="" && arr[i].name.indexOf(str)!=-1){
                    returnarr.push(i);
                    continue;
                }
                if(str!="" && String(arr[i].score).indexOf(str)!=-1){
                    returnarr.push(i);
                    continue;
                }
            }
            return returnarr;
        }
  </script>
</head>
    <body ms-controller="schoolReport">
        <h3>成绩单</h3>
        <div>
            增长人员：<input type="text" name="idnum" ms-duplex-string="idz"> <input type="text" name="namestr" ms-duplex-string="namez"> <input type="text" name="gradenum" ms-duplex-string="gradez"> <input type="button" value="add" ms-click="addfn">
        </div>
        <div>
            搜索：<input type="text" name="serchname" ms-duplex-string="searchz">
        </div>
        <table class="school-report">
            <thead>
                <tr>
                    <th width="120">学位ID</th>
                    <th width="120">姓名</th>
                    <th width="120">成绩</th>
                    <th width="120" colspan="2">操做</th>
                </tr>
            </thead>
            <tbody>
                 <tr ms-repeat="array" ms-data-nowz="el.nowz" ms-class="active:el.nowz">
                    <td>
                        <div class="data_con">
                            {{el.id}}
                            <input type="text" ms-if-loop="$index==editindex" ms-duplex="el.id">
                        </div>
                    </td>
                    <td>
                        <div class="data_con">
                            {{el.name}}
                            <input type="text" ms-duplex="el.name" ms-if-loop="$index==editindex">
                        </div>
                    </td>
                    <td>
                        <div class="data_con">
                            {{el.score}}
                            <input type="text" ms-duplex="el.score" ms-if-loop="$index==editindex">
                        </div>
                    </td>
                    <td>
                        <a href="javascript:void(0);" ms-click="editfn" ms-data-index="$index" ms-if-loop="$index!=editindex">edit</a>
                        <a href="javascript:void(0);" ms-click="editok" ms-if-loop="$index==editindex">ok</a>

                    </td>
                    <td>
                        <a href="javascript:void(0);" ms-click="$remove">del</a>
                    </td>
                </tr>   
            </tbody>
            <tfoot>
                <tr>
                    <td>总人数:{{total}}</td>
                    <td>总分:{{scoreall}}</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

在线运行前端

大体分析：java

从整个案例来看，若是用JQ实现，我想信代码行数应该是如今的倍数级的增长，其中会是一堆堆DOM操做，而用avalon在整个项目中看不到任何DOM操做，摆脱了DOM操做的苦海，在速度与性能上都提高了，并且avalon与jQuery一同使用兼容也是妥妥的。git

1：引入avalon.js,如今avalon的版本已经更新到1.5.5啦，可是屡次尝试，不太稳定，项目中最好引用1.4+版本。github

2：定义viewMode,avalon是经过avalon.define({})传入对象来构建一个数据模型，以上示例的viewModel以下：框架

3：view层实现，上救命view以下：oop

这里只是大概说一下实现过程，具体教程可查看avalon官网文挡，官网地址：http://avalonjs.github.io/#home.html性能

视频教程地址：http://edu.51cto.com/course/course_id-2533-page-1.html

前端乱炖也有很详细的文挡教程：http://www.html-js.com/article/column/234