jQWidgets jqxGrid自动填充属性

以下是关于“jQWidgets jqxGrid自动填充属性”的完整攻略，包含两个示例说明：

简介

jqxGrid 控件的自动填充属性可以在用户输入时自动填充单元格。自动填充属性可以应用于整个列或特定单元格。jqxGrid 控件的自动填充属性包括 autoComplete 和 autoCompleteSettings。autoComplete 属性用于启用或禁用自动填充，autoCompleteSettings 属性用于配置自动填充的设置。

完整攻略

下面是 jqxGrid 控件自动填充属性的完整攻略：

1. 启用自动填充

$("#grid").jqxGrid({
    columns: [
        { text: 'ID', datafield: 'id' },
        { text: 'Name', datafield: 'name', columntype: 'textbox', 
          cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
              return '<div style="margin-top: 6px;">' + value + '</div>';
          },
          width: 200, 
          autoCellHeight: false, 
          autoComplete: true, 
          autoCompleteSettings: { 
              autoDropDownHeight: true, 
              searchMode: 'containsignorecase', 
              minLength: 1 
          }
        },
        { text: 'Age', datafield: 'age', columntype: 'numberinput', width: 100 }
    ],
    width: '100%',
    height: 200,
    source: dataAdapter
});

在上述代码中，我们在 Name 列中启用了自动填充属性。autoComplete 属性设置为 true，autoCompleteSettings 属性配置了自动填充的设置，包括 autoDropDownHeight、searchMode 和 minLength。

1. 禁用自动填充

$("#grid").jqxGrid({
    columns: [
        { text: 'ID', datafield: 'id' },
        { text: 'Name', datafield: 'name', columntype: 'textbox', 
          cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
              return '<div style="margin-top: 6px;">' + value + '</div>';
          },
          width: 200, 
          autoCellHeight: false, 
          autoComplete: false
        },
        { text: 'Age', datafield: 'age', columntype: 'numberinput', width: 100 }
    ],
    width: '100%',
    height: 200,
    source: dataAdapter
});

在上述代码中，我们在 Name 列中禁用了自动填充属性。autoComplete 属性设置为 false。

示例

以下两个示例演示如何使用 autoComplete 和 autoCompleteSettings 属性。

示例1

在此示例中，创建了一个 jqxGrid 控件，并在 Name 列中启用了自动填充属性。

<div id="grid"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxGrid 控件
        var data = [
            { id: 1, name: 'John', age: 25 },
            { id: 2, name: 'Jane', age: 30 },
            { id: 3, name: 'Bob', age: 35 },
            { id: 4, name: 'Tom', age: 40 },
            { id: 5, name: 'Jerry', age: 45 }
        ];

        var source = {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'id', type: 'number' },
                { name: 'name', type: 'string' },
                { name: 'age', type: 'number' }
            ]
        };

        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#grid").jqxGrid({
            columns: [
                { text: 'ID', datafield: 'id' },
                { text: 'Name', datafield: 'name', columntype: 'textbox', 
                  cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                      return '<div style="margin-top: 6px;">' + value + '</div>';
                  },
                  width: 200, 
                  autoCellHeight: false, 
                  autoComplete: true, 
                  autoCompleteSettings: { 
                      autoDropDownHeight: true, 
                      searchMode: 'containsignorecase', 
                      minLength: 1 
                  }
                },
                { text: 'Age', datafield: 'age', columntype: 'numberinput', width: 100 }
            ],
            width: '100%',
            height: 200,
            source: dataAdapter
        });
    });
</script>

在上述代码中，我们创建了一个 jqxGrid 控件，并在 Name 列中启用了自动填充属性。

示例2

在此示例中，创建了一个 jqxGrid 控件，并在 Name 列中禁用了自动填充属性。

<div id="grid"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxGrid 控件
        var data = [
            { id: 1, name: 'John', age: 25 },
            { id: 2, name: 'Jane', age: 30 },
            { id: 3, name: 'Bob', age: 35 },
            { id: 4, name: 'Tom', age: 40 },
            { id: 5, name: 'Jerry', age: 45 }
        ];

        var source = {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'id', type: 'number' },
                { name: 'name', type: 'string' },
                { name: 'age', type: 'number' }
            ]
        };

        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#grid").jqxGrid({
            columns: [
                { text: 'ID', datafield: 'id' },
                { text: 'Name', datafield: 'name', columntype: 'textbox', 
                  cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                      return '<div style="margin-top: 6px;">' + value + '</div>';
                  },
                  width: 200, 
                  autoCellHeight: false, 
                  autoComplete: false
                },
                { text: 'Age', datafield: 'age', columntype: 'numberinput', width: 100 }
            ],
            width: '100%',
            height: 200,
            source: dataAdapter
        });
    });
</script>

在上述代码中，我们创建了一个 jqxGrid 控件，并在 Name 列中禁用了自动填充属性。

结语

以上是关于“jQWidgets jqxGrid自动填充属性”的完整攻略，包含自动填充属性的介绍、启用和禁用自动填充的示例。在实际开发中，可以根据需要使用自动填充属性，以提高用户体验。