section: view id: dashboard description: 支持拖放调整位置的面板网格 icon: icon-th-large filter: yibiaopan ybp panel mianban mb --- # 仪表盘 仪表盘提供了一种灵活的方式来通过多个面板组（`.panel`）并配合栅格来展现内容的方式。

兼容性提示

仪表盘视图在触摸屏上无法完成拖拽排序功能。

## 使用示例 ### 引入资源 仪表盘为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源： ```html ``` ### 综合示例
面板标题

面板内容。

包含列表组
列表组项目1 列表组项目2 列表组项目3 列表组项目4
包含表格
ID 名称 积分 排名
1526 小马虎 1056 1
1001 勇敢的小鸭 999 12
1045 鸡大爷 998 23
1025 猪无畏 860 25
1102 糊涂虫 749 30
包含操作按钮

在面板头部（.panel-heading）包含链接和按钮来自定义操作。

加载远程内容
等待加载远程内容。
可移除的面板

点击顶部右侧的 按钮来移除该面板。

.panel-loading

为 .panel 添加 .panel-loading 类即可实现正在加载的外观。

 ```html
面板标题

面板内容。

包含列表组
...
包含表格
...
包含操作按钮

在面板头部（.panel-heading）包含链接和按钮来自定义操作。

加载远程内容
等待加载远程内容。
可移除的面板

点击顶部右侧的 按钮来移除该面板。

.panel-loading

为 .panel 添加 .panel-loading 类即可实现正在加载的外观。

``` ```js $('#dashboard').dashboard({draggable: true}); ``` ## 选项 在进行初始化时允许传入一个对象参数或者使用 `[data-*]` 属性作为初始化选项。可以使用的选项如下：
选项 名称 可选值 描述
`height` 面板高度 默认 `360`
`sensitive` 是否启用灵敏判断 `false`，`true`（默认） 当设置为 `true` 时，在拖动面板时，即使鼠标没有移动可供放置的另一个面板区域内，如果此时被移动的面板影子元素已经与可供放置的一个面板有重合区域也会判断为可以放置在此面板区域内（执行重新排序操作）。
`draggable` 是否可以拖拽排序 `false`，`true`（默认） 如果设定为 `true`，则用户可以拖拽面板头部（`.panel-heading`）来重新排列面板。
`resizable` 是否可以更改栅格大小 `false`，`true`（默认） 如果设定为 `true`，则用户可以拖拽面板右侧边缘来动态更改栅格大小（决定面板宽度）。
`resizeMessage` 显示大小变更消息 `false`，`true`（默认） 如果设定为 `true`，则在用户拖拽更改栅格大小时显示一个漂浮消息来指示当前栅格大小。
`data` 初始化面板 对象数组 指定一个对象数组用来在初始化时生成栅格和面板。
`onlyRefreshBody` 远程更新方式 `true`（默认）、`false` 如果设置为 `true`，则远程内容仅仅用于更新 `.panel-body` 元素，否则会更新 `.panel`。
`afterPanelRemoved` 面板被移除时的回调函数 函数 当用户点击 `.panel-actions` 内的 `.remove-panel` 元素时会移除面板并调用此回调函数。
`panelRemovingTip` 移除面板前的确认消息 `false`（默认）或用于格式化文本的字符串 如果设置为一个字符串，则会在移除面板前弹出以此字符串作为消息的确认对话框，在字符串内包含格式化参数 `'{0}'` 来显示当前被移除的面板标题。
`afterOrdered` 重新排序面板后的回调函数 函数
`onResize` 更改栅格大小时的回调函数 函数
`afterRefresh` 远程加载完成后的回调函数 函数
使用选项： ```js // 定义选项对象 var options = { height: 400, afterOrdered: function(e) { console.log('排序完成：', e); }, // 设置更多选项... }; // 初始化时传入选项参数 $('#dashboard').dashboard(options) ``` ## 结构 ### 使用面板 面板（`.panel`）是仪表盘内用来展示内容的基本容器元素。 面板中的 `.panel-heading` 和 `.panel-body` 都是必须的。 默认情况下 `.panel-body` 包含内边距，如果需要移除外边距可以为 `.panel-body` 添加 `.no-padding` 类，这对于在 `.panel-body` 内直接包含 ``、 `