是否可以将选择绑定到具有多个 PropertySelection 的数组

Question

我想要一个包含多个 selection 和复选框的网格，我想将 selection 绑定到商店。 Grid with Multiple Selection 中的示例表明这是可能的。但是，它似乎对我不起作用。

下面是示例中的修改代码，它不起作用：

class PageController extends Controller {
 init() {super.init();

 this.store.set(
   "$page.records",
    Array.from({ length: 10 }).map(() => ({
    fullName: casual.full_name,
    selected: false})));
 }
}

export const App = (
  <cx>
    <div controller={PageController}>
      <Grid
        records:bind="$page.records"
        columns={[
          {
            field: "selected",
            style: "width: 1px",
            items: (
              <cx>
                <Checkbox value:bind="$record.selected" unfocusable />
              </cx>
            )
          },
          { header: "Name", field: "fullName", sortable: true }
        ]}
        selection={{
          type: PropertySelection,
          bind: "$page.selection",
          multiple: true
        }}
        sorters:bind="$page.sorters"
      />
      <Repeater records-bind="$page.selection">
        <Text value={computable("$record", r => JSON.stringify(r))} />
        <br />
      </Repeater>
    </div>
  </cx>
);

如果我按以下方式修改 selection，则绑定有效：

 selection={{
          keyField: "fullName",
          type: KeySelection,
          bind: "$page.selection",
          multiple: true
        }}

但是，这种方式不会select复选框

Answer 1

当您使用 PropertySelection 时，有关选择的信息存储在网格记录中。这就是复选框起作用的原因。

如果您想使用 KeySelection，您必须覆盖复选框值才能从选择对象读取和写入数据。

<Checkbox 
  value={{
    get: computable('$record.id','$page.selection', (id, selection) => selection?.indexOf(id) >= 0),
    set: (value, { store }) => {
        let id = store.get('$record.id');
        if (value) 
          store.update('$page.selection', selection => [...selection, id]);
        else
          store.update('$page.selection', selection => selection.filter(r => r != id);
     }
  }}
/>

是否可以将选择绑定到具有多个 PropertySelection 的数组

Is it possible to bind a selection to an array with multiple PropertySelection

cxjs