angularjs ng-grid 表格使用

• Html

<div class="tab">
        <div class="grid-style" ng-grid="gridOptions" style="width: 1200.2px;"></div>
    </div>

• app.js

// 前臺分頁控件
    app.service("frontPaging", function () {
    return {
        newInstance : function ($scope) {
            $scope.totalServerItems = 0;
            $scope.pagingOptions = {
                pageSizes: [1,5,20, 50, 100],
                pageSize: 20,
                currentPage: 1
            };
            $scope.setRealData = function (realData) {
                $scope.realData= realData;
            };
            $scope.setPagingData = function(data, currentPage, pageSize) {
                var realData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
                $scope.pageData = realData;
                $scope.totalServerItems = data.length;
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            };
            $scope.getPagedDataAsync = function(currentPage, pageSize) {
                var data = $scope.realData;
                setTimeout(function() {
                    $scope.setPagingData(data, currentPage, pageSize);
                }, 100);
            };
            $scope.$watch('pagingOptions', function(newVal, oldVal) {
                if (newVal !== oldVal &&  newVal.pageSize !== oldVal.pageSize) {
                    $scope.getPagedDataAsync($scope.pagingOptions.currentPage = 1, $scope.pagingOptions.pageSize);
                }
                else if (newVal !== oldVal &&  newVal.currentPage !== oldVal.currentPage) {
                    $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize);
                }
            }, true);
            return $scope;
        }
    }
});

• js

/**
     * 初始化前臺分頁控件
     * 注意: $scope.setRealData(data.data.list); (後臺返回的list)
     * 注意: gridOptions { data: "pageData", (分頁數據)
     */
    frontPaging.newInstance($scope);
    // 數據源
    $scope.data = [
        {"ziydwz_id":"34324","wuzmc":"鋼管1","guig":"1mm","hansdj":299.00,"buhsdj":300.00, "shul": 1, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"43424","wuzmc":"鋼管2","guig":"1mm","hansdj":299.00,"buhsdj":301.00, "shul": 2, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"5435","wuzmc":"鋼管3","guig":"1mm","hansdj":299.00,"buhsdj":302.00, "shul": 1, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"543","wuzmc":"鋼管4","guig":"1mm","hansdj":299.00,"buhsdj":303.00, "shul": 4, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"423","wuzmc":"鋼管5","guig":"1mm","hansdj":299.00,"buhsdj":304.00, "shul": 7, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"654","wuzmc":"鋼管6","guig":"1mm","hansdj":299.00,"buhsdj":305.00, "shul": 5, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"423","wuzmc":"鋼管7","guig":"1mm","hansdj":299.00,"buhsdj":306.00, "shul": 8, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"654","wuzmc":"鋼管8","guig":"1mm","hansdj":299.00,"buhsdj":305.00, "shul": 5, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"654","wuzmc":"鋼管9","guig":"1mm","hansdj":299.00,"buhsdj":305.00, "shul": 5, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"654","wuzmc":"鋼管10","guig":"1mm","hansdj":299.00,"buhsdj":305.00, "shul": 5, "hansdjSum":0, "buhsdjSum":0},
        {"ziydwz_id":"654","wuzmc":"鋼管11","guig":"1mm","hansdj":299.00,"buhsdj":305.00, "shul": 5, "hansdjSum":0, "buhsdjSum":0},
    ];
    $scope.setRealData($scope.data);
    $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize);
    
       // 用於接受選中列
    $scope.mySelections = [];
    $scope.gridOptions = angular.extend({}, $rootScope.gridOptions, {
        data: "pageData",
        selectedItems:$scope.mySelections,
        useExternalPagination: true,//是否使用分頁按鈕
        enableRowHeaderSelection : true, //是否顯示選中checkbox框 ,默認爲true
        enableFooterTotalSelected: true, // 是否顯示選中的總數，默認爲true, 若是顯示，showGridFooter 必須爲true
        enableFullRowSelection : true, //是否點擊行任意位置後選中,默認爲false,當爲true時，checkbox能夠顯示可是不可選中
        enableRowSelection : true, // 行選擇是否可用，默認爲true;
        enableCellSelection: true,
        enableSelectAll : true, // 選擇全部checkbox是否可用，默認爲true;
        enableSelectionBatchEvent : true, //默認true
        selectWithCheckboxOnly: true,
        showSelectionCheckbox: true,
        CheckBoxHeaderColumn:true,
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        columnDefs: [
            {
                field: "wuzmc",
                displayName: "商品信息",
                width:280,
                sortable:false,
                pinnable: true,
                EnableCheckBoxSelect:true,
                enableCellEdit: false
            }, {
                field: "guig",
                displayName: "規格",
                width: 120,
                sortable: true
            }, {
                field: "hansdj",
                displayName: "單價（含稅）",
                width: 150,
                sortable: true,
                enableSorting: true,
                cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()">￥{{row.getProperty(col.field)}}</div>'
            }, {
                field: "buhsdj",
                displayName: "單價（不含稅）",
                width: 150,
                sortable: true,
                cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()">￥{{row.getProperty(col.field)}}</div>'
            },  {
                field: "shul",
                displayName: "數量",
                width: 200,
                sortable: false
            },{
                field: "hansdjSum",
                displayName: "小計（含稅）",
                width: 125,
                sortable: true,
                cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">￥{{row.getProperty(col.field)}}</div>'
            },{
                field: "buhsdjSum",
                displayName: "小計（不含稅）",
                width: 125,
                sortable: true,
                cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">￥{{row.getProperty(col.field)}}</div>'
            }],
        totalServerItems: 'totalServerItems',
        enablePaging: true,
        showFooter: true
    });

    // 監控
    $scope.$watch("mySelections", function() {
        //console.log($scope.mySelections);
        if($scope.mySelections.length == 0){
            $scope.gouwc.pic = 0;
        }
        $scope.choicePicSumRadio();
    }, true);