数据表格 dtable
用法
js
var renderCell = function(result, {col, row})
{
if(col.name === 'name')
{
if(row.data.postponed) result[result.length] = {html:'<span class="label size-sm circle danger-pale">' + langPostponed + '</span>', className:'flex items-end w-full', style:{flexDirection:"column"}};
return result;
}
if(col.name === 'budget')
{
result[0] = {html: '<div>' + row.data.budget + ' <span class="icon icon-exclamation-sign mr-2 text-danger"></span></div>', className:'flex items-end w-full items-end', style:{flexDirection:"column"}};
return result;
}
if(col.name === 'invested')
{
result[0] = {html: '<div>' + row.data.invested + ' <small class="text-gray">' + langWorkerDay + '</small></div>', className:'flex items-end w-full items-end', style:{flexDirection:"column"}};
return result;
}
return result;
};
var footerGenerator = function()
{
var count = this.layout.allRows.filter((x) => x.data.type === "product").length;
var statistic = '{$summary}'.replace('%s', ' ' + count + ' ');
return [{children: statistic, className: "text-dark"}, "flex", "pager"];
};php
$cols = [
[
'name' => 'name',
'title' => '名称',
'width' => 200,
'type' => 'link',
'flex' => 1,
'nestedToggle' => 1,
'checkbox' => 1,
'sortType' => 1,
],
[
'name' => 'status',
'title' => '状态',
'minWidth' => 60,
'type' => 'status',
'sortType' => 1,
'statusMap' => [
'wait' => '未开始',
'doing' => '进行中',
'suspended' => '已挂起',
'closed' => '已关闭',
]
],
[
'name' => 'PM',
'title' => '负责人',
'minWidth' => 80,
'type' => 'avatarBtn',
'sortType' => 1,
],
[
'name' => 'budget',
'title' => '预算',
'width' => 90,
'type' => 'format',
'sortType' => 1,
],
[
'name' => 'invested',
'title' => '已投入',
'minWidth' => 70,
'type' => 'format',
'sortType' => 1,
],
[
'name' => 'begin',
'title' => '计划开始',
'minWidth' => 90,
'type' => 'datetime',
'sortType' => 1,
],
[
'name' => 'end',
'title' => '计划完成',
'minWidth' => 90,
'type' => 'datetime',
'sortType' => 1,
],
[
'name' => 'progress',
'title' => '进度',
'minWidth' => 100,
'type' => 'circleProgress',
],
[
'name' => 'actions',
'title' => '操作',
'width' => 160,
'type' => 'actions',
'fixed' => 'right',
'actionsMap' => [
'program_start' => [
'icon' => 'icon-start',
'hint' => '启动项目集',
],
'program_suspend' => [
'icon' => 'icon-pause',
'hint' => '挂起项目集',
],
'program_close' => [
'icon' => 'icon-off',
'hint' => '关闭项目集',
],
'program_activate' => [
'icon' => 'icon-active',
'hint' => '激活项目集',
],
'program_other' => [
'caret' => 1,
'hint' => '其他',
'type' => 'dropdown',
],
'program_edit' => [
'icon' => 'icon-edit',
'hint' => '编辑项目集',
],
'program_create' => [
'icon' => 'icon-split',
'hint' => '添加项目集',
],
'program_delete' => [
'icon' => 'icon-trash',
'hint' => '删除项目集',
],
'project_start' => [
'icon' => 'icon-start',
'hint' => '启动项目',
],
'project_suspend' => [
'icon' => 'icon-pause',
'hint' => '挂起项目',
],
'project_close' => [
'icon' => 'icon-off',
'hint' => '关闭项目',
],
'project_activate' => [
'icon' => 'icon-active',
'hint' => '激活项目',
],
'project_other' => [
'caret' => 1,
'hint' => '其他操作',
'type' => 'dropdown',
],
'project_edit' => [
'icon' => 'icon-edit',
'hint' => '编辑项目',
],
'project_team' => [
'icon' => 'icon-groups',
'hint' => '团队管理',
],
'project_group' => [
'icon' => 'icon-lock',
'hint' => '项目权限分组',
],
'project_more' => [
'icon' => 'icon-ellipsis-v',
'hint' => '更多操作',
'type' => 'dropdown',
],
'project_link' => [
'icon' => 'icon-link',
'hint' => '关联产品',
],
'project_whitelist' => [
'icon' => 'icon-shield-check',
'hint' => '项目白名单',
],
'project_delete' => [
'icon' => 'icon-trash',
'hint' => '删除项目',
],
]
]
];
$data = [
[
'id' => 6,
'budget' => '待定',
'name' => '企业管理',
'hasProduct' => 1,
'begin' => '2021-06-05',
'end' => '2022-06-04',
'status' => 'doing',
'PM' => '',
'colWidth' => 264,
'minColWidth' => 200,
'maxColWidth' => 384,
'progress' => 18,
'invested' => 0,
'actions' => [
[
'name' => 'program_close',
'hint' => '关闭项目集',
],
[
'name' => 'program_other',
'items' => [
[
'name' => 'program_suspend',
'text' => '挂起项目集',
],
[
'name' => 'program_activate',
'text' => '激活项目集',
'disabled' => 1,
'hint' => '该项目集已是激活状态，无须激活。',
]
]
],
[
'name' => 'program_edit',
'hint' => '编辑项目集',
],
[
'name' => 'program_create',
'hint' => '添加项目集',
],
[
'name' => 'program_delete',
'hint' => '删除项目集',
]
]
],
[
'id' => 7,
'budget' => '待定',
'parent' => 6,
'name' => '企业管理系统',
'hasProduct' => 1,
'begin' => '2021-06-05',
'end' => '2022-06-04',
'status' => 'doing',
'PM' => '项目经理',
'colWidth' => 264,
'minColWidth' => 200,
'maxColWidth' => 384,
'progress' => 35,
'invested' => 0,
'actions' => [
[
'name' => 'project_close',
'hint' => '关闭项目',
],
[
'name' => 'project_other',
'items' => [
[
'name' => 'project_suspend',
'text' => '挂起项目',
],
[
'name' => 'project_activate',
'text' => '激活项目',
'disabled' => 1,
'hint' => '该项目已是激活状态，无须激活。',
],
]
],
'project_edit',
'project_team',
[
'name' => 'project_group'
],
[
'name' => 'project_more',
'items' => [
[
'name' => 'project_link',
'text' => '关联产品',
],
[
'name' => 'project_whitelist',
'text' => '项目白名单',
'disabled' => 1,
'hint' => '该项目是公开项目，无须维护白名单。',
],
[
'name' => 'project_delete',
'text' => '删除项目',
]
]
]
]
]
];
dtable
(
setClass('shadow rounded'),
set::cols($cols),
set::data($data),
set::footerPager(usePager()),
set::onRenderCell(jsRaw('window.renderCell')),
set::nested(true),
set::footer(jsRaw('function() {return window.footerGenerator.call(this);}')),
);html
<div data-zin-id="zin134">
<div id="1" class="dtable shadow-sm rounded dtable-hover-row scrollbar-hover" tabindex="-1"
style="width: 1504px; height: 144px">
<div class="dtable-header" style="height: 36px">
<div class="dtable-row dtable-in-header is-expanded" data-id="HEADER"
style="top: 0px; height: 36px; line-height: 34px">
<div class="dtable-cells dtable-flexable" style="top: 0px; left: 0px; width: 1344px">
<div class="dtable-cell" data-col="name" data-sort="1" style="left: 0px; width: 714px">
<div class="dtable-cell-content">
<a type="button" class="dtable-nested-toggle state"><span class="toggle-icon"></span></a>名称
<div class="dtable-sort dtable-sort-1"></div>
</div>
</div>
<div class="dtable-cell" data-col="status" data-sort="none" style="left: 714px; width: 80px">
<div class="dtable-cell-content" style="justify-content: center">
状态
<div class="dtable-sort dtable-sort-none"></div>
</div>
</div>
<div class="dtable-cell" data-col="PM" data-sort="none" style="left: 794px; width: 100px">
<div class="dtable-cell-content">
负责人
<div class="dtable-sort dtable-sort-none"></div>
</div>
</div>
<div class="dtable-cell" data-col="budget" data-sort="1" style="left: 894px; width: 90px">
<div class="dtable-cell-content">
预算
<div class="dtable-sort dtable-sort-1"></div>
</div>
</div>
<div class="dtable-cell" data-col="invested" data-sort="1" style="left: 984px; width: 80px">
<div class="dtable-cell-content">
已投入
<div class="dtable-sort dtable-sort-1"></div>
</div>
</div>
<div class="dtable-cell" data-col="begin" data-sort="1" style="left: 1064px; width: 90px">
<div class="dtable-cell-content">
计划开始
<div class="dtable-sort dtable-sort-1"></div>
</div>
</div>
<div class="dtable-cell" data-col="end" data-sort="1" style="left: 1154px; width: 90px">
<div class="dtable-cell-content">
计划完成
<div class="dtable-sort dtable-sort-1"></div>
</div>
</div>
<div class="dtable-cell" data-col="progress" style="left: 1244px; width: 100px">
<div class="dtable-cell-content" style="justify-content: center">
进度
</div>
</div>
</div>
<div class="dtable-cells dtable-fixed-right" style="top: 0px; left: 1344px; width: 160px">
<div class="dtable-cell" data-col="actions" style="left: 0px; width: 160px">
<div class="dtable-cell-content">操作</div>
</div>
</div>
</div>
</div>
<div class="dtable-rows" style="top: 36px; height: 72px">
<div class="dtable-row dtable-row-even is-normal" data-id="6"
style="top: 0px; height: 36px; line-height: 34px">
<div class="dtable-cells dtable-flexable" style="top: 0px; left: 0px; width: 1344px">
<div class="dtable-cell" data-col="name" style="left: 0px; width: 714px">
<div class="dtable-cell-content"><a href="">企业管理</a></div>
</div>
<div class="dtable-cell" data-col="status" style="left: 714px; width: 80px">
<div class="dtable-cell-content" style="justify-content: center">
<span class="status-doing">进行中</span>
</div>
</div>
<div class="dtable-cell" data-col="PM" style="left: 794px; width: 100px">
<div class="dtable-cell-content"></div>
</div>
<div class="dtable-cell" data-col="budget" style="left: 894px; width: 90px">
<div class="dtable-cell-content">待定</div>
</div>
<div class="dtable-cell" data-col="invested" style="left: 984px; width: 80px">
<div class="dtable-cell-content">0</div>
</div>
<div class="dtable-cell" data-col="begin" style="left: 1064px; width: 90px">
<div class="dtable-cell-content">2021-06-05</div>
</div>
<div class="dtable-cell" data-col="end" style="left: 1154px; width: 90px">
<div class="dtable-cell-content">2022-06-04</div>
</div>
<div class="dtable-cell" data-col="progress" style="left: 1244px; width: 100px">
<div class="dtable-cell-content" style="justify-content: center">
<svg width="24" height="24">
<circle cx="12" cy="12" r="11.5" stroke-width="1" stroke="var(--color-border)"
fill="transparent"></circle>
<circle cx="12" cy="12" r="11.5" stroke-width="1" stroke="var(--color-success-500)"
fill="transparent" stroke-linecap="round" stroke-dasharray="72.25663103256524"
stroke-dashoffset="59.2504374467035" style="transform-origin: center center;transform: rotate(-90deg);"></circle>
<text x="12" y="13" dominant-baseline="middle" text-anchor="middle"
style="font-size: 11.5px">
18
</text>
</svg>
</div>
</div>
</div>
<div class="dtable-cells dtable-fixed-right" style="top: 0px; left: 1344px; width: 160px">
<div class="dtable-cell" data-col="actions" style="left: 0px; width: 160px">
<div class="dtable-cell-content">
<nav class="toolbar">
<button class="btn ghost toolbar-item text-primary square size-sm" title="关闭项目集">
<i class="icon icon-off"></i></button><button
class="btn ghost dropdown toolbar-dropdown text-primary btn-caret size-sm"
title="其他" data-toggle="dropdown" data-dropdown-placement="">
<span class="caret"></span></button><button
class="btn ghost toolbar-item text-primary square size-sm" title="编辑项目集">
<i class="icon icon-edit"></i></button><button
class="btn ghost toolbar-item text-primary square size-sm" title="添加项目集">
<i class="icon icon-split"></i></button><button
class="btn ghost toolbar-item text-primary square size-sm" title="删除项目集">
<i class="icon icon-trash"></i>
</button>
</nav>
</div>
</div>
</div>
</div>
<div class="dtable-row dtable-row-odd is-normal" data-id="7" data-parent="6"
style="top: 36px; height: 36px; line-height: 34px">
<div class="dtable-cells dtable-flexable" style="top: 0px; left: 0px; width: 1344px">
<div class="dtable-cell" data-col="name" style="left: 0px; width: 714px">
<div class="dtable-cell-content">
<div class="dtable-nested-indent" style="width: 1px"></div>
<a role="button" class="dtable-nested-toggle state is-no-child"><span
class="toggle-icon"></span></a><a href="">企业管理系统</a>
</div>
</div>
<div class="dtable-cell" data-col="status" style="left: 714px; width: 80px">
<div class="dtable-cell-content" style="justify-content: center">
<span class="status-doing">进行中</span>
</div>
</div>
<div class="dtable-cell" data-col="PM" style="left: 794px; width: 100px">
<div class="dtable-cell-content">
<button type="button" class="btn btn-avatar">
<div class="avatar circle flex-none size-xs has-text has-text-2" style="
background: rgb(194, 120, 112);
color: rgb(255, 255, 255);
">
<div data-actualsize="20" class="avatar-text"
style="transform: scale(0.714286); white-space: nowrap">
经理
</div>
</div>
<div>项目经理</div>
</button>
</div>
</div>
<div class="dtable-cell" data-col="budget" style="left: 894px; width: 90px">
<div class="dtable-cell-content">待定</div>
</div>
<div class="dtable-cell" data-col="invested" style="left: 984px; width: 80px">
<div class="dtable-cell-content">0</div>
</div>
<div class="dtable-cell" data-col="begin" style="left: 1064px; width: 90px">
<div class="dtable-cell-content">2021-06-05</div>
</div>
<div class="dtable-cell" data-col="end" style="left: 1154px; width: 90px">
<div class="dtable-cell-content">2022-06-04</div>
</div>
<div class="dtable-cell" data-col="progress" style="left: 1244px; width: 100px">
<div class="dtable-cell-content" style="justify-content: center">
<svg width="24" height="24">
<circle cx="12" cy="12" r="11.5" stroke-width="1" stroke="var(--color-border)"
fill="transparent"></circle>
<circle cx="12" cy="12" r="11.5" stroke-width="1" stroke="var(--color-success-500)"
fill="transparent" stroke-linecap="round" stroke-dasharray="72.25663103256524"
stroke-dashoffset="46.96681017116741" style="
transform-origin: center center;
transform: rotate(-90deg);
"></circle>
<text x="12" y="13" dominant-baseline="middle" text-anchor="middle"
style="font-size: 11.5px">
35
</text>
</svg>
</div>
</div>
</div>
<div class="dtable-cells dtable-fixed-right" style="top: 0px; left: 1344px; width: 160px">
<div class="dtable-cell" data-col="actions" style="left: 0px; width: 160px">
<div class="dtable-cell-content">
<nav class="toolbar">
<button class="btn ghost toolbar-item text-primary square size-sm" title="关闭项目">
<i class="icon icon-off"></i></button><button
class="btn ghost dropdown toolbar-dropdown text-primary btn-caret size-sm"
title="其他操作" data-toggle="dropdown" data-dropdown-placement="">
<span class="caret"></span></button><button
class="btn ghost toolbar-item text-primary square size-sm" title="编辑项目">
<i class="icon icon-edit"></i></button><button
class="btn ghost toolbar-item text-primary square size-sm" title="团队管理">
<i class="icon icon-groups"></i></button><button
class="btn ghost toolbar-item text-primary square size-sm" title="项目权限分组">
<i class="icon icon-lock"></i></button><button
class="btn ghost dropdown toolbar-dropdown text-primary square size-sm" title="更多操作"
data-toggle="dropdown" data-dropdown-placement="">
<i class="icon icon-ellipsis-v"></i><span class="caret-down"></span>
</button>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="dtable-footer text-dark" style="height: 36px; top: 108px">
本页共 0 个产品。
<div style="flex: 1 1 auto"></div>
</div>
</div>
</div>属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
width | string|int|function|object | - | 表格宽度 |
height | string|int|function|object | - | 表格高度 |
rowHeight | int | - | 行单元格高度 |
defaultColWidth | int | - | 默认单元格列宽 |
minColWidth | int | - | 最小单元格列宽 |
maxColWidth | int | - | 最大单元格列宽 |
header | bool|object|function | - | 是否显示表格头部或自定义内容 |
footer | bool|object|function | - | 是否显示表格尾部或自定义内容 |
responsive | bool | - | 是否启用响应式尺寸 |
headerHeight | int | - | 表格头部高度 |
footerHeight | int | - | 表格尾部高度 |
scrollbarHover | bool | - | 是否启用悬停显示滚动条 |
scrollbarSize | int | - | 滚动条尺寸 |
horzScrollbarPos | 'outside'|'inside | 'outside' | 水平滚动条位置 |
striped | bool | - | 是否启用斑马线 |
nested | bool | - | 是否启用折叠收起 |
bordered | bool | - | 是否启用边框 |
rowHover | bool | - | 是否启用行鼠标悬停时的样式 |
colHover | bool|'header' | - | 是否启用列鼠标悬停样式 |
cellHover | bool | - | 是否启用单元格鼠标悬停样式 |
cols | array | - | 列设置 |
data | array | - | 表格数据 |
onLayout | function | - | 监听表格布局变动时的回调函数 |
onScroll | function | - | 监听表格滚动时的回调函数 |
onRenderCell | function | - | 监听渲染每行上的单元格时的回调函数 |
onRenderHeaderCell | function | - | 监听渲染表头上的单元格时的回调函数 |
onRenderRow | function | - | 监听渲染每行时的回调函数 |
onRenderHeaderRow | function | - | 监听渲染表头行时的回调函数 |
afterRender | function | - | 监听渲染后的回调函数 |
onRowClick | function | - | 监听行点击的回调函数 |
onCellClick | function | - | 监听单元格点击的回调函数 |
onHeaderCellClick | function | - | 监听头部单元格点击的回调函数 |
onAddRow | function | - | 监听每行单元格添加时的回调函数 |
onAddRows | function | - | 监听多行单元格添加时的回调函数 |