angularjs ng-grid 表格使用

2019独角兽企业重金招聘Python工程师标准>>>

• 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);

转载于:https://my.oschina.net/u/2489726/blog/837886