基础数据表格的配置同样适用于树形表格,只是树形表格还多了一个tree配置,且模板赋值变量由 buildTable 变更为buildTreeTable

基础参数一览表

参数 类型 说明 示例值
cols Array 设置表头。值是一维数组 详见表头参数
data Array 直接赋值数据,dataurl二选一 [{}, {}, {}, {}, …]
url String 异步请求URL,dataurl二选一 /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

目前只支持自定义空数据提示:

  1. $assign['buildTreeTable']['config'] = [
  2. 'text' => [
  3. 'none' => '无数据哦',
  4. ],
  5. ];

自定义表头

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’