• Html

• 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:'
    
     ￥{
   {row.getProperty(col.field)}}
    
'            }, {                field: "buhsdj",                displayName: "单价（不含税）",                width: 150,                sortable: true,                cellTemplate:'
    
     ￥{
   {row.getProperty(col.field)}}
    
'            },  {                field: "shul",                displayName: "数量",                width: 200,                sortable: false            },{                field: "hansdjSum",                displayName: "小计（含税）",                width: 125,                sortable: true,                cellTemplate: '
    
     ￥{
   {row.getProperty(col.field)}}
    
'            },{                field: "buhsdjSum",                displayName: "小计（不含税）",                width: 125,                sortable: true,                cellTemplate: '
    
     ￥{
   {row.getProperty(col.field)}}
    
'            }],        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);