angularJs结合ui-grid做成的表格实例

因为项目的angular.js版本比较老，1.3.X版的，并且最开始的ui-grid版本也比较低，3.0.0版的，所以也不方便去找其他的表格插件，就用这个ui-grid
亲测有效。
① 先在主页面引入ui-grid的js和css
② 在app.js页面引入ui-grid模块，用什么引什么，不用的功能不需要引

var app = angular.module('appModel',[
    ... //其他依赖的模块
    'ui.grid',
    'ui.grid.selection',
    'ui.grid.pagination',
    'ui.grid.resizeColumns',
    'ui.grid.autoResize' //用什么引什么，不需要的可以不用引
]);   

③ html页面放表格

<!-- 这个表格是包含在页面的大的controller里的，这里不再写 -->
<div>
    <div ng-show="!model.apps || model.apps.length === 0">
        <span>{{'没有匹配到APP' | translate}}</span>
    </div>
    <div id="grid1" ui-grid="gridOptions" 
    	ng-show="ng-show=model.apps && model.apps.length > 0" 
        style="width: 100%; height: 500px; text-align: center;" 
        ui-grid-pagination
        ui-grid-selection 
        ui-grid-resize-columns 
        ui-grid-auto-resize>
    </div>
</div>
<!-- 
ui-gird-pagination : grid 分页指令；
ui-grid-selection : grid 选择行所需指令；
ui-grid-resize-columns: grid 列宽可以拉伸所需指令；
ui-grid-auto-resize : 解决grid布局 自动适应div 高度和宽度问题（非常有用）；
拓展：
ui-grid-edit: grid 编辑指令；
ui-grid-exporter : grid 导出功能所需指令；
 -->

④ 表格的js代码逻辑

app.controller('MyCtrl', function($scope,i18nService) {
    // 国际化；
    i18nService.setCurrentLang("zh-cn");
    
    $scope.gridOptions = {
        columnDefs: [
            { field: 'name', displayName: '名字',width: '10%'},
            { field: "age",displayName: '名字',width: '10%'},
            { field: "color",displayName: '颜色',width: '10%'},
            { field: "size",displayName: '规模',width: '10%'},
            { 
                field: "edit",
                displayName: '操作',
                cellTemplate:'<button id="detail" type="button" class="btn-small" ng-click="grid.showAppDetail(row.entity);">查看</button>&nbsp;&nbsp;&nbsp;&nbsp;'+
                '<button id="edit" type="button" class="btn-small" ng-click="grid.showEditApp(row.entity);">编辑</button>',
                width: '10%'
            }
                    ],
                    
        enableSorting: true, //是否排序
        useExternalSorting: false, //是否使用自定义排序规则
        //----------- 选中 （我这里不需要选中）----------------------
        enableFooterTotalSelected: false, // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true
        enableFullRowSelection : false, //是否点击行任意位置后选中,默认为false,当为true时，checkbox可以显示但是不可选中
        enableRowHeaderSelection : false, //是否显示选中checkbox框 ,默认为true
        enableRowSelection : false, // 行选择是否可用，默认为true;
        enableSelectAll : false, // 选择所有checkbox是否可用，默认为true; 
        enableSelectionBatchEvent : true, //默认true
        multiSelect: false ,// 是否可以选择多个,默认为true;
        noUnselect: false,//默认false,选中后是否可以取消选中
        selectionRowHeaderWidth:30 ,//默认30 ，设置选择列的宽度；

        enableGridMenu: true, //是否显示grid 菜单
        showGridFooter: true, //是否显示grid footer
        enableHorizontalScrollbar :  1, //grid水平滚动条是否显示, 0-不显示  1-显示
        enableVerticalScrollbar : 1, //grid垂直滚动条是否显示, 0-不显示  1-显示
        
        //-------- 分页属性 ----------------
        enablePagination: true, //是否分页，默认为true
        enablePaginationControls: true, //使用默认的底部分页
        paginationPageSizes: [10, 15, 20], //每页显示个数可选项
        paginationCurrentPage:1, //当前页码
        paginationPageSize: 10, //每页显示个数
        useExternalPagination: true,//是否使用分页按钮

        //---------------api---------------------
        onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
            //分页按钮事件
            gridApi.pagination.on.paginationChanged($scope,function(newPage, pageSize) {
                    if(getPage) { 
                        getPage(newPage, pageSize); 
                    }
            });
        }
    };
    
    var getPage = function(curPage, pageSize) {
            var firstRow = (curPage - 1) * pageSize;
            $scope.gridOptions.totalItems = $scope.model.apps.size;
            $scope.gridOptions.data = $scope.model.apps.data.slice(firstRow, firstRow + pageSize);
    };
    
    // 可以搞个假数据
    // $scope.model.apps.data = [{ name: "mod", age: 1, color: "yellow", size: "5" },
    //                 { name: "right", age: 2, color: "green", size: "20" },
    //                 { name: "game", age: 3, color: "gold", size: "12" },
    //                 { name: "pla", age: 1, color: "pink", size: "30" },
    //                 { name: "ano", age: 4, color: "grey", size: "22" },
    //                 { name: "mod", age: 2, color: "yellow", size: "5" },
    //                 { name: "right", age: 3, color: "green", size: "20" },
    //                 { name: "game", age: 1, color: "gold", size: "30" },
    //                 { name: "pla", age: 3, color: "pink", size: "12" },
    //                 { name: "ano", age: 2, color: "grey", size: "22" },
    //                 { name: "mod", age: 3, color: "yellow", size: "5" },
    //                 { name: "right", age: 3, color: "green", size: "20" },
    //                 { name: "game", age: 4, color: "gold", size: "30" }
    //             ]
    // getPage(1, $scope.gridOptions.paginationPageSize[0]);
    
    // 也可以通过请求拿到数据源
    $http('GET',url:'自己的地址',params:自己需要的参数).
        success(function(data,status,headers,config){
            $http({
                method:'GET',
                url:'自己的地址',
                params:自己的参数
            }).success(function(data,status,headers,config) {
                $scope.model.apps = data;
                getPage(1,$scope.gridOptions.paginationPageSizes[0]);//列表分页获取数据
            }).error(function(data,status,headers,config) {
                console.log('Something went wrong:' +data);
            })
        })
});

⑤ 效果图：
无
因为本人的代码在只有内网的电脑上，所以无法截图拷贝等一系列操作

PS:参考的大神的文章比较多，头发掉了太多，不再一一找当初的链接了…