AngularJS教程八—— 表格DataTables

自定義表格指令edGrid

edGrid是對jQuery DataTables的封裝，增加預設的修改、刪除操作。

一 使用方法：

<table ed-grid class="table table-striped table-bordered table-advance table-hover"
       data-options="url: 'user/query.do', model: 'user', form: 'queryForm', lazy: false">
    <thead>
    <tr>
        <th ed-data="_index"></th>
        <th ed-data="userCode">使用者名稱</th>
        <th ed-data="userName">使用者姓名</th>
        <th ed-data="gender | code : 'gender'">性別</th>
        <th ed-data="telephone">手機號碼</th>
        <th ed-data="userState | code : 'userstate'">使用者狀態</th>
        <th ed-data="remark">使用者描述</th>
        <th ed-data="_edit">操作</th>
    </tr>
    </thead>
</table>

通過ed-grid來定義表格

1、表格使用自定義屬性ed-grid表格名稱，預設為grid，用於繫結表格預設事件。如果一個頁面有多個表格，則需要指定ed-grid的屬性值。

表格通過data-options來設定表格屬性，其中自定義屬性有：

• url用來知道初始化表格資料的URL，如url="user/query.do"
• model指定編輯或刪除等其他點選事件時所繫結的model ，如model="user"
• form指定查詢條件所屬表單的名稱
• lazy是否延遲載入

2、表格的列通過<th>的自定義屬性來配置

ed-data用來指定json欄位key，存在幾個預設值：

• _index則該列顯示為行序號
• _radio則該列顯示為單選框（此時表格即支援單選），值繫結到所繫結的model上
• _checkbox則該列顯示為核取方塊（此時表格即支援多選）繫結到所繫結的model + s上

• _edit則顯示編輯和刪除按鈕

  ed-data可使用過濾器filter來進行格式化輸出。如用code帶一個引數來做字典轉換，將字典的code值轉為name

二 預設操作

所有的預設方法都繫結在表格名稱上，預設為$scope.grid，以下都按照預設的來舉例；model的值按照user來舉例

• query(params)：查詢，該方法也接收一個引數，ajax請求時會附帶引數，同時該方法還會將與表格名稱相同的form中的input加入到查詢引數。
• reset()：初始化查詢條件
• add()：新增，預設設定$scope.grid.eidt=true
• update(row)：修改，預設設定$scope.grid.eidt=true，同時繫結 ed-model的值為當前行的資料，如：$scope.user=row
• delete(row)：刪除，提交user/delete.do來刪除，user為ed-model的值
• save()：儲存，提交user/add.do來新增或者user/update.do來修改
• 通過設定<th>的ed-data="_checkbox"使表格支援多選時，選中的行會繫結到ed-model的值+s上，本例中則繫結到users

增刪改查都支援過載，可以根據自己的業務需要在controller中重新實現，比如：

$scope.grid = {
    add : function(){
        ...
    }
}

三 自定義列

第一種方式

th指定ed-data時同時指定過濾器filter，如：

<th ed-data="money | number : 8">金額</th><!-- 金額保留兩位小數-->

支援多過濾器及自定義過濾器，過濾器的使用請參考後面過濾器章節教程。

第二種方式

$scope.grid = {
    column_defs: [
        {
            target: 5,
            template: '<a href="">Not Amanda Smith?</a>'
        },
        {
            target: 6,
            template: function(row) {
                return '<a href="">Not Amanda Smith?</a>';
            }
        },
        {
            target: 7,
            buttons: [
                {
                    name: '角色',
                    class: 'btn-success',
                    icon: 'fa-edit',
                    enable: function(row) {
                        return true;
                    },
                    visiable: function(row) {
                        return true;
                    }
                    event: function(row, btn) {// btn為當前點選的按鈕

                    }
                }
            ]
        }
    ]
}

通過column_defs來自定義列

• target用來知道列序號，從0開始
• template用來指定列html模板，可以為html字串；也可以為一個方法返回html字串，方法有一個引數row物件來返回列資料。html模板中的事件通過ed-click來制定，指定回去從$scope.grid中找到這個方法去呼叫。
• buttons指定列按鈕，如果指定了template，buttons將會被忽略

buttons有4個屬性

• name: 按鈕名稱
• class: css樣式
• icon: 按鈕圖示樣式
• enable：是否允許點選，預設可點選，不可點選時增加disabledclass
• visiable：是否顯示，預設顯示
• event: function(row, btn) {}點選事件 注意，如果buttons對應列的ed-data="_edit"，則會加入到預設的修改、刪除按鈕之前

四 整合jQuery Datatables屬性

除以上自定義擴充套件外，可使用jQuery Datatables的屬性，這些options也可以通過table的data-options屬性來指定，比如：data-options="paging: false, lazy: true"，使用data-options不能設定下面的onSelect 類似的function

$scope.deptPosGrid = {
    options: {
        scroller: true,
        paging: false,// 是否翻頁
        lazy: true,// 是否延遲載入，這個屬性是自定義屬性，jQuery Datatables本身沒有
        select :{// 選擇事件
            style : 'single',
            onSelect : function(rows) {
                $scope.pos = rows[0];
            }
        }
    }
};

五 表格編輯

表格目前支援點選單元格變成輸入框進行編輯。開啟的方式為：表頭的列通過<th>增加class="edited input|select"目前僅支援這兩種，未來繼續擴充套件。
注：如果通過column_defs格式化單元格顯示，尚不支援編輯完之後再次格式化

編輯模式下，表格多了一個方法：

• getChangedRows()：獲取修改後的行