AngularJS教程二十二——綜合教程-表格增刪改查

AngularJS 表格增刪改查

一 使用方法：

<div class="table" ng-show="!grid.edit">
<div class="page-bar">
    <form class="form-inline" role="form" id="queryForm">
        <div class="form-group">
            <label class="sr-only">使用者名稱</label>
            <input type="text" class="form-control" ng-model="grid.query.userCode   placeholder="使用者名稱">
        </div>
        <div class="form-group">
            <label class="sr-only">使用者姓名</label>
            <input type="text" class="form-control" ng-model="grid.query.userName" placeholder="使用者姓名">
        </div>
        <button class="btn btn-primary" ng-click="grid.query()"><i class="fa fa-search"></i> Search</button>
        <button class="btn btn-default" ng-click="grid.reset()"><i class="fa fa-times"></i> Reset
        </button>
    </form>
</div>
<div class="portlet">
    <div class="portlet-title">
        <div class="caption">
            Advance Table
            <button class="btn btn-success" ng-click="grid.add()"><i class="fa fa-plus"></i> 新增 </button>
        </div>
    </div>
    <div class="portlet-body">
        <table ed-grid class="table table-striped table-bordered table-advance table-hover"
               ed-url="user/query.do" ed-model="user">
            <thead>
            <tr>
                <th ed-data="_index"></th>
                <th ed-data="userCode">使用者名稱</th>
                <th ed-data="userName">使用者姓名</th>
                <th ed-data="gender" ed-option="gender">性別</th>
                <th ed-data="telephone">手機號碼</th>
                <th ed-data="userState" ed-option="userstate">使用者狀態</th>
                <th ed-data="remark">使用者描述</th>
                <th ed-data="_edit">操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

之前在第八節已經詳細的介紹了一些表格的基本操作，這裡只是在增刪改查上對之前表格的一些補充，如果有一些不清楚的，可以先參考第八節。

• ng-show指令，主要功能是讓某一個指定區域進行顯示或者不顯示。其值為boolean型別，預設為false。這樣就避免了我們修改資料的時候要增加彈出頁面。當我們進入表格頁面時，$scope.grid.eidt=false,編輯資料的div就不會顯示。而當我們點選編輯按鈕時，只需要設定$scope.grid.eidt=true，編輯區域就出來了，相應的就會隱藏顯示資料的div。是一個非常實用的指令。
• grid.add() 如果我們在controller中不寫直接對應的add(),自定義指令中會預設執行xxx/add.do,這裡的xxx對應的就是使用ed-grid指令的 ed-model="user"的屬性值，這裡即為user，後面就直接以user為例。當然，我們也可以在controller中對add()進行重構，重構方法請參照第八節。
• 其他需要注意的已在第八節中敘述清楚，可以將第八節與本節對照學習，效果應該會更加好。

二 編輯資料：

<div class="portlet light bordered edit" ng-show="userGrid.edit">
    <div class="portlet-title">
        <div class="caption">
            <i class="icon-equalizer font-red-sunglo"></i>
            <span class="caption-subject font-red-sunglo bold uppercase">使用者編輯</span>
        </div>
        <div class="actions">
            <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;" ng-click="userGrid.cancel();">
                <i class="icon-action-undo"></i>
            </a>
        </div>
    </div>
    <div class="portlet-body form">
        <form action="#" class="form-horizontal w5c-form" w5c-form-validate novalidate name="validateForm">
            <div class="form-body">
                <div class="form-group">
                    <label class="col-md-3 control-label">使用者編號</label>

                    <div class="col-md-4">
                        <input type="text" class="form-control" name="userCode" ng-model="user.userCode" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">使用者姓名</label>

                    <div class="col-md-4">
                        <input type="text" class="form-control" name="userName" ng-model="user.userName"
                               required ed-validate="name" ng-maxlength="10">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">性別</label>

                    <div class="col-md-4">
                        <select class="form-control" name="gender" ng-model="user.gender"
                                ng-options="opt.value as opt.name for opt in options.gender" required></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">手機號碼</label>

                    <div class="col-md-4">
                        <input type="text" class="form-control" ng-model="user.telephone">
                    </div>
                </div>
                <div class="form-group" ng-show="!user.userId && settings.deptPosEnable">
                    <label class="col-md-3 control-label">所屬崗位</label>

                    <div class="col-md-4">
                        <input type="text" class="form-control" ng-model="deptPos.name" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">狀態</label>

                    <div class="col-md-4">
                        <select class="form-control" ng-model="user.userState"
                                ng-options="opt.value as opt.name for opt in options.userstate"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">使用者描述</label>

                    <div class="col-md-4">
                        <textarea class="form-control" rows="3" ng-model="user.remark"></textarea>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-3 col-md-4">
                        <button type="button" class="btn green" w5c-form-submit="userGrid.save()"><i
                                class="fa fa-save"></i> 儲存
                        </button>
                        <button type="button" class="btn default" ng-click="userGrid.cancel();validateForm.reset();"><i
                                class="fa fa-times"></i> 取消
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

• grid.update()呼叫修改時，ed-grid會同add()一樣，預設執行user/update.do,刪除方法也同增加和修改方法一樣，預設執行user/delete.do,但是都支援過載，過載的格式如下：

  $scope.grid = { update : function(){ ... }, delete : function(){ ... } }

• ng-options編輯框中的ng-options指令，是解析之前顯示框中的ng-options指令的值在code表中對應的值，只需要按照這個例子來書寫，就可以完成以前的code轉換。例項：ng-options="opt.value as opt.name for opt in options.xxx"最主要的是options.xxx，這裡的xxx對應於顯示框中的ng-options的屬性值。

• 其他地方就沒有什麼需要注意的了，記得要將ng-model對應好就可以了，其他的結合第八節應該可以很快熟悉和了解整個增刪改查。