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>