最近偶然发现了Laravel可用的图片处理包intervention-image。
文档地址:http://image.intervention.io
安装起来也很简单。

composer require intervention/image

然后到config/app.php的
$providers中添加

Intervention\Image\ImageServiceProvider::class

$aliases中添加

'Image' => Intervention\Image\Facades\Image::class

使用时引入Image的命名空间 use Intervention\Image\Facades\Image;
这样就可以使用Image来方便的处理图片了。

基本操作:

$img = Image::make('public/foo.jpg')->resize(300, 200);
$img->save('public/bar.png');

save()也可以不填写路径,不填默认为覆盖原图。

intervention通常会在PHP脚本完成后会自动销毁资源。
也可以使用destroy()方法主动销毁资源,在调用方法后,图像实例不再可用。

$img = Image::make('public/foo.jpg');
$img->resize(320, 240);
$img->save('public/small.jpg');
$img->destroy();

此处有一坑,save()覆盖原图时,destroy()不能正常销毁。save()为不同文件,可正常使用destroy()。

感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

之前的文章已经写过PM2启动laravel队列的命令。传送门
这里再写加一个启动laravel的swoole扩展的命令,
先cd到laravel项目中,然后执行以下命令:

pm2 start bin/laravels --name laravels --interpreter php -- restart

ps:不能加参数 – -daemon, 加了启动不了。

感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:Tutorial: 217 Column Moving
ui.grid.moveColumns允许将列移动到其他位置。 要启用,必须引入ui.grid.moveColumns模块,并在grid元素上包含ui-grid-move-columns指令。
api文档中提供了moveColumns特性的文档,特别是:
– columnDef
– gridOptions
– publicApi

默认情况下,启用后所有列均可移动,可以通过参数gridColumnMoving来禁用全部列的移动。也可在columnDefs中设置参数enableColumnMoving来针对某个列设置是否移动。

可以通过拖放将列放到特定位置来调整列。或者,使用gridApi方法gridApi.colMovable.moveColumn(oldPosition,newPosition)也可用于移动列。
列位置范围从0(最左边)到表格中的可见列数(最右边)。

为了通过以下示例获得更好的性能,您可以选择加载ui-grid.core.js和特定功能文件:

<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.move-columns.min.js"></script>

Example

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl as $ctrl">
    <div class="grid" ui-grid="$ctrl.gridOptions" ui-grid-move-columns></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 100%;
  height: 400;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.moveColumns']);
app.controller('MainCtrl', function ($scope, $http) {
  var vm = this;

  vm.gridOptions = {
    columnDefs: [
      { name: 'id'},
      { name: 'name'},
      { name: 'age'},
      { name: 'gender'},
      { name: 'email'},
    ]
  };

  $http.get('http://ui-grid.info/data/500_complex.json')
    .then(function(response) {
      vm.gridOptions.data = response.data;
    });
});

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

laravel-admin写起来确实很方便。
在$grid 可以使用 关联模型获取关联表的数据,可设置为可修改。
比如:


public function profile() { return $this->hasOne(Profile::class); } $grid->profile()->gender()->editable('select', [1 => '男', 2 => '女']);

在$from中也可以 使用这个关联的模型来 保存数据
比如:

$form->select('profile.gender', '性别')->options([1 => '男', 2 => '女']);

此时数据可以正常的创建和修改。

重点来了,此处需要注意一个坑。

在命名关联模型时不可使用驼峰写法,必须全部小写,否则,$grid显示正常,就是修改时$from保存不了数据。

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:Tutorial: 216 Expandable grid
ui.grid.expandable模块可以添加子表格。 要显示子表格,您需要增加以下表格选项:
api文档中提供了可扩展功能的文档,特别是:
– gridOptions
– publicApi

$scope.gridOptions = {
  //This is the template that will be used to render subgrid.
  expandableRowTemplate: 'expandableRowTemplate.html',
  //This will be the height of the subgrid
  expandableRowHeight: 140,
  //Variables of object expandableScope will be available in the scope of the expanded subgrid
  expandableRowScope: expandableScope
}

expandableRowTemplate将是子表格的模板,expandableRowHeight是子表格的高度。 expandableRowScope可用于将变量添加到子表格的scope。
然后可以从expandableRowTemplate访问这些变量。
grid api为子表格提供以下事件和方法:

//rowExpandedStateChanged is fired for each row as its expanded:
gridApi.expandable.on.rowExpandedStateChanged($scope,function(row){
});
//Following methods can be used to expand/ collapse all rows of the grid:
gridApi.expandable.expandAllRows();
gridApi.expandable.collapseAllRows();

SubGrid嵌套可以设置多个层级。
除了上面的配置,scrollFillerClass也可用,可用于设置滚动填充样式。 当快速滚动表格时,会出现滚动填充。
为了通过以下示例获得更好的性能,您可以选择加载ui-grid.core.js和特定功能文件:

<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.expandable.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.selection.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.pinning.min.js"></script>

Example

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <script src="http://ui-grid.info/app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl as main">
      <div class="control-group">
        <button id="toggleVisibility" type="button" class="btn btn-sm btn-default" ng-click="main.toggleExpandAllBtn()">Toggle Expand All Visibility</button>
        <button type="button" class="btn btn-sm btn-default" ng-click="main.expandAllRows()">Expand All</button>
        <button type="button" class="btn btn-sm btn-default" ng-click="main.collapseAllRows()">Collapse All</button>
      </div>
      <div id="grid1" ui-grid="main.gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
    </div>
    Expandable rows works with checkboxes from selection and left pins
    <div ng-controller="SecondCtrl as second">
       <div ui-grid="second.gridOptions" ui-grid-pinning ui-grid-expandable ui-grid-selection class="grid"></div>
    </div>
    Retrieve data for subGrid when expanding
    <div ng-controller="ThirdCtrl as third">
       <div ui-grid="third.gridOptions" ui-grid-expandable class="grid"></div>
    </div>
    Toggle expand subGrid control
    <div ng-controller="FourthCtrl as fourth">
       <div ui-grid="fourth.gridOptions" ui-grid-expandable class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 100%;
  height: 400px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);

app.controller('MainCtrl', function MainCtrl($http, $log) {
  var vm = this;

  vm.gridOptions = {
    expandableRowTemplate: 'expandableRowTemplate.html',
    expandableRowHeight: 150,
    //subGridVariable will be available in subGrid scope
    expandableRowScope: {
      subGridVariable: 'subGridScopeVariable'
    }
  };

  vm.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age'},
    { name: 'address.city'}
  ];

  $http.get('http://ui-grid.info/data/500_complex.json')
    .then(function(response) {
      var data = response.data;

      for(i = 0; i < data.length; i++){
        data[i].subGridOptions = {
          columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
          data: data[i].friends
        };
      }
      vm.gridOptions.data = data;
    });

    vm.gridOptions.onRegisterApi = function(gridApi){
      vm.gridApi = gridApi;
    };

    vm.expandAllRows = function() {
      vm.gridApi.expandable.expandAllRows();
    };

    vm.collapseAllRows = function() {
      vm.gridApi.expandable.collapseAllRows();
    };

    vm.toggleExpandAllBtn = function() {
      vm.gridOptions.showExpandAllButton = !vm.gridOptions.showExpandAllButton;
    };
});

app.controller('SecondCtrl', function SecondCtrl($http, $log) {
        var vm = this;

        vm.gridOptions = {
                enableRowSelection: true,
                expandableRowTemplate: 'expandableRowTemplate.html',
                expandableRowHeight: 150
        }

        vm.gridOptions.columnDefs = [
                { name: 'id', pinnedLeft:true },
                { name: 'name'},
                { name: 'age'},
                { name: 'address.city'}
        ];

        $http.get('http://ui-grid.info/data/500_complex.json')
                .then(function(response) {
                        var data = response.data;

                        for(i = 0; i < data.length; i++) {
                                data[i].subGridOptions = {
                                        columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
                                        data: data[i].friends
                                };
                        }
                        vm.gridOptions.data = data;
                });
});

app.controller('ThirdCtrl', function ThirdCtrl($scope, $http, $log) {
        var vm = this;

        vm.gridOptions = {
                expandableRowTemplate: 'expandableRowTemplate.html',
                expandableRowHeight: 150,
                onRegisterApi: function (gridApi) {
                        gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
                                if (row.isExpanded) {
                                        row.entity.subGridOptions = {
                                                columnDefs: [
                                                { name: 'name'},
                                                { name: 'gender'},
                                                { name: 'company'}
                                        ]};

                                        $http.get('http://ui-grid.info/data/100.json')
                                                .then(function(response) {
                                                        row.entity.subGridOptions.data = response.data;
                                                });
                                }
                        });
                }
        };

        vm.gridOptions.columnDefs = [
                { name: 'id', pinnedLeft:true },
                { name: 'name'},
                { name: 'age'},
                { name: 'address.city'}
        ];

        $http.get('http://ui-grid.info/data/500_complex.json')
                .then(function(response) {
                        vm.gridOptions.data = response.data;
                });
});

app.controller('FourthCtrl', function FourthCtrl($http, $log) {
        var vm = this;

        vm.gridOptions = {
                enableRowSelection: true,
                expandableRowTemplate: 'expandableRowTemplate.html',
                expandableRowHeight: 150
        };

        vm.gridOptions.columnDefs = [
                { name: 'id', pinnedLeft:true },
                { name: 'name'},
                { name: 'age'},
                { name: 'address.city'}
        ];

        $http.get('http://ui-grid.info/data/500_complex.json')
                .then(function(response) {
                        var data = response.data;

                        for(i = 0; i < data.length; i++) {
                                data[i].subGridOptions = {
                                        columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
                                        data: data[i].friends,
                                        disableRowExpandable : (i % 2 === 0)
                                };
                        }
                        vm.gridOptions.data = data;
                });
});

Demo




作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

服务器使用nginx+php-fpm配置。
最近发现php-fpm总是不释放内存,服务器内存1G,本身就小,过一段时间就占满了。
只好在占满前手动restart。
然后搜索了一下,发现php-fpm确实存在不释放内存的情况。
按照介绍重新设置了
– pm.start_servers:动态方式下的起始php-fpm进程数量 7
– pm.min_spare_servers:动态方式下的最小php-fpm进程数 4
– pm.max_spare_servers:动态方式下的最大php-fpm进程数量 10

pm.start_servers = min_spare_servers + (max_spare_servers - min_spare_servers) / 2

试用了一段时间,内存确实到90%左右就不增长缓慢了,但是数据堵塞了,只好继续restart。

在找到替换php-fpm之前,省事的方法还先设置一个定时任务,每天凌晨重启一下php-fpm访问。

先到win10自带的ubuntu上测试一番
第一个命令
service cron start : 提示no crontab for root – using an empty one
选择编辑器后 填写
* * * * * service nginx restart 每分钟重启一次nginx
默默等待一分钟,打开top,什么都没有发生,找日志,结果日志也没有。
搜索一番,始终找不到日志,顿时没了头绪。

换一个命令,再试一次。
* * * * * date >> /var/log/temp.txt
再次默默等待一分钟,切到var的log目录,居然出现了temp.txt。

再次搜索 定时启动php-fpm的命令。

最终命令:每天凌晨1点重启php-fpm服务

0 1 * * * systemctl restart php-fpm

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

使用Laravel开发时,数据库非空字段未设置默认值,可以在此表Model中添加 $attributes为字段设置默认值,通过save方法保存时会自动添加。

例如,为文章表 访问数 字段 access_nums 添加 默认值0,则新建文章时会默认access_nums为0。

protected $attributes = [
        'access_nums' => 0
    ];

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:tutorial: 215 tree view
在表格中可以创建树状视图,指定哪些数据行是节点,哪些是叶。

请注意,最近treeView和分组有重大更改,大部分逻辑合并到treeBase模块中。 这意味着您可能需要在代码中包含treeBase模块,并且某些事件和方法已移至grid.api.treeBase而不是grid.api.treeView。

api文档中提供了treeView功能的文档,包括treeView本身和treeBase文档中的共享函数。 特别是:
treeBase columnDef
treeView gridOptions and treeBase gridOptions
treeView publicApi and treeBase publicApi

树结构本身记录在treeBase中。
在数据中,通过在给定行上设置属性$$treeLevel来设置节点。 级别从0开始,随着数据向下移动而增加。

可以通过rowExpanded事件逐条侦听加载数据。 然后,还可以将其他数据拼接到指定的数据数组中。

Treeview允许排序,并将其实现为递归树排序 – 它对树的每个节点的子节点进行排序。

Treeview所有行(节点和叶子)都可以过滤,并确保任何可见行的所有父项也是可见的。 请注意,过滤不会更改展开/折叠状态,仍需要展开节点以获取已过滤的行。

Treeview包括聚合逻辑,通过在columnDef上设置聚合属性来实现。 聚合属性记录在columnDef中。 有关更多详细信息,请参阅 complex trees

TreeView还正在开发中,仍然是内测版,但是已经包含在分发文件中可以使用。 值得注意的是:
– 在加载其他数据的同时显示沙漏或图标会很好,同时也意味着表格不知道是否正在添加其他数据

需要注意的选项包括:
– treeIndent:随着树级别变深,展开按钮缩进的像素值(默认为10)。 较大的值看起来更好
– treeRowHeaderBaseWidth:树行标题的基本宽度(默认为30)
– showTreeExpandNoChildren:默认为true。 即使没有子项也显示+,也允许你动态加载子项。 如果设置为false,如果没有子项,则不会有+

为了获得更好的性能,您可以选择加载ui-grid.core.js和特定的功能文件:

<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.tree-base.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.tree-view.min.js"></script>

Example
在此示例中,大多数数据在初始页面加载时加载。 然而,Guerrero Lopez下的节点仅在监听该行时才加载。 它们有2秒的延迟来模拟从服务器加载。
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <button id="expandAll" type="button" class="btn btn-success" ng-click="expandAll()">Expand All</button>
      <button id="toggleFirstRow" type="button" class="btn btn-success" ng-click="toggleRow(0)">Toggle First Row</button>
      <button id="toggleSecondRow" type="button" class="btn btn-success" ng-click="toggleRow(1)">Toggle Second Row</button>
      <button id="toggleExpandNoChildren" type="button" class="btn btn-success" ng-click="toggleExpandNoChildren()">Toggle Expand No Children</button>
      <div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 500px;
  height: 400px;
}

app.js

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.treeView' ]);

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function ($scope, $http, $interval, uiGridTreeViewConstants ) {
  $scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    showTreeExpandNoChildren: true,
    columnDefs: [
      { name: 'name', width: '30%' },
      { name: 'gender', width: '20%' },
      { name: 'age', width: '20%' },
      { name: 'company', width: '25%' },
      { name: 'state', width: '35%' },
      { name: 'balance', width: '25%', cellFilter: 'currency' }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
      $scope.gridApi.treeBase.on.rowExpanded($scope, function(row) {
        if( row.entity.$$hashKey === $scope.gridOptions.data[50].$$hashKey && !$scope.nodeLoaded ) {
          $interval(function() {
            $scope.gridOptions.data.splice(51,0,
              {name: 'Dynamic 1', gender: 'female', age: 53, company: 'Griddable grids', balance: 38000, $$treeLevel: 1},
              {name: 'Dynamic 2', gender: 'male', age: 18, company: 'Griddable grids', balance: 29000, $$treeLevel: 1}
            );
            $scope.nodeLoaded = true;
          }, 2000, 1);
        }
      });
    }
  };

 $http.get('http://ui-grid.info/data/500_complex.json')
 .then(function(response) {
   var data = response.data;

   for ( var i = 0; i < data.length; i++ ){
     data[i].state = data[i].address.state;
     data[i].balance = Number( data[i].balance.slice(1).replace(/,/,'') );
   }
   data[0].$$treeLevel = 0;
   data[1].$$treeLevel = 1;
   data[10].$$treeLevel = 1;
   data[11].$$treeLevel = 1;
   data[20].$$treeLevel = 0;
   data[25].$$treeLevel = 1;
   data[50].$$treeLevel = 0;
   data[51].$$treeLevel = 0;
   $scope.gridOptions.data = data;
 });

  $scope.expandAll = function(){
    $scope.gridApi.treeBase.expandAllRows();
  };

  $scope.toggleRow = function( rowNum ){
    $scope.gridApi.treeBase.toggleRowTreeState($scope.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]);
  };

  $scope.toggleExpandNoChildren = function(){
    $scope.gridOptions.showTreeExpandNoChildren = !$scope.gridOptions.showTreeExpandNoChildren;
    $scope.gridApi.grid.refresh();
  };
}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:Tutorial: 214 Pagination
启用分页后,数据会使用内置分页选择器显示在浏览的页面中。
api文档中提供了分页功能的文档,特别是:
gridOptions
publicApi
如果您想要基于服务器的分页,可以查看外部分页教程或考虑使用无限滚动,它还支持检索页面中的数据。
为了通过以下示例获得更好的性能,您可以选择加载ui-grid.core.js和特定功能文件:

<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.auto-resize.min.js"></script>

Example
代码
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="/release/ui-grid.js"></script>
    <script src="/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <p><strong>Grid with native pagination controls</strong></p>
      <div ui-grid="gridOptions1" ui-grid-pagination class="grid"></div>
      <br /><br />
      <p><strong>Grid pagination controlled via the API</strong></p>
      <div ui-grid="gridOptions2" ui-grid-pagination class="grid"></div>
      <p>Current page: {{ gridApi2.pagination.getPage() }} of {{ gridApi2.pagination.getTotalPages() }}</p>
      <button type="button" class="btn btn-success" ng-click="gridApi2.pagination.previousPage()">
        previous page
      </button>
      <button type="button" class="btn btn-success" ng-click="gridApi2.pagination.nextPage()">
        next page
      </button>
      <button type="button" class="btn btn-success" ng-click="gridApi2.pagination.seek(3)">
        go to page 3
      </button>
    </div>
  </body>
</html>

main.css

.grid {
  width: 600px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions1 = {
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    columnDefs: [
      { name: 'name' },
      { name: 'gender' },
      { name: 'company' }
    ]
  };
  $scope.gridOptions2 = {
    enablePaginationControls: false,
    paginationPageSize: 25,
    columnDefs: [
      { name: 'name' },
      { name: 'gender' },
      { name: 'company' }
    ]
  };
  $scope.gridOptions2.onRegisterApi = function (gridApi) {
    $scope.gridApi2 = gridApi;
  }
  $http.get('/data/100.json')
  .then(function (response) {
    $scope.gridOptions1.data = response.data;
    $scope.gridOptions2.data = response.data;
  });
}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:Tutorial: 213 Auto-Resizing
自动调整大小功能允许表格在页面大小更改时自行调整大小。
请在module中引入“ui.grid.autoResize”模块,并将ui-grid-auto-resize指令添加到html页面的grid中。

注意:开启后,系统会间隔250ms检查表格元素的大小是否发生更改。它可能会对网站或应用程序的性能产生负面影响。

为了通过以下示例获得更好的性能,您可以选择加载ui-grid.core.js和特定功能文件:

<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.auto-resize.min.js"></script>

Example
代码:
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="/release/ui-grid.js"></script>
    <script src="/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <button type="button" class="btn btn-success" ng-click="randomSize()">Change to Random Size</button>
      <br>
      <br>
      <div ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 500px;
  height: 400px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.autoResize']);

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
  $scope.gridOptions = {};

  $scope.gridOptions.columnDefs = [
    { name:'id', width:50 },
    { name:'name', width:100, pinnedLeft:true },
    { name:'age', width:100, pinnedRight:true  },
    { name:'address.street', width:150  },
    { name:'address.city', width:150 },
    { name:'address.state', width:50 },
    { name:'address.zip', width:50 },
    { name:'company', width:100 },
    { name:'email', width:100 },
    { name:'phone', width:200 },
    { name:'about', width:300 },
    { name:'friends[0].name', displayName:'1st friend', width:150 },
    { name:'friends[1].name', displayName:'2nd friend', width:150 },
    { name:'friends[2].name', displayName:'3rd friend', width:150 },
  ];

  $http.get('/data/500_complex.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });

  $scope.randomSize = function () {
    var newHeight = Math.floor(Math.random() * (300 - 100 + 1) + 300);
    var newWidth = Math.floor(Math.random() * (600 - 200 + 1) + 200);

    angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px');
    angular.element(document.getElementsByClassName('grid')[0]).css('width', newWidth + 'px');
  };
}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。