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

Question

我想要一个带有多个选择和复选框的网格，我想将选择绑定到商店。带有多项选择的网格中的示例表明这是可能的。但是，它似乎对我不起作用。

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

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={{
          keyField: "fullName",
          type: KeySelection,
          bind: "$page.selection",
          multiple: true
        }}

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

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);
     }
  }}
/>