核心文件路径：/theme/html/demo*/src/js/components/core.datatable.js
所有参数的默认值见该文件 3369 行起。
data：
| 属性 | 功能 | 值 |
| type | 数据源类型 | local / remote |
| source | 数据源 | 链接或对象（见下方） |
| pageSize | 每页项数 | 默认 10 |
| saveState | 刷新、重新打开、返回时仍保持状态 | 默认 true |
| serverPaging | 是否在服务端实现分页 | 默认 false |
| serverFiltering | 是否在服务端实现筛选 | 默认 false |
| serverSorting | 是否在服务端实现排序 | 默认 false |
| autoColumns | 为远程数据源启用自动列功能 | 默认 false |
| attr |
data.source：
| 属性 | 功能 | 值 |
| url | 数据源地址 | |
| params | 请求参数 | query: {
} |
| headers | 自定义请求的头 | {
'x-my-custom-header': 'some value',
'x-test-header': 'the value'
} |
| map | 数据地图，作用是对返回的数据进行整理和定位 | function (raw) {
console.log(raw)
// sample data mapping
var dataSet = raw;
if (typeof raw.data !== 'undefined') {
dataSet = raw.data;
}
return dataSet;
} |
layout：
| 属性 | 功能 | 值 |
| theme | 主题 | 默认 default |
| class | 包裹的 CSS 样式 | |
| scroll | 在需要时显示横向或纵向滚动条 | 默认 false |
| height | 表格高度 | 默认 null |
| minHeight | 表格最小高度 | 默认 null |
| footer | 是否显示表格底部 | 默认 false |
| header | 是否显示表头 | 默认 true |
| customScrollbar | 自定义的滚动条 | 默认 true |
| spinner | Loading 样式 | {
overlayColor: '#000000',
opacity: 0,
type: 'loader',
state: 'primary',
message: true,
} |
| icons | 表格中的 icon | {
sort: {
asc: 'flaticon2-arrow-up',
desc: 'flaticon2-arrow-down'
},
pagination: {
next: 'flaticon2-next',
prev: 'flaticon2-back',
first: 'flaticon2-fast-back',
last: 'flaticon2-fast-next',
more: 'flaticon-more-1',
},
rowDetail: {
expand: 'fa fa-caret-down',
collapse: 'fa fa-caret-right'
},
} |
| sortable | 是否支持按列排序 | 默认 true |
| resizable | 是否支持鼠标拖动改变列宽 | 默认 false |
| filterable | 在列中过滤 | 默认 false |
| pagination | 显示分页信息 | 默认 true |
| editable | 行内编辑 | 默认 false |
| columns | 列 | 见本文下方 |
| search | 搜索 | {
// 按回车键确认
onEnter: false,
// 文本内容
input: null,
// 搜索延时
delay: 400,
// 键名
key: null
} |
layout.columns：
| 属性 | 功能 | 解释 |
| field | 字段名 | 对应 JSON 的属性名，点击表头时作为排序字段名 |
| title | 表头名 | 显示在表格头部 |
| sortable | 默认排序方式 | 可选：'asc' / 'desc' |
| width | 单元格最小宽度 | 值与 CSS 值一致，填数字时默认单位 px |
| type | 数据类型 | 'number' / 'date' 等，与本地排序有关 |
| format | 数据格式化 | 例格式化日期：'YYYY-MM-DD' |
| selector | 是否显示选择框 | 布尔值或对象，如：{ class: '' } |
| textAlign | 文字对齐方式 | 'center' |
| overflow | 内容超过单元格宽度时是否显示 | 'visible'：永远显示 |
| autoHide | 自适应显示/隐藏 | 布尔值 |
| template | 用于显示内容的 HTML 模板 | function(row) { return row.Id; } |
| sortCallback | 排序回调 | 自定义排序方式，参 local-sort.js |
其它：
| 属性 | 功能 | 解释 |
| translate | 翻译 | 参 core.datatable.js 3512 行，简体中文示例： translate: {
records: {
processing: '加载中...',
noRecords: '没有找到相关内容',
},
toolbar: {
pagination: {
items: {
default: {
first: '首页',
prev: '前一页',
next: '后一页',
last: '末页',
more: '更多',
input: '请输入跳转页码',
select: '设置每页显示项数',
},
info: '当前第 {{start}} - {{end}} 项 共 {{total}} 项',
},
},
},
}, |
| extensions |
暂时没有找到对字符串内容进行自动 HTML 编码的属性，这可能带来 XSS 攻击风险，在 remote 方式中必须在服务端预先 HtmlEncode。即使在 layout.columns.template 中进行处理也是无济于事，恶意代码会在 ajax 加载完成后立即执行。
方法和事件：待完善。
更多信息请查询官方文档：https://keenthemes.com/keen/?page=docs§ion=html-components-datatable
