DevExpress —— dxDataGrid

为什么80%的码农都做不了架构师？>>>

数据网格插件。

包括：dx.web.js，dx.viz-web.js，dx.all.js

模块：ui/data_grid （保留链接）

dxdatagrid是一个小工具，可以代表一个网格形式的本地或远程存储数据。这个工具提供了大量的功能，包括排序，基本的分组，过滤，选择，以及更先进的功能，如状态存储、模板，各种类型的滚动。

您可以使用以下方法之一创建一个小部件。

jQuery

使用 dxDataGrid jQuery 插件。

<div id="gridContainer"></div>

$("#gridContainer").dxDataGrid({
    dataSource: customers,
    columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax']
});

Knockout

添加一个DIV元素和应用的dxdatagrid绑定到该元素。

<div data-bind="dxDataGrid: {
    dataSource: customers,
    columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax']
}"></div>

Angular

添加一个DIV元素和应用DX数据网格指令这个元素。

<div dx-data-grid="{
    dataSource: customers,
    columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax']
}"></div>

注意，devextreme部件需要jQuery和全球化的库链接到您的应用程序。如果你使用的是敲除或角度的方法，淘汰赛或角库也需要。有关创建小部件的详细信息，并与他们一起工作，指的是与小部件的工作。

specify是数据源，为dxDataGrid widget提供数据，dxdatagrid接受两种类型的数据源：对象数组和一个数据源配置对象。要了解更多关于数据绑定在dxdatagrid，指的是数据绑定指南。

开始教程 ：http://js.devexpress.com/Documentation/Tutorial/UI_Widgets/Configure_DataGrid/?version=16_1#Configure_DataGrid

 查看演示：

 观看视频：

配置

本节介绍dxDataGrid小部件的配置选项。

accessKey

指定将焦点集中在小部件元素上的快捷键键。
类型：String
默认值：null
设定快捷键的key值传递给小部件的实际HTML元素的accesskey属性。

activeStateEnabled

一个布尔值，指定与用户进行交互时小部件是否不改变其状态。
类型：Boolean
默认值：false
当显示的指导方针包括部件的工作状态变化的平台上的小部件使用此选项。

allowColumnReordering

指定是否格列可以由用户重新排序。
类型：Boolean
默认值：false

最初，网格列出现在由列数组指定的顺序。当没有指定此阵列，网格列具有相同的顺序从数据源的第一个对象的领域。您可以为用户提供的能力进行重新排序网格列。要启用此功能，设置allowColumnReordering选项设置为true。在此之后，网格列可以通过拖动它们的标题进行重新排序。

一旦启用，所有网格列可以通过拖放和拖放重新排序。如果您需要被重新排序限制特定的列，此列的allowReordering选项设置为false

可以通过切换的复选框来改变允许重新排序列选项的值。然后，尝试通过其标题拖动列，并在需要的地方删除它重新排序网格列

举个栗子：

<div style="height:300px" dx-data-grid="{
        dataSource: employees,
        columns: [
            { dataField: 'TitleOfCourtesy', caption: 'Title' },
            'FirstName',
            'LastName',
            { dataField: 'Title', caption: 'Position', width: 150 },
            { dataField: 'BirthDate', dataType: 'date', format: 'shortDate' },
            { dataField: 'HireDate', dataType: 'date', format: 'shortDate' }
        ],
        paging: { pageSize: 6 },
        bindingOptions: {
            allowColumnReordering: 'checkBoxState'
        }
    }">
</div>

$scope.employees = employees;
$scope.checkBoxState = true;

allowColumnResizing

指定是否格列可以由用户调整。
类型：Boolean
默认值：false

默认情况下，每个网格列的宽度是自动计算的，这取决于部件的容器的宽度和网格列的总数。要在代码中指定一个特定的列的宽度，使用列|宽度选项。您可以允许用户在运行时调整列宽。要启用此功能，设置allowColumnResizing选项设置为true。在这之后，每个网格列可以通过拖动其边框的大小。

一旦启用，列大小调整将允许所有网格列。如果你需要被调整限制特定的列，此列的allowResizing选项设置为false

举个栗子：

dx-data-grid="{
        dataSource: employees,
        columns: [
            { dataField: 'TitleOfCourtesy', caption: 'Title' },
            'FirstName',
            'LastName',
            { dataField: 'Title', caption: 'Position', width: 150 },
            { dataField: 'BirthDate', dataType: 'date', format: 'shortDate' },
            { dataField: 'HireDate', dataType: 'date', format: 'shortDate' }
        ],
        paging: { pageSize: 6 },
        bindingOptions: {
            allowColumnResizing: 'checkBoxState'
        }
    }"

$scope.employees = employees;
$scope.checkBoxState = true;

cacheEnabled

指定是否启用数据缓存。
类型：Boolean
默认值：True

当启用该选项，一旦加载数据被保存到缓存中，然后根据排序，分组，分页等缓存是有帮助的当数据源是非常大的，并采取显著时间来加载执行这种操作时电网使用此高速缓存。

要强制缓存更新，请使用refresh（）方法或重新加载数据源。

考虑禁用此功能，如果您的网格显示当前的数据，你需要始终保持电网最新的。

注：如果您从服务器获取数据，对数据的一些操作可以远程执行，而其他人- 本地。如果执行基本操作（排序，筛选和分页），远程和先进操作（分组和汇总计算）局部，某些行动将迫使dxDataGrid反复查询数据的服务器尽管被启用高速缓存。例如，要全面重新加载来自服务器的高级操作需求数据，以提供正确的结果

cellHintEnabled

使得当用户在使用截断内容的单元格悬停鼠标指针时出现的提示。
类型：Boolean
默认值：True

如果小区的列的宽度变得非常小的小区的内容可以是截断。在这种情况下，当用户在这样的小区悬停鼠标指针，显示含有细胞的值的提示。要禁用电池的提示，假分配给cellHintEnabled选项。

columnAutoWidth

指定网格列的宽度是否依赖于列的内容。
类型：Boolean
默认值：FALSE

当此选项设置为true，每个网格列的宽度最适合举办本专栏的内容。在这种情况下，小部件的容器的宽度将被忽略。只要有一排的含量超过容器的宽度，此设置就可能会导致水平滚动条的出现。在这种情况下，考虑启用列固定。

当此选项设置为false，所有网格列具有相同的宽度，这是使用控件的容器的宽度计算。

如果网格列包含文本，那么该文本可以在超过列宽包裹。要启用自动换行，设置为true的wordWrapEnabled选项

举个栗子：

dx-data-grid="{
        dataSource: orders,
        columns: [
            'OrderID', 'CustomerID', 'EmployeeID',
            { dataField: 'OrderDate', dataType: 'date', format: 'shortDate' },
            { dataField: 'RequiredDate', dataType: 'date', format: 'shortDate' },
            { dataField: 'ShippedDate', dataType: 'date', format: 'shortDate' },
            'ShipVia', 'Freight', 'ShipName', 'ShipAddress', 'ShipCity'
        ],
        paging: { pageSize: 8 },
        bindingOptions: {
            columnAutoWidth: 'checkBoxState'
        }
    }"

$scope.checkBoxState = true;

columnChooser

高级技巧！简单来说，点击图标之后，出现一个弹窗区域，你可以把已经显示在页面上的的列拖动到弹窗区域，该列就被隐藏起来不显示了，把列从弹窗区域拖出来，该列重新显示在表格上
类型：Object

列选择器（columnChooser）是一个网格元素，允许用户隐藏特定的网格列。此元素表示当用户点击图标，或者当showColumnChooser()方法被调用时显示的面板。

使用该功能需要设置 allowHiding选项为true（允许拖动），以便用户可以将其拖到列选择面板。

默认情况下，列选择器（columnChooser）。要启用它，设置columnChooser为true启用该功能。使用该对象的宽度和高度选项，您可以定义列选择面板的大小。

此外，你可以自定义面板显示的文本为空时使用emptyPanelText选项，使用标题选项，在面板的标题中显示的文本

举个栗子：

dx-data-grid="{
        dataSource: books,
        columns: [
            'author', 'title', 'year', 'genre', 'format',
            { dataField: 'price', visible: false },
            { dataField: 'length', visible: false }
        ],
        paging: { pageSize: 7 },
        columnChooser: {
            enabled: true,
            height: 180,
            width: 400,
            emptyPanelText: 'A place to hide the columns'
        }
    }"

emptyPanelText

指定当它不包含任何列的列选择面板中显示的文本。
类型：String
默认值：'这里拖动一列隐藏它'(此处翻译如此)
举例说明：

columnChooser: {
            enabled: true,
            emptyPanelText: 'A place to hide the columns'
        }

enabled

指定用户是否可以调用列选择。
类型：Boolean
默认值：FALSE
当此选项设置为true，用户可以通过点击在网格的右上角列选择。否则，这个按钮是隐藏的，但列选择仍然可以从代码中使用showColumnChooser()方法调用

举个栗子：

bindingOptions: {  'columnChooser.enabled': 'checkBoxState'}

$scope.checkBoxState = true;

height

指定列选择面板的高度。
类型：Number
默认值：260

举个栗子：

columnChooser: {
            enabled: true,
            height: 150
        }

mode

指定终端用户如何选择列。

类型：String
默认值：'dragAndDrop'
Accepted Values: 'dragAndDrop' | 'select'

在 dragAndDrop 模式，用户拖动列标题栏选择隐藏。在 select 模式，用户选择使用复选框中的列选择列标题。在这两种模式，对应的字段是否出现/消失在网格中。

当在启用触摸的设备上显示dxDataGrid，它是使用 select 模式更方便。然而，在鼠标配备的客户，两者都是适合的。
好吧，API中确实是这么写的，虽然我尝试了一下两种模式，并没有发现什么太大的差别。（Q A Q）

举个栗子：

bindingOptions: {
        'columnChooser.mode': 'selectedMode'
            }

title

指定列选择面板的标题显示的文本。
类型：String
默认值：“列选择”

举个栗子：

columnChooser: {
            enabled: true,
            title: 'Choose a Column'
        }

width

指定列选择器面板的宽度。
类型：Number
默认值：250

举个栗子：

columnChooser: {
            enabled: true,
            width: 400
        }

columnFixing

指定列固定选项。
类型：Object

当总列宽度比网格的容器的宽度更大，会出现水平滚动。这可能会发生在以下情况中：

• 当所有列都有一个指定的宽度;
• 当表格的columnAutoWidth选项设置为false。

如果您需要特定的列在屏幕上显示，无论进行滚动，设置columnFixing|启用选项设置为true。在这种情况下，对于其中固定选项设置为真列将被固定到网格的边缘。例如，命令栏，包含复选框的人选择行或链接保存/删除行，因为他们的固定选项设置为true，将其固定。

您可以设定网格无边缘。要指定所需的边缘，使用列的fixedPosition选项

查看栗子：点击查看

enabled

表示是否列固定启用。
类型：Boolean
默认值：FALSE

当此选项设置为true，对于其中固定选项设置为true的列将被固定到网格的边缘。边缘是由列的fixedPosition选项中指定。此外，列上下文菜单将与柱延长fixing-related的命令使最终用户能够在运行时修复列。

注：此选项会自动设置为true时，至少有一个列具有固定选项设置为true

texts

包含指定的列标题的上下文菜单固定柱相关命令文本选项。
类型：Object
使用这些选项来为本地表格提供自定义列固定宽度

columnHidingEnabled （响应式布局）

指定窗口小部件是否应隐藏列以适应屏幕或容器的尺寸。
类型：Boolean
默认值：FALSE

在您的应用程序显示dxDataGrid，您可能需要使用不同的屏幕大小不同的布局。虽然台式电脑显示器提供了足够的空间来显示所有的列，手机屏幕没有。在这种情况下，您可以启用窗口小部件自动隐藏某些列，如果他们不适合屏幕大小。为了这个目的，分配真正的columnHidingEnabled选项。隐藏的列的信息仍然是可找到的。

也可以看看

• hidingPriority - 决定列先隐藏其中。
• onAdaptiveDetailRowPreparing - 允许您自定义自适应详细信息行

视频教程：点击查看

columns[]

网格列的数组。
类型：Array
缺省值：undefined

默认情况下，对于一个数据源对象的每个字段中创建一列，但在大多数情况下，它是多余的。要指定一组在网格中创建列，分配一个数组，指定这些列的列选项。每个网格列此数组中含有的列设置一个对象或该列绑定到数据源字段表示。关于指定网格列的详细信息，在指定网格列文章中给出。

列选项定义表格列的行为和外观。其中的其他功能允许您控制使用allowSorting和sortOrder选项列值的排序，应用过滤器使用allowFiltering和filterOperations选项网格记录，并使用allowGrouping和对groupIndex选项组网格记录。此外，您可以更改使用相应的选项中列的知名度和宽度。

要获取或设置在运行时列一个选项或多个选项，使用columnOption方法，并附上所需参数

查看栗子：

视频教程：

alignment

指定列单元格中的内容一致。
类型：String
缺省值：undefined
Accepted Values: undefined | 'left' | 'center' | 'right'

列内容默认取向取决于由该列所表示的数据的类型。下表说明了对于不同的数据类型的列对准的默认值

dataType	alignment
'number'	'right'
'boolean'	'center'
'string'	'left'
'date'	'left'
'guid'	'left'

来看栗子：

<div ng-controller="demoController">
    <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
        dataSource: employees,
        columns: columns
    }"></div>
</div>

$scope.columns = [
        { dataField: 'TitleOfCourtesy', caption: 'Title' },
        { dataField: 'FirstName', alignment: 'center' },
        { dataField: 'LastName', alignment: 'center' },
        { dataField: 'Title', caption: 'Position', width: 150 },
        { dataField: 'BirthDate', dataType: 'date', format: 'shortDate' },
        { dataField: 'HireDate', dataType: 'date', format: 'shortDate' }
    ];

allowEditing

指定是否在一列中的值可以在运行时被编辑。设置这个选项使得只有当编辑一格启用感。
类型：Boolean
默认值：True
如果allowEditing选项设置为true，在该列中的值可以由最终用户进行编辑。如果将此选项设置为false，这些值不能编辑。

注：如果在一列中的值是使用calculateCellValue选项计算习惯，它们不能在运行时编辑。

也可以看看
有关如何指定dxDataGrid编辑设置，请参阅Editing in UI主题的更多信息

举个栗子：

dx-data-grid="{
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        editing: { allowUpdating: true }
    }"

allowFiltering

指定列是否可用于过滤格记录。设置这个选项只当过滤器的行和列标题过滤可见。

类型：Boolean
默认值：True
如果allowFiltering选项设置为true的列，对应于此列的筛选行的单元格被启用。用户可以使用该小区由列的值，以过滤格记录。通过过滤特定值的列标题滤波器提供变得可用。

也可以看看
有关如何指定dxDataGrid过滤设置，请参阅 Filtering in UI主题的更多信息

举个栗子：

$scope.columns = [
        { dataField: 'OrderID', width: 100, filterOperations: [], selectedFilterOperation: '=' },
        { dataField: 'CustomerID', allowFiltering: false },
        { dataField: 'OrderDate', dataType: 'date' },
        { dataField: 'ShippedDate', dataType: 'date' },
        'ShipName',
        { dataField: 'ShipCountry', caption: 'Ship To' }
    ];

allowFixing

指定列是否可以被固定到由最终用户的网格边缘。设置这个选项只在columnFixing启用选项设置为true的时候生效。

类型：Boolean
默认值：True

如果allowFixing选项设置为true为列，在列的上下文菜单的固定相关的命令都可用。从上下文菜单中隐藏这些命令，该列的allowFixing选项设置为false

allowGrouping

指定在此列的值，用户可以组数据。启用时分组仅适用。

类型：Boolean
默认值：True

当分组在小部件已启用，用户可以按任何列的值分组。从被用于分组禁止特定列，设置该栏allowGrouping选项为false。

注：在与 calculated values一列时，此选项默认设置为false。

也可以看看

• grouping | contextMenuEnabled - 使用户能够使用上下文菜单组的数据。
• groupPanel | visible - 使用户能够使用组面板组数据。
• groupPanel | allowColumnDragging - 允许使用拖放和拖放从组面板移到列标题/用户。
• columns[] | groupIndex - 指定初始分组

举个栗子：

$scope.columns = [
        { dataField: 'OrderID', allowGrouping: false },
        'CustomerID',
        { dataField: 'OrderDate', dataType: 'date', allowGrouping: false },
        { dataField: 'ShippedDate', dataType: 'date' },
        'ShipName',
        { dataField: 'ShipCountry', caption: 'Ship To' }
    ];

allowHeaderFiltering

指定是否利用其头按该列允许过滤。

类型：Boolean
默认值：True

allowHiding

指定是否列可以由用户隐藏。设置这个选项使得只有当列选择可见的感觉。

类型：Boolean
默认值：True

如果allowHiding选项设置为true为列，用户可以到列选择面板来隐藏其标题拖动此列。如果此选项设置为false，该列不能被用户隐藏。

allowReordering

指定是否一个特定的列可以在列重新排序一起使用。设置这个选项使得只有当