基础数据表格的配置同样适用于树形表格,只是树形表格还多了一个tree配置,且模板赋值变量由 buildTable
变更为buildTreeTable
基础参数一览表
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
cols | Array | 设置表头。值是一维数组 | 详见表头参数 |
data | Array | 直接赋值数据,data 和url 二选一 |
[{}, {}, {}, {}, …] |
url | String | 异步请求URL,data 和url 二选一 |
/cms/article/index |
width | Number | 设定容器宽度 | 350 |
height | Number/String | 设定容器高度 | 300 / ‘full-150’ |
cellMinWidth | Number | 定义所有单元格的最小宽度 | 100 |
text | Object | 自定义文本,如空数据提示等 | 详见自定义文本 |
skin | String | 设定表格风格 | line行边框、row列边框、nob无边框 |
even | Boolean | 开启隔行背景 | true/false |
size | String | 设定表格尺寸 | sm 小尺寸、lg 大尺寸 |
tree | Object | 设定树相关参数 | 详见树相关参数 |
style | String | 设定容器的样式 | ‘margin-top: 0;’ |
getThead | Function | 自定义表头 | 详见自定义表头 |
自定义文本text
目前只支持自定义空数据提示:
$assign['buildTreeTable']['config'] = [
'text' => [
'none' => '无数据哦',
],
];
自定义表头
treeTable实现复杂表头的做法与table模块不同,方法如下:
$assign['buildTreeTable']['config'] = [
'getThead' => 'function() {
return "<tr><td colspan=\"7\">我是表头</td></tr>";
}',
];
自定义树形图标:
内置了两种风格图标,你也可以很灵活的自己扩展风格:
$assign['buildTreeTable']['config'] = [
'tree' => [
'iconIndex' => 1,
'isPidData' => true,
'getIcon' => 'function (d) {
// d是当前行的数据
if (d.haveChild) { // 判断是否有子集
return '<i class="ew-tree-icon ew-tree-icon-folder"></i>';
} else {
return '<i class="ew-tree-icon ew-tree-icon-file"></i>';
}
}',
],
];
ew-tree-icon-folder(文件夹)和ew-tree-icon-file(文件)这两个class是treeTable内置的,
你可以换成其他clss自己加样式,ew-tree-icon这个class是必须的。
判断是否有子集d.haveChild这个写法根据你的实际情况写,如果是children形式数据可以写(d.children&&d.children.length>0)
表头参数一览表cols
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
field | String | 设定字段名 | ‘username’ |
title | String | 设定标题名称 | 用户名 |
width | Number | 设定列宽,若不填写,则自动分配 | 150、20%(数字和百分比) |
minWidth | Number | 单元格的最小宽度 | 100(数字) |
type | String | 设定列类型 | checkbox复选框、radio单选框、numbers序号列、space空列 |
edit | String | 单元格编辑类型 | text(输入框)、number(数字输入框) |
style | String | 自定义单元格样式 | color: red; |
class | String | 自定义单元格class | class: ‘pd-tb-0’; |
align | String | 单元格排列方式 | center居中、right居右 |
templet | String | 自定义列模板 | 详见自定义列模板 |
toolbar | String | 绑定工具条模板 | 详见行工具事件 |
singleLine | Boolean | 是否单行显示,溢出悬浮展开 | true/false |
templet和toolbar用法与数据表格table模块一致
树相关参数一览表tree
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
iconIndex | Number | 图标列的索引 | 默认0 |
onlyIconControl | Boolean | 仅允许点击图标折叠 | 默认false |
arrowType | String | 箭头类型 | 可选’arrow2’ |
getIcon | Function | 自定义树形图标 | 详见自定义树形图标 |
isPidData | Boolean | 是否是pid形式的数据,懒加载方式不需要 | 默认false |
idName | String | 设定id的字段名 | 默认’id’ |
pidName | String | 设定pid的字段名,children形式数据不需要 | 默认’pid’ |
childName | String | 设定children的字段名,pid形式数据不需要 | 默认’children’ |
haveChildName | String | 设定是否有子集的字段名,用于懒加载 | 默认’haveChild’ |
openName | String | 设定是否默认展开的字段名 | 默认’open’ |