VisActor / VisActor/VTable

[Feature] 当点击合并Checkbox的单元格时,能够整合勾选状态。

Open
#3,414 2 comments 0 reactions 1 assignee View on GitHub

@Rui-Sun is already working on this.

Since Feb 13, 2025.

feature
Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

What problem does this feature solve?

目的:

  • 在点击合并Checkbox单元格的空白处时,能够有和点击Checkbox一样的效果

当前做法:

  • 在CLICK_CELL事件中,获取当前单元格的勾选状态getCellCheckboxState,然后通过setCellCheckboxState设置相反的状态

在以下代码中出现问题:

  • 点击红色框里的区域时,能勾选Checkbox。再点击蓝色区域时,无法取消勾选Checkbox(图1)。分析原因:点击红色区域后实际只修改了bloggerId为3的那行的勾选状态(图2)。
  • 当主动调用setCellCheckboxState的方式把bloggerId为4和5的两行设置为和bloggerId为3的相同的CheckboxState时,发现不生效,对应的状态依然是true, undefined, undefined

期望:
1、当调用setCellCheckboxState时,如果命中的是合并的单元格,能否把Checkbox的状态都统一设置?
2、或者作者有什么其他的更好的解决方法😁

图1:
Image

图2:
Image

代码如下:

const VGroup = VTable.VGroup;
const VText = VTable.VText;
const VImage = VTable.VImage;
const VTag = VTable.VTag;
const VRadio = VTable.VRadio;
const VCheckBox = VTable.VCheckBox;

const option = {
  container: document.getElementById('container'),
  columns: [
    {
      field: 'serial',
      title: '选择',
      width: 200,
      minWidth: 80,
      disableColumnResize: true,
      cellType: 'checkbox',
      headerType: 'checkbox',
      mergeCell: true,
    },
    {
      field: 'bloggerId',
      title: 'bloggerId',
      width: 150,
    },
    {
      field: 'bloggerName',
      title: 'bloggerName',
      width: 330
    },
    {
      field: 'fansCount',
      title: 'fansCount',
      fieldFormat(rec) {
        return rec.fansCount + 'w';
      },
      style: {
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'bold'
      }
    },
    {
      field: 'worksCount',
      title: 'worksCount',
      style: {
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'bold'
      }
    },
    {
      field: 'viewCount',
      title: 'viewCount',
      fieldFormat(rec) {
        return rec.fansCount + 'w';
      },
      style: {
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'bold'
      }
    },
    {
      field: 'viewCount',
      title: 'viewCount',
      fieldFormat(rec) {
        return rec.fansCount + 'w';
      },
      style: {
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'bold'
      }
    },
    {
      field: '',
      title: 'operation',
      width: 100,
      icon: ['favorite', 'message']
    }
  ],
  records: [
    {
      bloggerId: 1,
      bloggerName: 'Virtual Anchor Xiaohua',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
      introduction:
        'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
      fansCount: 400,
      worksCount: 10,
      viewCount: 5,
      city: 'Dream City',
      tags: ['game', 'anime', 'food'],
      serial: 1
    },
    {
      bloggerId: 2,
      bloggerName: 'Virtual anchor little wolf',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
      introduction:
        'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
      fansCount: 800,
      worksCount: 20,
      viewCount: 15,
      city: 'City of Music',
      tags: ['music', 'travel', 'photography'],
      serial: 1
    },
    {
      bloggerId: 3,
      bloggerName: 'Virtual anchor bunny',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
      introduction:
        'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
      fansCount: 600,
      worksCount: 15,
      viewCount: 10,
      city: 'City of Art',
      tags: ['painting', 'handmade', 'beauty makeup'],
      serial: 2
    },
    {
      bloggerId: 4,
      bloggerName: 'Virtual anchor kitten',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
      introduction:
        'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
      fansCount: 1000,
      worksCount: 30,
      viewCount: 20,
      city: 'Health City',
      tags: ['dance', 'fitness', 'cooking'],
      serial: 2
    },
    {
      bloggerId: 5,
      bloggerName: 'Virtual anchor Bear',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
      introduction:
        'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
      fansCount: 1200,
      worksCount: 25,
      viewCount: 18,
      city: 'City of Wisdom',
      tags: ['Movie', 'Literature'],
      serial: 2
    },
    {
      bloggerId: 6,
      bloggerName: 'Virtual anchor bird',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
      introduction:
        'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
      fansCount: 900,
      worksCount: 12,
      viewCount: 8,
      city: 'Happy City',
      tags: ['music', 'performance', 'variety'],
      serial: 3
    },
  ],
  defaultRowHeight: 40,
};

const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
window.tableInstance = instance;

const {
  CHECKBOX_STATE_CHANGE,
  CLICK_CELL
} = VTable.ListTable.EVENT_TYPE;

// 多选框状态改变
instance.on(CHECKBOX_STATE_CHANGE, (...args) => {
  console.log(CHECKBOX_STATE_CHANGE, args)
  const checkboxState = instance.getCheckboxState('serial')
  console.log('[VTable] 获取多选框状态 =>', checkboxState);
});

//点击cell
instance.on(CLICK_CELL, (...args) =>  {
  console.log(CLICK_CELL, args)
  const { originData, target, field, col, row } = args[0]
  if (target && target instanceof VTable.CustomLayout.CheckBox) {
    // 点击复选框, 不进行任何操作
    return
  }
  // 点击的是选择框列的空白处
  if (originData && col === 0 && field === 'serial') {
    // 选择框列
    const state = instance.getCellCheckboxState(col, row)
    // 状态取反
    instance.setCellCheckboxState(col, row, !state)
  }
});
What does the proposed API look like?

如上。

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.