双11上云狂欢,0.5折起爆品开抢
Logo

博客

2020-12-4 xoyozo 转载请注明出处

核心文件路径:/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
spinnerLoading 样式
{
	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

1,351 阅读

最新发布

13 天前
OBS 自动切换场景 92 次阅读
26 天前
Channel was closed. 61 次阅读
29 天前