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,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","buhsdj":301.00,"shul": 2,{"ziydwz_id":"5435","wuzmc":"钢管3","buhsdj":302.00,{"ziydwz_id":"543","wuzmc":"钢管4","buhsdj":303.00,"shul": 4,{"ziydwz_id":"423","wuzmc":"钢管5","buhsdj":304.00,"shul": 7,{"ziydwz_id":"654","wuzmc":"钢管6","buhsdj":305.00,"shul": 5,"wuzmc":"钢管7","buhsdj":306.00,"shul": 8,"wuzmc":"钢管8","wuzmc":"钢管9","wuzmc":"钢管10","wuzmc":"钢管11",];
    $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: "单价（不含税）",{
                field: "shul",displayName: "数量",width: 200,sortable: false
            },{
                field: "hansdjSum",displayName: "小计（含税）",width: 125,cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">￥{{row.getProperty(col.field)}}</div>'
            },{
                field: "buhsdjSum",displayName: "小计（不含税）",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);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!