カスタムページテーブル結合セル

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

このケースは三者開発者「ページ一」から来ました。

1. 使用シーン

この例では、カスタムページでセルを結合する方法を紹介します。

2.機能を実現する

2.1データシートの作成

2.2カスタムページの作成

2.3ページ機能の設定

(1) データソースと使用する変数を設定する

参考ドキュメント:条件に基づいてフォームインスタンスの詳細リストを検索します

インタフェース構成図:

(2) 取得データをテーブルに表示する

Formuuidの値を変更することに注意してください。

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考：https://www.yuque.com/yida/support/ocmxyv#OCEXd
  // document.title = window.loginUser.userName + ' | 宜搭';
  this.fetchData();
}

const formUuid = 'FORM-XXXXXXXX'; // 产品检验表 formUuid

// 获取检验表数据
export function fetchData() {
  const { pageSize, currentPage, isMergeCell } = this.state;
  this.setState({
    loading: true
  });
  this.dataSourceMap.getData.load({
    formUuid,
    pageSize,
    currentPage,
  }).then(res => {
    const { data, currentPage, totalCount } = res;
    const result = (data || []).map(item => {
      const { formData, formInstId } = item;
      return {
        checkedYear: this.utils.formatter('date', formData.dateField_lf0qgq1f, 'YYYY'), // 检验年度
        productName: formData.radioField_lf0qgq1m, // 品名
        batch: formData.radioField_lf0qgq1j, // 批次
        checkedUser: formData.employeeField_lf0qgq1h, // 检验员
        isPass: formData.radioField_lf0qgq1k, // 是否合格
        formInstId, // 实例id
      }
    });
    this.setState({
      tableData: {
        data: isMergeCell ? this.calculateRowSpan(result, cellMergeKeys) : result,
        currentPage,
        totalCount,
      },
      loading: false
    });
  }).catch(error => {
    // 错误请求时的处理
    this.utils.toast({
      title: error.message,
      type: 'error'
    });
    this.setState({
      loading: false
    });
  })
}

(3) メンバーフィールドのフォーマット

次の関数をバインドします

// 成员自定义渲染
export function renderUserCell(value, index, rowData) {
  return <span>{value}</span>;
}

(4) 詳細操作列設定

次の関数をバインドします

// 详情 
export function onDetail(rowData) {
  this.utils.router.push(`${window.location.origin}/${window.pageConfig.appType || window.g_config.appKey}/formDetail/${formUuid}`, { formInstId: rowData.formInstId }, true, true);
}

(5) ページング設定

次の関数をバインドします

// 分页
export function onFetchData(params) {
  // 如果是搜索的话翻页重置到 1
  if (params.from === 'search') {
    params.currentPage = 1;
  };

  this.setState({
    pageSize: params.pageSize,
    currentPage: params.currentPage
  });

  this.fetchData();
}

(6) 結合セル設定

次の関数をバインドします

// 表格的单元格分割与合并 cellProps 事件
// 事件所在位置：表格 => 风格和样式 => 单元格分割合并
export function cellProps(rowIndex, colIndex, dataIndex, record) {
  if (!record.rowSpan) { return };
  if (cellMergeKeys.includes(dataIndex)) {
    return { rowSpan: record.rowSpan[dataIndex] };
  };
}

(7) 下記の結合セル処理関数をページjsにコピーする

// 定义一个函数来计算每个字段的 rowSpan 值 
// tableData 为传入的数据源数据，格式为数组
// cellMergeKeys 就是要合并的单元格字段，格式为数组
export function calculateRowSpan(tableData, cellMergeKeys) {
  const data = tableData.slice(0);
  let valueList = [];
  cellMergeKeys.forEach((key, index) => {
    let n = 0;
    for (let i = 0; i < data.length; i++) {
      valueList[i] = valueList[i] && `${valueList[i]}_${data[i][key]}` || data[i][key];
      if (i === 0 || valueList[i] !== valueList[i - 1]) {
        n = i;
        if (!data[i].rowSpan) data[i].rowSpan = {};
        data[i].rowSpan[key] = 1;
      } else {
        if (!data[i].rowSpan) data[i].rowSpan = {};
        data[i].rowSpan[key] = 0;
        data[n].rowSpan[key]++;
      }
    }
  });
  return data;
}

(8) 結合フィールドの設定

フィールドは、表のタイトルの左から右の順序でなければなりません。

// cellMergeKeys 为要合并单元格的字段
// 特别注意，这些字段不是乱传的，必须按表格字段从左到右的顺序
// 因为合并顺序是从左到右
const cellMergeKeys = ['checkedYear', 'productName', 'batch', 'isPass', 'checkedUser'];

3.効果を実現する

4.オンラインで試してみます

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_UTK63IM281XRSXLNOJUV&from=yuque_subject