Table - 表格
全局引入
解析后端返回的数据渲染到页面
此插件无官方文档，如有疑问请加QQ群或QQ以获取技术支持
- url默认为
ETool.getBaseUrl() + 'select'，如需指定请在options中添加url - 默认开启垂直滚动条，高度设置为当前页面高度-
280px，适用于1行查询条件+1行按钮场景。如有特殊需求可添加layout.height来添加回调函数或者直接指定高度
var options = {
// 列配置
columns: [
// checkbox
{
field: 'id',
title: '#',
sortable: false, // 禁用此列排序
width: 40,
selector: {class: 'e-checkbox--solid'}
},
{
field: 'name',
title: '姓名',
template: function (row, index, datatable) {
// 如有特殊需求可以在此处处理这里在name两边加~做示例
return '~' + row.name + '~';
}
},
{
field: 'sex',
title: '性别',
// 使用字典
dictType: 'sex'
},
// 操作列
{
field: 'Actions',
width: 110,
title: '操作',
sortable: false,
locked: {
// 当页面宽度 > md 时将此列固定在右边
right: 'md'
},
template: function (row, index, datatable) {
var _btn = '';
// 验证当前登录用户是否有权限
if (ETool.hasPermissions('sample:general:save')) {
_btn += '<a href="#" onclick="ETool.editById(this, \'' + row.id + '\', \'' + row.name + '\')" class="' + ETool.ACTIONS_DANGER + '" title="编辑">\
<i class="la la-edit"></i>\
</a>';
}
// 验证当前登录用户是否有权限
if (ETool.hasPermissions('sample:general:delete')) {
_btn += '<a href="#" onclick="ETool.deleteById(this, \'' + row.id + '\')" class="' + ETool.ACTIONS_DANGER + '" title="删除">\
<i class="la la-trash"></i>\
</a>';
}
return _btn;
}
}
]
};
// 初始化表格
ETool.initDataTable(options);
- initDataTable 默认设置了以下配置
{
selector: '.kt_datatable',
// 数据源
data: {
type: 'remote',
source: {
autoQuery: true, // 带入表单参数
read: {
url: url,
map: function (res) {
if (typeof res !== 'undefined' && ETool.httpCode.success === res.code) {
if (typeof res.data.records !== 'undefined') { // 带有分页信息
return res.data.records;
} else {
return res.data;
}
}
}
}
},
saveState: {
// 使用cookie/webstorage 保存表格状态(分页, 筛选, 排序)
cookie: false,
webstorage: true
},
pageSize: ETool.dataTable.page.size, // 页大小
serverPaging: true, // 在服务器进行数据分页
serverFiltering: true, // 在服务器进行数据过滤
serverSorting: true // 在服务器进行数据排序
},
toolbar: {
items: {
pagination: {
pagination: [10, 15, 20, 30, 50, 100, -1]
}
}
},
// 布局
layout: {
theme: 'default', // 主题
class: '', // 自定义class
scroll: true, // 启用滚动条
height: ETool.dataTable.layout.height, // 高度
footer: false // 显示/隐藏 footer
},
search: {
// 查询条件(仅用于数据在local)
input: '.query-modular input, .query-modular select',
// 在输入框按回车查询
onEnter: true
},
// 列滚动
sortable: true,
// 分页
pagination: true
}
- 所有配置项
{
// 数据源
data: {
type: 'local',
source: null,
pageSize: 10, // 默认页大小
saveState: {
// 使用cookie/webstorage 保存表格状态(分页, 筛选, 排序)
cookie: false,
webstorage: true
},
serverPaging: false, // 在服务器分页
serverFiltering: false, // 在服务器进行数据过滤
serverSorting: false, // 在服务器进行排序
autoColumns: false, // 自动列
attr: {
rowProps: []
}
},
// 布局
layout: {
theme: 'default', // 主题
class: pfx + 'datatable--brand', // 容器 class
scroll: false, // 启用禁用垂直/水平滚动条
height: null, // 高度
minHeight: 300, // 最小高度
footer: false, // 显示/隐藏 footer
header: true, // 显示/隐藏 header
customScrollbar: true, // 自定义滚动条
// 等待提示样式
spinner: {
overlayColor: '#000',
opacity: 0,
type: 'loader',
state: 'brand',
message: true
},
// datatable 图标
icons: {
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,
// 分页
pagination: true,
// 列配置
columns: [],
search: {
// 通过keyup事件搜索
onEnter: false,
// 搜索框中提示文字
input: null,
// 搜索延迟 单位: 毫秒
delay: 400
},
rows: {
// callback
callback: function () {
},
// 在拼接<tr>内容前调用
beforeTemplate: function () {
},
// 在拼接<tr>内容后调用
afterTemplate: function () {
},
// 如果列溢出,自动隐藏非锁定列
autoHide: true
},
// 工具条
toolbar: {
// 布局
layout: ['pagination', 'info'],
// 设置工具条位于底部还是顶部
placement: ['bottom'], //'top', 'bottom'
// 工具条选项
items: {
// 分页
pagination: {
// 分页类型(default or scroll)
type: 'default',
// 不同设备下页码按钮显示数量
pages: {
desktop: {
layout: 'default',
pagesNumber: 5
},
tablet: {
layout: 'default',
pagesNumber: 3
},
mobile: {
layout: 'compact'
}
},
// 导航按钮
navigation: {
prev: true, // 上一页
next: true, // 下一页
first: true, // 第一页
last: true // 最后一页
},
// 页大小select
pageSizeSelect: []
},
// 记录信息
info: true
}
},
// 自定义插件提示文字
translate: {
records: {
processing: '请稍候...',
noRecords: '未查找到数据'
},
toolbar: {
pagination: {
items: {
default: {
first: '第一页',
prev: '上一页',
next: '下一页',
last: '最后一页',
more: '更多页码',
input: '请输入页码',
select: '每页显示',
all: '全部'
},
info: '当前显示 {{start}} - {{end}} 共 {{total}} 条数据'
}
}
}
},
extensions: {}
}
- 默认获取表格高度方法
// 默认高度
height: function () {
var minHeight = 300;
// 默认保留280px高度
var height = EUtil.getViewPort().height - 280;
return Math.max(height, minHeight);
}