JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<div ng-app>
        <div ng-controller="GridViewCtrl">
            <!--設定搜尋參考物件-->
            姓名搜尋：
            <input type="text" value="" ng-model="search.name" />
            <!--直覺式物件操作-->
            <input type="button" value="清除" ng-click="search.name=''">
                <br/>
            學號搜尋：
                <input type="text" value="" ng-model="search.sid" />
                <input type="button" value="清除" ng-click="search.sid=''">
                    <br/>   
                    <br/>
            <span>新增學生資料</span>
            <form ng-submit="insert(newone)">
                <table rules="all">
                   <tr>
                        <th>姓名</th>
                        <th>學號</th>
                        <th>性別</th>
                        <th></th>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" value="" ng-model="newone.name"/>
                        </td>
                        <td>
                            <input type="text" value="" ng-model="newone.sid"/>
                        </td>
                        <td>
                            <input type="text" value="" ng-model="newone.sex"/>
                        </td> 
                        <td>
                            <input type="submit" value="新增"/>
                        </td>
                    </tr>
                </table>
            </form>
            <br/>
            <table rules="all">
               <tr>
                    <th>姓名</th>
                    <th>學號</th>
                    <th>性別</th>
                    <th></th>
                </tr>
                <!--類似ASP.Net Repeatter用法-->
                <tr ng-repeat="row in ViewData.data | filter:search" >
                    <td ng-hide="row.editing">{{row.name}}</td>
                    <td ng-hide="row.editing">{{row.sid}}</td>
                    <td ng-hide="row.editing">{{row.sex}}</td>
                    <td...

CSS

table,#showdata{border:1px #ccc solid;width:400px;}
td, th {padding:5px;text-align:center;}
td input[type=text] {width:70px;}

JavaScript

/*AngularJS 試做GridView CRUD 20131002*/

function GridViewCtrl($scope) {

    /*模擬資料庫資料來源*/
    $scope.ViewData = {
        data: [
            { name: '王同學', sid: 'A9790211', sex:'男' },
            { name: '林同學', sid: 'A9790212', sex:'女' },
            { name: '陳同學', sid: 'A9790213', sex:'女' },
            { name: '黃同學', sid: 'A9790214', sex:'男' },                   
        ]
    };
    
    /*進入編輯模式*/          
    $scope.edit = function(row){
        row.editing = true;
        $scope.temprow = angular.copy(row);    
    }
    
    /*編輯模式確認按鈕*/             
    $scope.save = function(row){
        /*可在此處呼叫AJAX，寫回後端WebService*/
        /*AJAX do_update(row)*/
        delete row.editing;
    }
    
    /*編輯模式取消按鈕*/            
    $scope.cancel = function(row){
        /*angular.copy(來源,目標)*/
        angular.copy($scope.temprow,row);
        delete row.editing;
    }
    
    /*刪除按鈕*/  
    $scope.delete = function(row){
        /*可在此處呼叫AJAX，寫回後端WebService*/
        /*AJAX do_delete(row)*/
        $scope.ViewData.data.splice($scope.ViewData.data.indexOf(row),1);
   }

    /*新增按鈕*/
    $scope.insert = function(newone){            
        if(newone.name.length > 0 && newone.sid.length > 0 && newone.sex.length > 0){
           /*可在此處呼叫AJAX，寫回後端WebService*/
           /*AJAX do_insert(newone)*/ this.ViewData.data.push({name:newone.name,sid:newone.sid,sex:newone.sex});  
            newone.name = '';    
            newone.sid = '';
            newone.sex = '';
        }else{
            alert('新增失敗，資料輸入不完全');
        }    
    }
};