AngularJS教程九—— 動態表格

自定義動態表格指令edGridDynamic

專案中經常會遇到表頭動態的表格，這種情況下，增加了該指令，實現表格表頭及表格內容的動態變化。

一 使用方法：

<div ed-grid-dynamic="test" ed-url="user/query.do" ed-model="user"></div>

ed-grid-dynamic、ed-url以及ed-model的值的意義與ed-grid完全相同，實際上ed-grid-dynamic只是對ed-grid的進一步封裝，繼承ed-grid的所有方法及屬性。

在使用動態表格時ed-grid-dynamic的值（同默ed-grid認為grid）中增加了一個方法setDynamicTable(url, params)，用來動態更新表頭，改方法第一個引數可以傳遞url，也可以傳遞最終需要的表頭json。

注：單表頭url返回的json中的data型別為：

[
    {
        col: "userCode", 
        name: "測試欄位一"，
        width: "100"
    }, 
    {
        col: "userName", 
        name: "測試欄位一", 
        edit: "input"
    }, 
    {
        col: "gender", 
        name: "測試欄位一", 
        option: "gender", // 下拉選項
        edit: "select" // 下拉選單
    }
]

多表頭時json格式為：

[
    [
        {
            "col": "userCode", 
            "name": "使用者編碼", 
            "rowspan": "2", 
            "width": "200"
        }, 
        {
            "col": "", 
            "name": "colspan", 
            "colspan": "2"
        }
    ], 
    [
        {
            "col": "userName", 
            "name": "使用者名稱稱", 
            "edit": "input"
        }, 
        {
            "col": "gender", 
            "name": "性別", 
            "option": "gender", 
            "edit": "select"
        }
    ]
]

如果需要在頁面開啟後就顯示動態表格，需要在當前頁面的controller的頁面載入完畢事件中呼叫該方法；手動呼叫該方法沒有限制

$scope.$on('$viewContentLoaded', function() {
    $scope.grid.setDynamicTable('dynamic/datatable.do', null);
});