@hanmotec/uniface-data-table v0.1.2

数据表格

使用方法

npm i -D @hanmotec/uniface-data-table

数据表格包括三个部分，指示栏，数据区和操作栏。

指标栏

指示栏包括行序号，如果多选，可以显示选择框，如果有表格内的展开字段，也可以显示展开/关闭图标。指标栏的定义方法如下：

let indicatorColumn = {
    width: 60,   //宽度，单位为px
    selectable: true,  //是否支持选中
    buildInlineComponent: async (data: any) => {
        //返回指定行的内嵌展示组件
    }
}

操作栏

操作栏定义栏当前行的处理动作，定义的方式如下：

let actionsColumn = {
    title: "动作", //栏标题
    width: 160, //宽度，单位px
    vacancy: 3, //最多的按钮数量，超过通过弹出菜单实现
    getActions: (item: any) => {
        //这个地方可以根据item的状态，返回不同的动作集合
        return [
            {
                text: '查看',
                action: displayItem
            },
            {
                text: '修改',
                action: modifyItem
            },
            {
                text: '删除',
                action: deleteItem
            }
        ]
    }
}

标题定义

表格支持复合表头，示例如下：

const columns:TableColumns =
[
  {
    "text": "姓名",  //栏标题
    "field": "name",  //关联字段的名称，'.'代表支持嵌套对象
    "width": 130, //宽度，单位px
    "resizable": true //是否可以调整大小
  },
  {
    "text": "性别",
    "width": 60,
    "field": "gender",
    "align": "center",
    "resizable": true,
    formatter: (value:any) => value == null ? '' : value == 'M' ? '<span style="color: red">男</span>' : '<span>女</span>',
    escapeHTML: true
  },
  {
    "text": "基本状况", //复合标题
    "columns": [
        {
          "text": "家庭地址",
          "width": 360,
          "field": "address",
          hint: (item: any) => item.address, //当宽度不够的时候，鼠标在单元格时显示弹出信息
          "resizable": true,
          "visible": true, //单元格是否显示
          compareFunction: (o1, o2) => compareObjects(o1?.address, o2?.address), //是否支持排序
        },
        {
          "text": "联系电话",
          "width": 120,
          "field": "phone",
          align: "center", //对齐方式
          "href": (item: any)=> {  //超链接
            return {
              text: "查看详情",
              action: () => {console.log(item)}
            }
          }
        },
        {
          "text": "联系人",
          "width": 90,
          "field": "concat",
          "resizable": true,
          "visible": false,
          "align": "right",
          "render": ConcatPerson
        }
      ]
  },
  {
    "text": "治疗信息",
    "columns": [
      {
        "text": "疾病",
        field: "disease",
        "width": 120,
        "resizable": true,
        "visible": true,
        compareFunction: (o1, o2) => compareObjects(o1?.disease, o2?.disease),
      },
      {
        "text": "费用",
        "width": 120,
        "resizable": true,
        "visible": true
      },
      {
        "text": "入院日期",
        "width": 120,
        "resizable": true,
        "visible": true
      },
      {
        "text": "出院日期",
        "width": 120,
        "resizable": true,
        "visible": true
      }
    ]
  },
  {
    "text": "备注",
    "width": 230
  }
]

单元格的渲染方式

单元格的显示内容通过以下方式来展示的。
1. 如果存在render，那么通过一个组件来展示当前单元格的内容。 2. 是否为超链接单元格，如果是，安装超链接的方式展示 3. 是否存在formatter，如果有，根据filed传入值给这个函数，返回的内容显示在单元格内，如果filed是空，那么传入当前行的数据对象。和这个关联的属性是escapeHTML，如果是true,那么按照html的格式展示内容 4. 通过field获取内容，以字符串的方式显示在单元格内。