可以就地编辑的表格

机器翻译

本页由英文原文机器翻译而来，尚未经过母语审校，欢迎在 GitHub 上提出修改。内容如有出入，以英文原文为准。

任务： 让用户不打开编辑页面就能修改表格中的一个值。

yaml

# Recipe: a table whose cells are edited in place, with the schema as the rule.
paths:
  components: ./components
  migrations: ./migrations

datasources:
  db:
    driver: sqlite
    database: ./data/stock.db

sql

CREATE TABLE items (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(40) NOT NULL,
    shelf TEXT NOT NULL CHECK (shelf IN ('A', 'B', 'C')),
    quantity INTEGER NOT NULL DEFAULT 0
);

INSERT INTO items (name, shelf, quantity) VALUES ('Bolts', 'A', 120), ('Nuts', 'B', 80), ('Washers', 'A', 45);

edit="items" 让每个单元格成为一个保存某一行某一列的小表单。数据表的结构就是规则：因为 CHECK，shelf 必须是 A、B 或 C，被拒绝的值会以错误提示消息（flash）返回。带 edit="false" 的列只显示、不编辑，强行提交的请求会得到 400。 sort="true" 在表头上加上排序链接。

xml

<q:component name="Stock">
  <q:query name="items" datasource="db" sortable="true">
    SELECT id, name, shelf, quantity FROM items ORDER BY id
  </q:query>

  <ui:window title="Stock">
    <ui:vbox gap="md" padding="lg">
      <q:if condition="flash">
        <ui:alert variant="{flashType == 'error' and 'danger' or 'success'}">{flash}</ui:alert>
      </q:if>
      <!-- edit="items": each cell is a small form that saves one column of
           one row, checked against the table's schema. No action to write. -->
      <ui:table source="{items}" sort="true" edit="items" datasource="db">
        <ui:column key="name" label="Item" edit="false" />
        <ui:column key="shelf" label="Shelf" />
        <ui:column key="quantity" label="Quantity" align="right" />
      </ui:table>
    </ui:vbox>
  </ui:window>
</q:component>

测试像浏览器一样，用 __edit 动作编辑一个单元格：

xml

<q:test name="the table shows the rows and the column labels" page="/">
  <test:visit />
  <test:expect text="Item" />
  <test:expect text="Washers" />
</q:test>

<q:test name="a cell edit saves one column of one row" page="/">
  <test:submit action="__edit" __table="items" __key="2" __column="quantity" value="75" />
  <test:expect redirect="/" flash="Saved: quantity" />
  <test:expect table="items" count="1" where="id = 2 AND quantity = 75 AND name = 'Nuts'" />
</q:test>

<q:test name="a value the schema refuses is not saved" page="/">
  <test:submit action="__edit" __table="items" __key="1" __column="shelf" value="Z" />
  <test:expect table="items" count="1" where="id = 1 AND shelf = 'A'" />
  <test:expect var="flashType" value="error" />
  <test:expect flash="Parameter 'value' must be one of: A, B, C" />
</q:test>

<q:test name="a column with edit=false cannot be changed" page="/">
  <test:submit action="__edit" __table="items" __key="1" __column="name" value="Screws" />
  <test:expect status="400" text="items.name is not editable on this page." />
  <test:expect table="items" count="1" where="id = 1 AND name = 'Bolts'" />
</q:test>

<q:test name="a header sorts the rows" page="/">
  <test:visit sort="quantity" dir="asc" />
  <test:expect text="Washers A B C ✓ ✓ Nuts A B C ✓ ✓ Bolts" />
</q:test>

text

tests/stock.test.q
  PASS  the table shows the rows and the column labels
  PASS  a cell edit saves one column of one row
  PASS  a value the schema refuses is not saved
  PASS  a column with edit=false cannot be changed
  PASS  a header sorts the rows
5 passed, 0 failed

参见 UI-5 和 UI-13。

可以就地编辑的表格 ​

可以就地编辑的表格