概述
angular-gridster 是一个基于 AngularJS 框架的网格布局组件，可以用来实现可拖拽的 dashboard、可配置的网格布局等功能。该组件支持可视化的编辑和拖拽操作，使用简单方便。
安装
在使用 angular-gridster 之前，你需要先安装以下依赖：
- AngularJS：^1.3.0
- lodash：^4.0.0
然后，在你的项目中执行以下命令来安装 angular-gridster：
npm install angular-gridster --save
使用
引入模块
在使用 angular-gridster 之前，需要在你的项目中引入该模块。在你的 app.js 文件或者其他入口文件中添加以下代码：
angular.module('myApp', ['gridster']);配置选项
在使用 angular-gridster 的时候，你需要为其提供一些配置选项。以下是一些常用的选项：
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| columns | number | 6 | 网格列数 |
| margin | number[] | [10, 10] | 网格间距 |
| outerMargin | boolean | true | 是否显示边缘间距 |
| draggable | GridsterDraggableOptions | { enabled: false } | 是否启用拖拽 |
| resizable | GridsterResizableOptions | { enabled: false } | 是否启用调整大小 |
| maxRows | number | 0 | 最大行数，0 表示不限制 |
| minRows | number | 0 | 最小行数 |
| defaultSizeX | number | 2 | 默认宽度 |
| defaultSizeY | number | 2 | 默认高度 |
你可以在控制器中定义一个选项对象，并将其传递给 gridster-options 属性。例如：
-- -------------------- ---- -------
-----------------------
--------------------- ---------- -
--- -- - -----
------------------ - -
-------- --
------- ---- ----
------------ ------
---------- -
-------- -----
------- ----------------
--
---------- -
-------- -----
-------- ----- ---- ---- ---- ----- ----- ----- -----
-
--
---添加网格
在模板中添加一个 gridster 元素，并使用 gridster-item 指令来添加网格。以下是一个简单的示例：
<div class="gridster">
<ul>
<li gridster-item="item" ng-repeat="item in vm.dashboardItems">{{ item.content }}</li>
</ul>
</div>上面的代码中，我们使用了 ng-repeat 来循环遍历 vm.dashboardItems 数组，并将数组中的每个元素作为参数传递给 gridster-item 指令。其中，item 是一个对象，包含了网格的位置、大小等信息。
编辑网格
在使用 angular-gridster 的时候，你可以通过鼠标拖拽来编辑网格的位置和大小。如果你需要对网格进行更复杂的操作，比如说旋转、删除等，你可以使用 gridster-item 指令提供的一些特殊属性。
以下是一些常用的属性：
| 属性 | 类型 | 描述 |
|---|---|---|
| gridster-item | object | 一个包含网格配置信息的对象，包括位置、大小等 |
| gridster-item-x | number | 网格所在行数 |
| gridster-item-y | number | 网格所在列数 |
| gridster-item-cols | number | 网格宽度 |
| gridster-item-rows | number | 网格高度 |
例如，在下面的代码中，我们将 gridster-item 对象绑定到了控制器中的变量 item
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35478