HTML:  （代码仅用于解释得更清楚，并未完全展示）

ui-grid-resize-columns:使列可以改变宽度，像这样:

 

依赖注入

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.edit', 'ui.grid.pagination']);

app.controller('MainCtrl', ['$scope', function ($scope， i18nService) {i18nService.setCurrentLang("zh-cn");        $scope.gridOptions = {            enableSorting: true,

          //编辑完成后执行事件

          onRegisterApi: function (gridApi) {

              $scope.gridApi = gridApi;

              $scope.gridApi.edit.on.afterCellEdit($scope, function (rowEntity) {

              //编辑离开事件

              $http.post('/manage/api/dictionary/update', {

              "accountName": rowEntity.accountName,

              "userName": rowEntity.userName,

              "unitName": rowEntity.unitName,

               })

                  .success(function (data) {

                     if (data.meta.success) {

                         alert('修改成功');

                     } else {

                     alert(data.meta.message);

                     }

               })

                   .error(function () {

                     toastr.warning("服务器出错，无法获取数据");

                   });

               });

              },

columnDefs: [                {field: 'accountName', displayName:'手机号', width: 200},                {field: 'userName', displayName:'用户名', width: 100},                {field: 'unitName', displayName:'单位', width: 300},                {                    field: 'createTime', displayName: '注册时间', width: 200,                    cellTemplate: '
     
      
     
'                },                {                    field: 'roleList', displayName: '类型', width: 200,                    cellTemplate: '
     
      {
    {item.roleName}}
     
'                },                {                    field: 'accountId', displayName: '详细信息', width: 200,                    cellTemplate: '
     
                                      
      查看详情
     
'                }            ]        };        $scope.gridOptions.data = [           {
                  'accountName':'15555555555',              'userName':'浮生若梦',              'unitName':'无',              'createTime':1506661676435,              'roleList':[{roleName:'前端','roleId':2},{roleName:'后端','roleId':3}],              'accountId':201           },

{
                 'accountName':'15555555555',              'userName':'浮生若梦',              'unitName':'无',              'createTime':1506661676435,              'roleList':[{roleName:'前端','roleId':2},{roleName:'后端','roleId':3}],              'accountId':201           }

]}]);

效果如下：

ui-grid使用中文:i18nService.setCurrentLang("zh-cn"); 设置ui-grid格式:通过html中的ui-grid='gridOptions' (gridOptions可以自己定义) 再通过$scope.gridOptions来绑定 在上面的代码中： enableSorting:定义是否排序 对于列的定义columnDefs中： field就是表格数据$scope.gridOptions.data中的字段， displayName就是显示在表格中的显示的列项名，如果没有定义，那么显示的就是field的名称 单元格编辑和提交到后台：   模块依赖中加入ui.grid.edit ----> var app = angular.module('app', ['ui.grid.edit']);  添加指令ui-grid-edit到表格的
    
     标签中   列定义columnDefs中添加 enableCellEdit: true  ----> columnDefs: [{field: 'dictionaryId', enableCellEdit: true, width: 150}] 单元格可编辑了，那编辑后的数据怎么提交到后台?   在$scope.gridOptions = {}对象中添加该属性
    

onRegisterApi: function (gridApi) {
                 $scope.gridApi = gridApi;               $scope.gridApi.edit.on.afterCellEdit($scope, function (rowEntity) {//编辑完成后执行});               }   具体参考代码。

ui-grid怎么单独定义一个单元格的样式?比如做成一个按钮，点击查看详情 可以使用cellTemplate属性，但是需要注意的是，单元格定义的html中如果要绑定函数，并不能像angular常规的来绑定，需要在绑定的函数前加上“grid.appScope”，比如“grid.appScope.func()” ui-grid如果要将某行的某个数据传入函数中需要使用这样的形式：“row.entity.createTime”，creatTime就是你要传入的参数的名称（对应于“field”） 表格的数据可以通过请求后端接口来获取，赋值给$scope.gridOptions.data，需要注意数据格式是否符合要求，否则就要先处理好。 有时候宽度全部用百分比时(这样做的好处是可以根据表格宽度自适应调整列宽），发现列挤到一起了。我在项目中碰到的是一个页面用到多张表格，通过ng-show来显示相应表格，当用百分比布局时，发现列全挤到一起了，我当时的解决办法是使用ng-if