Я хотел бы иметь сетку с множественным выбором и флажками, и я хотел бы привязать выбор к магазину. Пример на Сетка с множественным выбором показывает, что это возможно. Однако у меня это, похоже, не работает.

Ниже приведен модифицированный код из примера, который не работает:

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
        }}

Но этот способ не устанавливает флажки

0
Pavel 8 Дек 2020 в 02:17

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);
     }
  }}
/>
  
0
Marko 10 Дек 2020 в 16:13