data_grid

表格。Type 为 data_grid。

Option.Grid 里的小写键是 dxDataGrid 的配置，常用的有 columns、keyExpr、editing、toolbar。下面只写平台加上的键。

最小例子

javascript

{
  Type: "data_grid",
  Id: "orders",
  Option: {
    Component: {
      AutoLoad: true,
      LoadSql: { sql_id: 100 },
      UpdateRowSql: { sql_id: 101 },
      IdField: "id"
    },
    Toolbar: {
      Items: { Reload: true, Save: true, AddRow: true }
    },
    Grid: {
      keyExpr: "id",
      columns: [
        { dataField: "code", caption: "单号" },
        { dataField: "amount", caption: "金额", ValidRequired: true },
        { dataField: "owner_id", visible: false, KeepData: true }
      ]
    }
  }
}

Component

键	说明
`AutoLoad`	打开页面后是否立刻跑 `LoadSql`
`ReadOnly`	整表只读
`Width` / `Height`	组件宽高
`LoadSql`	查询。对象里的 `sql_id` 指向 `sys.page_sql`
`InsertRowSql`	插入一行
`UpdateRowSql`	更新一行
`DeleteRowSql`	删除一行
`InsertRowWithIdSql`	先插入空行并取回 id
`AfterSaveSql`	保存之后再执行的 SQL
`AfterInsertRow`	插入之后执行的 `"js:"`
`AfterUpdateRow`	更新之后执行的 `"js:"`
`AfterDeleteRow`	删除之后执行的 `"js:"`
`NewSql`	工具栏「新建」用的 SQL
`NewRowsSql`	一次产生多行时用的 SQL
`CloneSql`	克隆当前单据
`CloneRowsSql`	克隆行
`DeleteSql`	工具栏删除单据。删表格里的一行用 `DeleteRowSql`
`IdField`	主键字段名
`SeqField`	顺序字段，上移下移时读写它
`UniqueField`	用来判断行是否重复的字段
`RowDefaults`	新行的默认值
`DataPool`	命名好的数据集。列上用 `FromPool` 引用
`Init`	初始值。`Init.MainSelect` 是主选择框的初始值，可以写 `"js:"`
`RowUnselectableExpr`	哪些行不能选，写 `"js:"`
`RememberSelection`	记住当前选择
`AppendBlankColumn`	在最后补一列空白，避免最后一列被拉得太宽
`DynamicColumns`	动态列。里面是 `Column`（列定义）和 `LoadSql`
`Import`	导入。里面是 `Sql`、`Batch`、`ChunkSize`
`Auth`	这一页权限行为的开关

ActionAuthTriState、ColumnAuthTriState、FormFieldAuthTriState，以及 SyncActionsOnSelect、SyncColumnsOnSelect、SyncFormFieldsOnSelect 是权限配置页自己用的。业务页不要写。

LoadSql 这类对象里，sql_id 和其它参数平级：

javascript

LoadSql: { sql_id: 100, status: "未关闭" }

Items 的键是按钮名，值是 true / false，或一段工具栏项配置。MoreItems 是自定义按钮数组。

按钮名	作用
`MainSelect`	主选择框，选中的值会作为后续 SQL 的参数
`New`	新建
`Clone`	克隆
`Delete`	删除单据
`Send`	发送单据
`Save`	保存
`Reload`	重新加载
`Filter` / `Filter2`	两个筛选框
`Date`	单个日期
`StartDate` / `EndDate`	日期范围
`StartTime` / `EndTime`	时间范围
`AddRow`	加一行
`AddRowsBatch`	批量加行
`AddFolder`	加一个分组行
`CloneFrom`	从选择器克隆过来
`CloneRows`	克隆选中行
`ReplaceRow`	替换选中行
`DeleteRow`	删除选中行
`MoveUp` / `MoveDown`	上移、下移
`ExpandAll` / `CollapseAll`	全部展开、全部收起
`Import` / `Export`	导入、导出
`WrapText`	单元格换行
`ToggleHeaderRow`	显示或隐藏标题行
`ToggleFilterRow`	显示或隐藏过滤行
`ResetLayout`	恢复列宽、列顺序

工具栏项上还可以写：

键	说明
`LoadWhenEmpty`	选择框还是空的时候也允许加载
`DeleteNow`	删除时立刻提交，不等到点保存
`OperationIndex`	点这个按钮时执行 `Operations` 里的第几项
`CallMethod`	调用组件上的方法名

DevExtreme 自带的工具栏项保持小写，例如 searchPanel、columnChooserButton。

Grid 上的平台键

这些键写在 Option.Grid 上，和 columns 平级：

键	说明
`VerticalAlign`	单元格垂直对齐
`MergeBaseField`	合并单元格时，用哪个字段判断是不是同一组
`StateList`	列状态相关的列表

列上的平台键

写在 Grid.columns[] 的某一列上，和 dataField、caption 平级。dataField、caption、visible、dataType、lookup 都是 DevExtreme 的键。

键	说明
`KeepData`	列隐藏后仍把字段留在结果里。见页面 JSON
`Default`	新行该列的默认值
`Wrap`	该列换行
`Help`	列头帮助文字
`MergeCells`	按 `MergeBaseField` 合并这一列
`ValidRequired`	保存前必填
`ValidExpr`	保存前的校验表达式
`ValidSkipOnSave`	保存时跳过这一列的校验
`BoolAsNum`	勾选框在界面上是布尔，入库写成 0 和 1

列的 lookup 里可以用 LoadSql 填充下拉数据，同级先放 dataSource: []，再用 InitSql。

和按钮配套的其它块

这些块和 Component 平级，用来描述「点某个按钮之后弹出什么、跑哪条 SQL」。

块	里面的键
`Operations`	`Name`、`Version`、`Popup`、`Sql`、`RunJs`、`GotoPage`、`ReloadAfter`、`Grid`
`Operations[].Popup`	`Form`、`DisableOk`、`DisableCancel`、`When`
`Operations[].GotoPage`	`PageId`、`Title`、`Params`、`When`
`Pickers`	选择器。`Name`、`LoadSql`、`Grid`、`Popup`、`Fetch`
`Pickers[].Fetch`	`Sql`、`FromField`、`ToParam`、`UniqueField`
`AddRowByForm`	`Enabled`、`OperationIndex`、`SaveNow`、`RowIterator`
`AddRowByPicker` / `AddRowsBatchByPicker` / `ReplaceRowByPicker` / `CloneByPicker`	`Enabled`、`PickerIndex`、`WrapAsFolders`、`FolderNameField`

When、RunJs、RowIterator 都可以写 "js:"。

data_grid ​

最小例子 ​

Component ​

Toolbar ​

Grid 上的平台键 ​

列上的平台键 ​