博客

jQWidgets jqxTreeGrid editSettings属性

  • Post category:jquery

jqxTreeGrid 是 jQWidgets 提供的一个树形表格组件，它可以展示层级结构的数据，并支持多种交互操作。jqxTreeGrid 有一个 editSettings 属性，用于配置编辑相关的设置。下面是 editSettings 属性的详细讲解示例说明：

editSettings

editSettings 属性用于编辑相关的设置。它可以接受一个对象作为参数，包含以下属性：

  • saveOnPageChange：是否在分页时保存修改，默认为 false。
  • saveOnBlur：是否在失去焦点时保存修改，默认为 true。
  • saveOnSelectionChange：是否在选择行时保存修改，默认为 false。
  • cancelOnEsc：是否在按下 Esc 键时取消修改，默认为 true。
  • editSingleCell：是否只允许编辑单元格，默认为 false。
  • editOnDoubleClick：是否在双击单元格时开始编辑，默认为 true。
  • editOnF2：是否在按下 F2 键时开始编辑，默认为 true。
  • editOnEnter：是否在按下 Enter 键时开始编辑，默认为 false。
  • editOnTab：是否在按下 Tab 键时开始编辑，默认为 false。
  • validationDelay：验证延迟时间，单位为毫秒，默认为 500。

示例 1

下面是一个示例，展示如何使用 editSettings 属性配置编辑相关的设置：

$('#treeGrid').jqxTreeGrid({
    source: data,
    columns: [
        { text: 'ID', dataField: 'id', width: 100 },
        { text: '名称', dataField: 'name', width: 200 },
        { text: '数量', dataField: 'quantity', width: 100 }
    ],
    editSettings: {
        saveOnBlur: false,
        editOnDoubleClick: false,
        editOnF2: false,
        editOnEnter: true,
        editOnTab: true
    }
});

在这个示例中，我们首先创建了一个 jqxTreeGrid 组件，并设置 source 属性为一个数据源。然后，我们定义了三个列，并设置 editSettings 属性，禁用了失去焦点、双击和 F2 键开始编辑，启用了按下 Enter 和 Tab 键开始编辑。

示例 2

下面是另一个示例，展示如何使用 editSettings 属性配置验证延迟时间：

$('#treeGrid').jqxTreeGrid({
    source: data,
    columns: [
        { text: 'ID', dataField: 'id', width: 100 },
        { text: '名称', dataField: 'name', width: 200 },
        { text: '数量', dataField: 'quantity', width: 100 }
    ],
    editSettings: {
        validationDelay: 1000
    }
});

在这个示例中，我们同样创建了一个 jqxTreeGrid 组件，并设置 source 属性为一个数据源。然后，我们定义了三个列，并设置 editSettings 属性，将验证延迟时间设置为 1000 毫秒。

以上就是 jqxTreeGrid 组件的 editSettings 属性的详细讲解和示例说明。

Tags: