Metronic 中的 KTDatatable

本文发布于 4 年前，部分内容可能已经失去参考价值。

核心文件路径：/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&section=html-components-datatable