卡片刷新插件
卡片刷新插件提供将 ajax 内容加载到卡片中的功能。
用法
此插件可以用作 jQuery 插件或使用数据 API 激活。
数据 API
通过向卡片添加包含 data-card-widget="card-refresh" 的按钮并提供必需的 data-source="/URL-TO-CONTENT" 选项来激活该插件。这样，插件将自动创建对所提供 URL 的 GET 请求，并将返回的响应呈现在卡片的 .card-body 部分中。如果你需要在呈现之前处理返回的响应，你应该使用 jQuery API，该 API 提供了处理响应的钩子。
jQuery
jQuery API 提供了更多可自定义选项，允许开发人员在呈现之前对请求进行预处理并在呈现之后对其进行后处理。
$('#my-card [data-card-widget="card-refresh"]').CardRefresh(options)
选项
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 来源 | 字符串 | ’’ | 源 URL。 |
| 来源选择器 | 字符串 | ’’ | 仅获取选择器内容的选择器。 |
| 参数 | 对象 | {} | 获取查询参数（示例：{search_term: ‘layout’}，呈现在 URL/?search_term=layout） |
| 触发器 | 字符串 | [data-card-widget="card-refresh"] |
刷新按钮的 CSS 选择器 |
| 内容 | 字符串 | .card-body |
应呈现内容的目标 CSS 选择器。此选择器应存在于卡片中。 |
| 加载到内容中 | 布尔值 | TRUE | 是否自动呈现内容。 |
| 在初始化时加载 | 布尔值 | TRUE | 在页面加载时初始化插件。 |
| 加载错误模板 | 布尔值 | TRUE | 当出现 ajax 错误时是否将 errorTemplate 追加到卡片中。 |
| 响应类型 | 字符串 | ’’ | 响应类型（示例：‘json’ 或 ‘html’） |
| 覆盖模板 | 字符串 | TRUE | ajax 旋转器的 HTML 模板 |
| 错误模板 | 字符串 | '<span class="text-danger"></span>' |
ajax 错误消息的 HTML 模板 |
| 在加载时启动 | 函数 | 匿名函数 | 在发出 ajax 请求之前调用 |
| 在加载完成后 | 函数 | 匿名函数 | 在发出 ajax 请求后调用。一个 response 参数传递给持有服务器响应的函数。 |
| 在加载失败时 | 函数 | 匿名函数 | 如果 ajax 请求失败，则调用。jqXHR、textStatus 和 errorThrown 参数传递给函数。 |
事件
| 事件类型 | 说明 |
|---|---|
| loaded.lte.cardrefresh | 在卡片刷新后触发。 |
| overlay.added.lte.cardrefresh | 在覆盖层添加到卡片后触发。 |
| overlay.removed.lte.cardrefresh | 在覆盖层从卡片中移除后触发。 |
示例：$('#my-card [data-card-widget="card-refresh"]').on('loaded.lte.cardrefresh', handleLoadedEvent)
方法
| 方法 | 说明 |
|---|---|
| 加载 | 重新加载内容并运行onLoadStart和onLoadDone钩子 |
示例：$('#my-card [data-card-widget="card-refresh"]').CardRefresh('load')