link之家
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
会开车的滑板 · vue3 axios默认请求超时时间 ...· 3 月前 · |
|
|
逆袭的电梯 · flutter uint8list to ...· 12 月前 · |
|
|
开朗的松鼠 · IIS7.5优化，支持同时10万个请求_叮叮 ...· 1 年前 · |
|
|
健身的显示器 · TypeScript查漏补缺(基础类型)-阿 ...· 1 年前 · |
|
|
失眠的红豆 · 用Spyder写python的时候怎么才能折 ...· 1 年前 · |
包括：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'
$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
指定终端用户如何选择列。
类型：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>
$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
指定是否一个特定的列可以在列重新排序一起使用。设置这个选项使得只有当allowColumnReordering选项设置为真正意义上的。
类型：Boolean
默认值：True
最初，网格列出现在列数组指定的顺序中。当未指定此数组时，网格列与数据源中的第一个对象的字段相同的顺序。用户可以排序列如果allowColumnReordering选项设置为真。如果你需要禁止使用特定的列在排序过程中，将allowreordering选项这一栏的假
举个栗子：
$scope.columns = [
{ dataField: 'author', allowReordering: false },
{ dataField: 'title', allowReordering: false },
{ dataField: 'year', allowReordering: false },
'genre', 'format',
{ dataField: 'price', format: { type: 'currency', precision: 2 } }
allowResizing
指定是否一个特定的列可以由用户调整。设置此选项使只有在allowColumnResizing选项是真正意义上的。
类型：Boolean
默认值：True
默认情况下，每个网格列的宽度是自动计算的，这取决于部件的容器的宽度和网格列的总数。要指定一个特定的列的宽度，使用列的width选项。在运行时，如果allowColumnResizing选项设置为true，用户可以调整列。如果你需要禁止调整为特定的列，此列的allowResizing选项设置为false
举个栗子：
$scope.columns = [
'author',
{ dataField: 'title', width: 220, allowResizing: false },
'year', 'genre', 'format',
{ dataField: 'price', format: { type: 'currency', precision: 2 } }
allowSearch
指定如果列可用于搜索网格的记录。设置这个选项使得只有当搜索面板是可见的感觉。
类型：Boolean
默认值：True
默认情况下，搜索在所有列执行。但是你可以在某些列禁用它。为此，设置allowSearch选项设置为false。
也可以看看
有关如何指定dxDataGrid过滤设置，请参阅 Filtering in UI主题的更多信息
allowSorting
指定是否格记录可以在运行时一个特定的列进行排序。设置此选项使只有在排序方式从无不同的感觉。
类型：Boolean
默认值：True
也可以看看
有关如何在dxDataGrid指定排序设置的详细信息，请参阅UI主题中的排序。
注：在与计算值一列，此选项默认设置为false。
视频教程：
举个栗子：
$scope.columns = [
'OrderID',
{ dataField: 'CustomerID', allowSorting: false },
{ dataField: 'OrderDate', dataType: 'date' },
{ dataField: 'ShippedDate', dataType: 'date' },
{ dataField: 'ShipName', allowSorting: false },
{ dataField: 'ShipCountry', caption: 'Ship To' }
autoExpandGroup
指定组是否出现扩大与否时，记录由一个特定的列进行分组。设置这个选项使得只有当分组被允许此列感。
类型：Boolean
默认值：True
举个栗子：
$scope.columns = [
'author', 'title',
{ dataField: 'year', width: 60 },
'genre',
{ dataField: 'format', autoExpandGroup: false }
calculateCellValue
指定一个返回要显示在一列单元的值的回调函数。
类型：function（rowData）
功能参数：
rowData：Object
由当前网格行表示的数据对象。
返回值：any
被列单元格中显示的值。
默认情况下，列单元格填充了数据字段的值，其中该列相关联。但是，您可以为单元格提供自定义的数据来代替。要做到这一点，实现一个回调函数，并将其分配给列的calculateCellValue 选项。显示网格行时，此函数被调用。
注：如果在一列中的值习惯上计算的，它们不能在运行时编辑。此外，在计算列，排序和分组功能默认情况下禁用。要启用它们，明确设置列的allowSorting和allowGrouping选项设置为true。 当您使用此选项来填充数据，过滤和搜索栏可能无法正常在此列中进行。在这样的情况下，实现了calculateFilterExpression功能。
注：要调用默认的行为，调用 this.defaultCalculateCellValue(rowData) 函数返回它的结果
举个栗子：
$scope.columns = [
'CustomerID',
caption: 'Employee',
width: 170,
calculateCellValue: function (data) {
var employee = employeesByKey[data.EmployeeID];
return [employee.TitleOfCourtesy, employee.FirstName, employee.LastName].join(' ');
{ dataField: 'OrderDate', dataType: 'date' },
'Freight',
'ShipName',
{ dataField: 'ShipCity', caption: 'Ship To' }
calculateDisplayValue
指定在不在编辑状态时如何获取在单元格中显示的值。
类型：String|function（rowData）
功能参数：
rowData：Object
表示单元格所属的网格行的对象。
返回值：any
将要显示在单元格中的值。
如果网格数据源包含要显示的值，指定所需要的列，此选项的数据字段的值。如果您要显示的值可以使用多个列的值计算，也可以从远程数据源获取，为该选项分配函数
calculateFilterExpression
指定定义习惯计算出的网格过滤器的回调函数。
类型：function（filterValue，selectedFilterOperation，目标）
功能参数：
filtervalue：any
在过滤器行的单元格中键入的文本。
selectedFilterOperation：String
当前选定的过滤操作。
目标：String
标识的地方设置过滤器表达式过滤UI元素的类型。
Possible values:"filterRow", "headerFilter" and "search"
返回值：Array
当你使用calculatecellvalue选项来填充数据列，你都需要搜索calculatefilterexpression回调函数，此操作是必需的，因为这些操作是在数据源对象上执行的，而不是在网格记录上执行的。
该实施函数必须返回以下项目的数组。
- 1.数据源字段或用于网格列提供的实际值的函数。通常，calculateCellValue功能这里传递。
- 2.比较运算符。以下运算符：“=”，“<>”，“>”，“> =”，“<”，“<=”，“between”，“startswith”，"endswith", "contains", "notcontains".
- 3.输入到一个筛选器行单元格的值。将将实际值与此值进行比较。
下面的代码片段演示实施calculateCellValue和calculateFilterExpression功能的一个常见的例子。
$("#gridContainer").dxDataGrid({
// ...
columns: [{
calculateCellValue: function (rowData) {
return rowData.Amount * rowData.Cost;
calculateFilterExpression: function (filterValue, selectedFilterOperation) {
return [this.calculateCellValue, selectedFilterOperation || '=', filterValue];
// ...
}, //...
注：要调用默认的行为，需调用this.defaultCalculate FilterExpression（filterValue，selectedFilterOperation）函数返回它的结果
calculateGroupValue
指定字段名称或返回一个字段名称或值要用于分组列的单元的函数。
类型：String| function(rowData)
功能参数：
rowData：Object
返回值：any
默认情况下，grouping是使用分组列包含精确值进行。然而，在某些情况下，这种方法可以得到差的结果，例如，当用户通过包含日期栏试图组记录。在这种情况下，可能优选在分组以使用计算值。为了这个目的，分配给calculateGroupValue选项的功能。此函数必须返回用于分组的计算值
cellTemplate
指定网格列单元格的自定义模板。
类型：template
功能参数：
cellElement: jQuery
在定制的单元格。
cellInfo: Object
当前单元格的选项。
为了表示在列单元格的自定义数据，使用cellTemplate选项。实现一个定义列单元格的标记一个回调函数，并将其分配给该选项。该功能将被调用每次dxDataGrid重新呈现自身。
在实施cellTemplate功能，可以使用函数的第一个参数下的自定义访问单元。此参数提供给元素相关的jQuery操作的访问。此外，您可以访问使用函数的第二个参数等领域的单元格选项。这些字段在下面列出：
- data
包含表示当前单元格所属的行表示的数据源的对象。 - value
因为它是在数据源中指定包含当前单元的值。 - text
包含字符串格式的当前单元格的值。使用此字段来获得与应用格式的值。 - displayValue
包含当前单元格显示的值。仅当当前单元格所属的列与值字段不同 - columnIndex
包含到当前小区所属的列的索引。有关该指数是如何计算的更多信息，请参阅计算列索引的话题。 - rowIndex
包含当前单元格所属的列的索引。有关此索引如何计算的更多信息，则参考Calculating the Column Index。 - column
包含到当前单元格的列的设置。 - rowType
表示当前单元格所属的行的类型。此字段等于为组行的普通行或“组”的“数据”。使用此字段区分行类型。
当使用基因 Knockout or AngularJS，您可以指定使用dxTemplate标记组件单元模板。要获取相关信息，请参阅 Customize Widget Element Appearance文章。
它也可以通过使用下列模板引擎中的一个定义标记中的单元格模板。上述单元格设置可以以类似的方式在模板内访问。
- jQuery Templates
- JsRender
- Mustache
- Hogan
- Underscore
- Handlebars
- doT
使用模板引擎，通过以下值到cellTemplate选项之一。
- 代表模板的容器一个jQuery对象。
- DOM节点代表模板的容器。
- 返回一个jQuery对象或DOM节点代表模板的容器的功能。
如果要实现双向数据模板中的绑定，请确保您已通过设置twoWayBindingEnabled选项设置为false关闭内置的实现此功能。
要自定义单元格没有定义整个模板，处理cellPrepared事件
columns
按当前列的列。
类型：Array
默认值：undefined
不同于普通的列，带列不保存数据。相反，他们在一个列标题下收集两个或多个列。要设置此布局，使用层次结构声明带列。为了这个目的，将嵌套的列分配到带列的列字段中。例如，下面的代码声明“地址”的band column，并在它的内部嵌套三列。
var dataGridOptions = {
// ...
columns: [{
caption: 'Address',
columns: ['City', 'Street', 'Apartment']
// ...
嵌套列几乎每一个属性都有一个正则列。这些属性在引用的列部分中描述
注：有一个例外：嵌套列不能单独固定，因此指定的固定和定位性能对他们是无用的。然而，整个带列可以是固定的，像往常一样。
var dataGridOptions = {
// ...
columns: [{
caption: 'Address',
fixed: true,
fixedPosition: 'right',
columns: [ 'City',
dataField: 'Street',
width: 100,
sortOrder: 'asc'
'Apartment']
// ...
带列支持任何嵌套级别的层次结构。这意味着下面的结构是可以接受的。
var dataGridOptions = {
// ...
columns: [{
caption: 'A',
columns: [ 'A1', 'A2', {
caption: 'A3',
columns: ['A31', 'A32', {
caption: 'A33',
columns: ['A331', 'A332', 'A333']
caption: 'B',
columns: // ...
带列具有isBand标志。带状列的ownerband属性设置。使用这些属性来区分代码中的带和带条列。
cssClass
指定一个CSS类可以应用于列
Type: String
默认值：undefined
在dxDataGrid，您可以更改使用CSS样式网格列的外观。要应用样式到列，实现一个CSS类，它可能包含各种属性，而这个类的名称分配给列的CssClass选项
举个栗子：
columns: [
{ dataField: 'author', cssClass: 'red' },
{ dataField: 'title', width: 210, cssClass: 'green' },
{ dataField: 'year', cssClass: 'blue' },
{ dataField: 'genre', cssClass: 'purple' },
{ dataField: 'format', cssClass: 'gray' }
customizeText
指定一个返回要显示在一个列的单元格的文本的回调函数。
类型：function（cellInfo）
功能参数：
cellInfo: Object
一个单元的值。
对象结构：
value: String|Number|Date
因为它是在数据源中指定单元格值。
valueText：String
与应用格式的单元格的值。
target: String
指示了customizeText函数被称为UI元素的类型。
可能的值: "filterRow", "headerFilter" and "search"
groupInterval: String|Number
指示头过滤器值是如何结合成组。如果提供的目标是“headerFilter”。
返回值：String
要被显示在单元格中的文本。
在实现这个选项的回调函数，您可以访问使用作为函数的参数传递的对象一个单元格的值。或者，也可以在函数中使用该对象。这个对象具有相同的结构作为参数传递的对象。
注：当在列中显示的数据customizeText回调也被称为匹配的搜索条件来适当突出匹配的文本
dataField
指定为列提供的数据的数据源的领域。
类型：String
默认值：undefined
当指定网格列的数据，你可以简单地分配数据源字段列选项的数组。时，应指定的列没有其他选择对象时，此方法非常有用。否则，分配代表格列列的选择对象的数组，并指定每个对象中的dataField选项。您可以结合这些方法。例如，下面的代码：
$("#gridContainer").dxDataGrid({
// ...
columns: [
'CustomerID',
{ dataField: 'EmployeeID', width: 200 },
'OrderDate',
{ dataField: 'Freight', format: 'fixedPoint' },
'ShipName',
'ShipCity'
举个栗子：
<div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
dataSource: employees,
columns: columns
}"></div>
$scope.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' }
//显示效果是'Title'，'FirstName','LastName', 'Position'，'BirthDate','HireDate'共6列 为什么这样呢？自己思考吧
dataType
指定所需的类型列的值。
类型：String
默认值：未定义
可能的值：'string' | 'number' | 'date' | 'boolean' | 'object'
在某些情况下，你可能需要的数据源值转换。为了这个目的，指定使用的dataType选项所需的类型。欲了解更多信息，请参阅设置数据类型的话题。
注意：如果您的日期值是一个字符串类型，确保他们有下列格式之一，以提供跨浏览器的兼容性。
- 'YYYY/ MM / DD“（即”2014年8月25日“）
- 'YYYY/ MM / DD HH：MM：SS'（即“2014年8月25日十六点35分10秒”）
editCellTemplate
指定当它处于编辑状态一格列的单元格的自定义模板。
类型：模板
功能参数：
cellElement: jQuery
在定制的单元格。
cellInfo: Object
当前选择的单元格。
默认情况下，当用户编辑一个单元格，他或她改变它所代表的字符串值。然而，可能存在的情况，其中一个单元具有在其编辑状态定制外观。例如，您可能希望在单元格与一组值可供选择的显示组合框。在这样的情况下，指定为一列的editCellTemplate选项。实现一个回调函数自定义列单元格的内容在编辑状态，并将其分配给该选项。这个功能将被调用的每列内的单元格切换到编辑状态的时间。
在实施editCellTemplate功能，您可以访问使用函数的第一个参数被编辑的单元格。此参数提供给元素相关的jQuery操作的访问。此外，您可以访问使用函数的第二个参数的领域电池选项。这些字段在下面列出。
- data
包含到的当前编辑单元所属的行表示的数据源的对象。 - value
因为它是在一个数据源中指定包含当前编辑单元的值。 - text
包含以字符串格式的当前编辑的单元格的值。使用此字段来获得与应用格式的值。 - displayValue
包含当前编辑的单元格中显示的值。它不同于只有在其当前单元格所属列使用查找值字段。 - columnIndex
包含到当前编辑单元格所属的列的索引。有关该指数是如何计算的更多信息，请参阅计算列索引的话题。 - rowIndex
包含到当前编辑单元格所属的行的索引。当你在一个网格几页，网格行索引是年初0每一页上。需要注意的是单元格也算作行，因而具有排索引。有关行索引的详细信息，请参阅该网格行的主题。 - column
包含到当前编辑单元所属的列的设置。 - rowType
表示到的当前编辑单元所属的行的类型。该字段为等于组行普通行“数据”或“集团”。使用此字段按类型来区分行。 - setValue(newValue)
一种在编辑时改变单元格值的方法。这种方法被调用后，单元格编辑过程结束。请注意，调用此方法意味着单元格的值被更改了。在批处理编辑模式中，这种情况可能会导致编辑的单元格被高亮显示，即使它的值没有实际改变，即当一个用户切换到编辑状态的单元格，然后立即切换回正常状态，而不改变的值。为了防止这种行为，调用setValue（）的方法只有新值不等于旧的值，可使用的对象传递给editcelltemplate函数的第二个参数值字段的时候才执行。
当使用Knockout 或AngularJS库，您可以指定使用dxTemplate标记组件的模板。
此外，您还可以使用模板引擎来定义模板网格单元。 dxDataGrid支持以下模板引擎。上述选项可以在模板中以类似的方式进行访问。
- jQuery Templates
- JsRender
- Mustache
- Hogan
- Underscore
- Handlebars
- doT
使用模板引擎，通过以下值之一的editCellTemplate选项。
- 代表模板的容器一个jQuery对象。
- DOM节点代表模板的容器。
- 返回一个jQuery对象或DOM节点代表模板的容器的功能。
如果要实现双向数据模板中的绑定，请确保您已经关闭内置的实现这个功能由twoWayBindingEnabled选项设置为false
举个栗子：
dx-data-grid="{
dataSource: [{ id: 1 }, { id: 2 }, { id: 3 }],
columns: [{
dataField: 'id',
lookup: {
dataSource: items,
valueExpr: 'id',
displayExpr: 'name'
editCellTemplate: 'myTemplate'
editing: {
mode: 'row',
allowUpdating: true
customizeColumns
在创建自定义网格列后指定一个函数。
类型：功能（列）
功能参数：
columns: Array
网格列。
通常，在dxDataGrid每一列被配置单独使用列阵列的对象中选择。在大多数情况下，以这种方式配置网格列足以使它们适当地出现。但是，有可能的情况时，一个数据源的基础上生成列，你需要调整他们的一些选择。在这种情况下，你并不需要声明的列数组。而是，分配给customizeColumns选项的回调函数内更改所需的选项。格列的阵列可以使用函数的参数进行访问。此数组中的每个对象的字段代表相同的列中描述的选项栏选项参考节
customizeExportData
出口前定制网格列和数据。
类型：功能（列，行）
功能参数：
列：Array
网格列。
行：Array
网格行。如果只有选定的行被导出，该数组只包含其中。
分配给该选项的功能将在onExporting和onExported功能之间进行调用。使用此函数的参数访问和更改不同的列和行选项。
也可以看看
- export - 配置客户端的出口。
- onExporting - 可以让你请求的详细信息导出，防止出口。
- onExported - 允许完成导出时您通知最终用户。
- onFileSaving - 允许您访问的导出数据和/或防止它被保存到一个文件在用户的本地存储
dataSource
指定网格的数据源。
类型：Array|DataSource|DataSource configuration
默认值：空
要为单元格提供数据，使用数据源配置项。此选项可以为下列情况之一：
- 对象数组
每个对象的字段将被用于提供相应的网格列数据。 - 一个DataSource或它的配置对象
数据源是一个有状态的对象，包括对数据排序，分组和筛选选项;它也使数据转换选项，每个数据加载时应用它们。数据源还提供了用于处理不断变化的数据和状态事件。数据源的基础数据访问逻辑是在存储隔离。不同的是数据源，一个商店是实现读取和修改数据的通用接口，一个无状态的对象。要了解更多信息，请参阅数据层的话题。
默认情况下，会为数据源对象的每个字段生成一列，但您可以指定使用的列选项栏的自定义数组。要获取有关指定网格列的详细信息，请参阅指定网格列的话题。
当使用动态变化的数据源，在dxDataGrid部件无法跟踪更改。在这种情况下更新窗口小部件，而调用refresh（）方法
dataSource有两种不同的用法，其一是官方API上提供的方法，dataSource只为表格提供数据：
<div dx-data-grid="{
dataSource: dataSource
}"></div>
$scope.dataSource = [
author: 'D. Adams',
title: "The Hitchhiker's Guide to the Galaxy",
year: 1979,
genre: 'Comedy, sci-fi',
format: 'hardcover'
......
其二是Demo上的用法，具体请看代码：
<div style="xxx" dx-pivot-grid="dxGridOption"></div>
$scope.orders = orders; //orders是存储数据的js文件
$scope.dxGridOption = {
dataSource: {
store: orders,
fields: [{
area: 'column',
dataField: 'OrderDate',
groupInterval: 'xxx',
dataType: 'date',
displayFolder: 'Date',
}, .... //N个{ }
retrieveFields: false //也就是说，dataSource内包含了retrieveFields配置属性
allowExpandAll: true,
allowFiltering: true,
allowSorting: true,
allowSortingBySummary: true
disabled
指定窗口小部件是否可以响应用户交互。
类型：Boolean
默认值：false
创建一个可观察的变量并将其分配给该选项可在运行时指定窗口小部件的可用性
举个栗子：
bindingOptions: {
disabled: 'false'
editing
包含指定格内容如何可以改变的选项。
类型：Object
dxDataGrid支持编辑，插入和网格值的去除。执行特定操作的可用性由allowUpdating，allowAdding和allowDeleting选项中指定。
编辑在dxDataGrid可以以四种不同的模式来执行。对于他们的全面概述，请参阅行模式，批处理模式，电池模式和形状模式的文章。
也可以看看
- 有关编辑设置，您可以配置，包括编辑模式的详细信息，请参阅编辑UI话题。
- 要了解如何从代码管理编辑过程中，请参见代码主题中的编辑。
注：允许用户编辑，插入和删除之前，请确保您的数据源支持所有这些行动
教学视频：
举个栗子：
dx-data-grid="{
dataSource: books,
columns: columns,
paging: { pageSize: 7 },
editing: {
mode: 'batch',
allowUpdating: true,
allowAdding: true,
allowDeleting: true
editing.mode
指定如何网格值可以手动编辑。
类型：String
默认值：“row”
接受的价值观：'row' | 'batch' | 'cell' | 'form' //“行”| “全部”| “单元格”| '形成'
bindingOptions: {
'editing.mode': 'batch'
editing.texts
编辑相关的文本选项。
类型：Object
包含以下：
- addRow - 加1行
- cancelAllChanges - 取消所有编辑
- cancelRowChanges - 取消该行编辑
- confirmDeleteMessage - 点击删除的确认弹窗文字
- confirmDeleteTitle - 点击删除的确认弹窗标题
- deleteRow - 删除该行
- editRow - 编辑行
- saveAllChanges - 保存所有编辑
- saveRowChanges - 行编辑确认文字
- undeleteRow - 取消删除
- validationCancelChanges - 撤销所有删除动作
editing: {
mode: 'row',
allowUpdating: true,
allowDeleting: true,
texts: {
deleteRow: '删除',
saveRowChanges: '确定',
confirmDeleteTitle: 'Confirm Row Deletion'
errorRowEnabled
指示是否显示网格错误行。
类型：Boolean
默认值：True
错误行显示网格的生命周期中，在服务器上出现的数据错误。
将此选项设置为false，以避免显示给最终用户的错误。相反，将被显示在浏览器的控制台的误差。另外，您可以订阅dataErrorOccured事件时，在服务器上发生数据错误提供自定义操作
export
类型：Object
当启用客户端出口，网格工具栏包含导出按钮的网格数据导出到Excel。有关导出的详细信息，请参阅客户端导出的文章。
注：导出功能需要JSZip库。请回复此库的引用添加到您的网页。您可以从您DevExtreme包的JS文件夹，把它或使用的DevExpress CDN如下图所示。
JSZip库：
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.6.0/jszip.min.js"></script>
查看栗子：
教学视频：
filterRow
指定筛选行选项。
类型：Object
在dxDataGrid，最终用户可以使用过滤器排在运行时过滤格记录。该行位于包含列标题的网格行的下面。默认情况下，过滤器行是隐藏的。使其出现，设置filterRow对象真实可见选项。
通过在网格列中的值进行过滤格的记录，用户必须输入在属于该列中的过滤器行单元所需的值（或它的一部分）。的匹配的记录是根据列的当前选择的滤波操作来确定。要改变这种操作，用户必须点击伴随每个滤波器行单元格的放大镜图标，然后从出现的下拉列表中选择所需过滤操作。
注：此功能不适用于隐藏的列。
查看Demo：
举个栗子：
dx-data-grid="{
dataSource: orders,
columns: columns,
pager: { visible: false },
scrolling: { mode: 'infinite' },
filterRow: {
visible: true,
showOperationChooser: false
grouping
指定分组设置和的分组格记录的行为。
类型：Object
最终用户可以使用组面板组数据，在上下文菜单中出现由列标题，或两者的点击。以下列出了分组，您可以指定使用分组对象设置的概述。
- 启用
为了让使用上下文菜单分组，分配真正到了contextMenuEnabled选项。此外，您可以启用使用组面板分组。为此，分配真或“自动”的GroupPanel时|可见选项。
var dataGridOptions = {
// ...
grouping: {
// ...
contextMenuEnabled: true // enables grouping using the context menu
groupPanel: {
// ...
visible: true // enables grouping using the group panel
如果你需要禁用单个列分组，分配假此列的allowGrouping财产。
- 行为
有两种模式定义用户如何展开/折叠组。在“buttonClick”模式适用于中型和大型屏幕设备。在“rowClick”模式是专为小屏幕设备，性能相当完美。
var dataGridOptions = {
// ...
grouping: {
// ...
expandMode: 'buttonClick' // 'rowClick'
一组可以出现两种扩展或最初是折叠的。要指定，使用autoExpandAll选项。此外，您还可以禁止用户折叠组。为此，分配假的allowCollapsing选项。
var dataGridOptions = {
// ...
grouping: {
// ...
autoExpandAll: true, // makes the groups appear expanded
allowCollapsing: false // disallows group collapsing
此外，您还可以折叠/使用折叠所有组（指数）从代码中扩大网格组和展开所有组（指数）的方法。
查看Demo：
举个栗子：
dx-data-grid="{
dataSource: books,
paging: { pageSize: 8 },
groupPanel: { visible: true },
grouping: { autoExpandAll: false }
groupPanel
配置组面板。
类型：Object
在dxDataGrid数据可以由一列或若干分组。一旦一列用于分组，它被添加到组面板。
默认情况下，该组面板是隐藏的。为了使其可见，设置GroupPanel时|可见选项设置为true。另外，组面板的可见性取决于设备的屏幕大小。要做到这一点的行为，设置可见选项设置为“自动”。
如果你需要显示组面板，但要irresponsive，分配假的GroupPanel时| allowColumnDragging选项。这是有用的，例如，当网格记录最初分组并当用户需要知道的分组，但必须不能改变它。
也可以看看
- grouping | contextMenuEnabled - 使用户能够使用上下文菜单组的数据。
- columns[] | allowGrouping - 不允许单个列分组。
- grouping - 定义基团的行为。
查看Demo：
举个栗子：
dx-data-grid="{
dataSource: books,
columns: columns,
paging: { pageSize: 7 },
groupPanel: {
visible: true,
allowColumnDragging: false
headerFilter
指定使用列标题过滤器过滤选项。
类型：Object
当一列标题过滤器是可见的，每列标题是伴随着调用一个下拉菜单中选择过滤器图标。在此菜单中，从当前列的所有唯一值列。一个最终用户可以过滤所述网格行选择一个或几个值。
您可以使用列指定列级标题过滤 headerFilter 对象。
注：此功能不适用于隐藏的列。
查看Demo：
height
指定窗口小部件的高度。
类型：Number|字符串| 功能
返回值：Number|字符串
窗口小部件的高度。
默认值：undefined
该选项可以容纳以下类型的一个值。
-
数
在像素部件的高度
-
串
小部件高度的CSS测量（例如，"55px", "80%", "auto" and "inherit"）
-
功能
函数返回小部件的高度，例如
height: function () {
return baseHeight - 10 + "%";
指定控件中显示的提示文本。
类型：String
默认值：undefined
hoverStateEnabled
指定是否当鼠标指针移动超过他们的网格行会突出显示。
类型：Boolean
默认值：FALSE
dx-data-grid="{
dataSource: books,
columns: [
'author',
{ dataField: 'title', width: 210 },
'year', 'genre', 'format'
paging: { pageSize: 8 },
bindingOptions: {
hoverStateEnabled: 'true'
loadPanel
指定的选择配置负载面板。
类型：Object
当dxDataGrid具有大量的记录操作或使用远程存储作为数据源，数据加载需要时间。由于正在准备数据，dxDataGrid显示负载面板。
负载面板包括一个窗格，加载指示灯和文字。您可以指定是否窗格或装载指示器必须分别使用showPane或showIndicator选项来显示。由负载面板中显示的文本可以使用文本选项来指定。此外，您还可以更改使用loadPanel配置对象的相应选项负载板的高度或宽度。
此外，还可以显示/使用 beginCustomLoading(messageText)和endCustomLoading()方法时，从代码中隐藏的负载面板。
由于表格负载面板实际上是在DevExtreme dxLoadPanel小部件，您可以指定属于这个小部件在loadPanel对象中的任何选项
举个栗子：
dx-data-grid="{
dataSource: {
store: {
type: 'odata',
jsonp: true,
url: 'http://services.odata.org/v2/Northwind/Northwind.svc/Orders'
.....
loadPanel: {
height: 150,
width: 400,
text: 'Data is loading...'
masterDetail
允许你建立网格中的主从接口。
类型：Object
在dxDataGrid，主从接口提供与包含在这个数据行的细节可扩展部分通常数据行。在这种情况下，数据行被称为“主行”，而部分被称为“节”。
为了使主从接口，真正分配给masterDetail|启用选项。在此之后，指定使用masterDetail细节部分的模板|模板选项。模板让你几乎任何东西放入细节部分。例如，您可以显示另一个dxDataGrid或任何其他UI部件那里。有关指定的细节部分的模板的详细信息，请参阅模板选项说明
查看Demo：
教学视频：
noDataText
当网格不包含任何记录指定的文本显示。
类型：String
默认值：'No data'
onAdaptiveDetailRowPreparing
的处理程序adaptiveDetailRowPreparing事件。
类型：功能
功能参数：
E：Object
有关事件的信息。
对象结构：
成分：Object
窗口小部件实例。
element: jQuery
窗口小部件的容器。
型号：Object
数据，可用于对元件结合。仅在淘汰赛的方式。
formOptions：Object
在dxForm小部件的布局选项。
默认值：null
自适应细节行显示从被隐藏在小部件适应屏幕或容器大小列的信息。自适应细节行前adaptiveDetailRowPreparing事件触发将呈现。此行包含dxForm小部件定义的列项的布局。当实现事件处理程序，您可以访问使用处理程序的参数的formOptions领域的dxForm选项。
注：有一些，你不能使用指定由于技术的限制formOptions选项。那些有以下几种：
- 模板
- editorType
- 任何事件处理（选项，其名称开头“on...”）
-
也可以看看
- columnHidingEnabled - 允许列隐藏在UI中。
- columns[] | hidingPriority - 决定列先隐藏其中。
- Handle Events - 描述的方式来处理在dxDataGrid小部件事件
onCellClick
处理程序cellClick事件。
类型：function()|字符串
默认值：空
户点击一个网格单元的cellClick事件触发。在实施本次活动的处理功能，使用传递给这个函数作为参数的对象。在此对象的字段，你可以找到与该单击的单元格的数据。
或者，您可以导航到特定的URL时，cellClick事件触发。为此，分配此网址到onCellClick选项。
此外，可以在用户点击一个排执行某些动作。为此，处理rowClick事件。
举个栗子：
dx-data-grid="{
dataSource: employees,
columns: [
......
onCellClick: onCellClick
$scope.onCellClick = function (clickedCell) {
clickedCell.cellElement.hasClass('clicked') ? clickedCell.cellElement.removeClass('clicked') : clickedCell.cellElement.addClass('clicked')
onCellHoverChanged
cellhoverchanged事件的处理程序。
类型：函数
默认值：空
的cellhoverchanged事件当在网格单元状态改变。当在执行此事件的处理函数时，使用传递给该函数的对象作为它的参数。在这个对象的字段中，您可以找到与悬停状态已更改的单元格有关的数据。例如，确定单元格是否已在，检查的事件类型字段的值
onCellPrepared
单元格初始渲染处理程序
类型：函数
默认值：空
单元格初始渲染便加载cellPrepared事件。当执行此事件的处理函数时，使用传递给该函数的对象作为其参数。在这个对象的字段中，您可以找到与所准备的单元格有关的数据。
查看栗子：
举个栗子：（单元格内容为空的，背景色设为黄色）
dx-data-grid="{
dataSource: beers,
columns: [
paging: { pageSize: 8 },
onCellPrepared: onCellPrepared
$scope.onCellPrepared = function (info) {
if (info.value == '')
info.cellElement.addClass('noData');
onContentReady
处理程序内容就绪事件 （每次对数据搜索、过滤分页都会调用此事件）
类型：函数
默认值：空
当控件内容准备好时，指定一个函数来执行一个自定义动作
<div style="height:380px" dx-data-grid="{
dataSource: orders,
columns: [
......
paging: { pageSize: 6 },
filterRow: { visible: true },
groupPanel: { visible: true },
selection: { mode: 'single' },
onContentReady: onContentReady
}"></div>
<b>onContentReady</b> has been called for the {{count}} time<span ng-if="count > 1">s</span>
$scope.onContentReady = function () {
$scope.count++;
onContextMenuPreparing
处理程序文本菜单准备的事件
类型：函数
默认值：空
在显示在网格中的上下文菜单之前，指定一个函数来执行一个自定义动作。例如，您可以更改菜单中的项集。
<div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
dataSource: orders,
columns: [
onContextMenuPreparing: onContextMenuPreparing
}"></div>
$scope.onContextMenuPreparing = function (e) {
if (e.row.rowType === 'data') {
var dataGrid = $("#gridContainer").dxDataGrid("instance");
e.items = [{
text: "Edit",
onItemClick: function () {
dataGrid.editRow(e.row.rowIndex);
$scope.isEditingInProcess = true;
text: "Insert",
onItemClick: function () {
dataGrid.addRow();
$scope.isEditingInProcess = true;
text: "Delete",
onItemClick: function () {
dataGrid.deleteRow(e.row.rowIndex);
onDataErrorOccurred
用于数据出错事件处理程序
类型：函数
默认值：空
为了处理可能发生在数据源错误，实现一个处理函数，并把它分配给onDataErrorOccurred选项。将获得的错误提示转化为可读的文字信息，传递给处理函数作为参数的现场错误对象的消息字段
onDisposing
菜单移除事件回调函数
类型：函数
默认值：空
返回参数：{component,element,model}
作用：菜单移除事件回调函数
举例：
onDisposing: function(){
alert("menu is removed!");
onEditingStart
处理开始编辑事件
类型：函数
默认值：空
editingStart事件触发了单元格的编辑模式，将单元格切换到编辑状态，实施这一事件的处理程序，需要使用传递给它一个参数作为对象。在此对象的字段，要包含关于将要编辑的行的参数。
如果你需要取消一行或一个单元格的编辑状态，传递给处理程序原来的参数对象并取消编辑。
你还可以区分，在数据源存在从尚未被发送到数据源的行的行。为了这个目的，可以使用对象的键字段与行参数。的尚未发送行具有此字段定义。
查看Demo：
<div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
dataSource: books,
paging: { pageSize: 7 },
editing: {
mode: 'batch',
allowAdding: true,
allowUpdating: true
onEditingStart: onEditingStart
}"></div>
$scope.onEditingStart = function (info) {
if (info.key) {
info.cancel = true;
onEditorPrepared
处理 editorPrepared 事件
类型：函数
默认值：空
如果dxDataGrid提供的默认编辑器不能满足您的要求，您可以通过onEditorPrepared函数改变其设置自定义它们。创建一个编辑器后，此功能将被调用。
onEditorPreparing
处理 EditorPreparing 事件
类型：函数
默认值：空
部分功能同onEditorPrepared，在创建一个编辑器之前调用
onExported
导出功能
类型：函数
默认值：空
当网格数据的导出完成后，分配一个函数来执行一个自定义动作
其他相关：
- customizeExportData - 导出前定制网格列和数据。
- onExporting - 可以让你请求的详细信息导出，防止出口。
- onFileSaving - 允许您访问的导出数据和/或防止它被保存到一个文件在用户的本地存储
onExporting
导出功能
类型：函数
默认值：空
在导出网格数据之前，分配一个函数来执行一个自定义动作。
其他相关：
- export - 配置客户端的出口。
- customizeExportData - 导出前定制网格列和数据。
- onExported - 允许完成导出时您通知最终用户。
- onFileSaving - 允许你访问导出的数据和/或防止它被保存在用户的本地存储的文件。
onFileSaving
文件保存功能
类型：函数
默认值：空
指定一个函数来执行一个自定义动作之前，一个具有导出数据的文件将被保存在用户的本地存储。
onInitialized
类型：Function
默认值：null
返回参数：{component,element}
作用：菜单初始化事件回调函数。Initialized事件在ContentReady事件之前
举例： onInitialized: function(){ alert("menu is initialized!"); }
onInitNewRow
插入新的一行功能（附带默认数据）
类型：函数
默认值：空
通常情况下，插入的行不包含数据。如果您需要此行包含一些默认数据，例如，行单元格的默认值，用initNewRow函数来实现。使用传参数据中对象的数据字段。
查看Demo：
<div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
dataSource: books,
columns: [
'author',
{ dataField: 'title', width: 210 },
'year', 'genre', 'format'
paging: { pageSize: 7 },
editing: { allowAdding: true },
onInitNewRow: onInitNewRow
}"></div>
$scope.onInitNewRow = function (info) {
info.data.format = 'paperback';
onKeyDown
按键触发事件
类型：函数
默认值：空
分配一个函数来执行一个自定义的按键动作，当设定的键被按下时，调用方法
onOptionChanged
类型：函数
默认值：空
返回参数：{component,element,model,name,fullName,value}
作用：菜单选项改变时的回调函数。
举例：
onOptionChanged: function(){
alert("Option is changed!");
onRowClick
类型：函数
默认值：空
单元格/行 点击触发事件，也可以是跳转到指定URL
注意：当点击行处于编辑状态，或切换到编辑状态时，rowClick事件不会触发。
为选中行添加class样式：
<div style="height:390px; max-width:630px; margin: 0 auto" 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' }
onRowClick: onRowClick
}"></div>
$scope.onRowClick = function (info) {
info.rowElement.hasClass('clicked') ? info.rowElement.removeClass('clicked') : info.rowElement.addClass('clicked')
onRowCollapsed
类型：函数
默认值：空
可实现自定义操作行/组折叠后的操作
onRowCollapsing
类型：函数
默认值：空
可实现自定义操作行/组折叠前的操作，也可以通过设置参数为true来取消折叠
onRowExpanded
类型：函数
默认值：空
可实现自定义操作行/组展开后的操作
onRowExpanding
类型：函数
默认值：空
可实现自定义操作行/组展开前的操作，也可以通过设置参数为true来取消展开
onRowInserted
类型：函数
默认值：空
插入一行数据。
onRowInserted函数可以同时存在多个！如：
onRowInserting: function(e) {logEvent("RowInserting");},
onRowInserted: function(e) {logEvent("RowInserted");},
查看Demo
onRowInserting
类型：函数
默认值：空
在插入一行数据前添加限定条件，设定info.cancel = true ，不满足必要条件则提示无法保存
查看Demo
保存一个没有“作者”；或“标题”字段的新的行，这一行将被拒绝
<div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
dataSource: books,
columns: [
'author',
{ dataField: 'title', width: 210 },
'year', 'genre', 'format'
paging: { pageSize: 7 },
editing: { allowAdding: true },
onRowInserting: onRowInserting
}"></div>
$scope.onRowInserting = function (info) {
if (!info.data.author || !info.data.title) {
info.cancel = true;
alert('The \'Author\' or \'Title\' field is not specified.');
onRowPrepared
类型：函数
默认值：空
在表格渲染之后对数据做处理
栗子：所有year> 1800且year<= 1900的书名是灰色的：
div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
dataSource: dataSource,
columns: [
'author',
{ dataField: 'title', width: 250 },
'year', 'genre', 'format'
onRowPrepared: onRowPrepared
}"></div>
$scope.onRowPrepared = function (info) {
if (info.rowType != 'header' && info.data.year > 1800 && info.data.year <= 1900)
info.rowElement.addClass('nineteenthCentury');
onRowRemoved
删除数据，可以调用RowRemoved方法
类型：函数
默认值：空
onRowRemoving: function(e) {
logEvent("RowRemoving");
onRowRemoved: function(e) {
logEvent("RowRemoved");
onRowRemoving
删除数据，可以调用RowRemoved方法
类型：函数
默认值：空
删除行不是立即删除，而是变为待删除状态，点击 Undelete 和 撤销 按钮都可以取消删除操作，只有再点击save后，数据才会消失
<div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
dataSource: books,
columns: [
'author',
{ dataField: 'title', width: 210 },
'year', 'genre', 'format'
paging: { pageSize: 8 },
editing: {
allowDeleting: true,
mode: 'batch'
onRowRemoving: onRowRemoving
}"></div>
$scope.onRowRemoving = function (info) {
if (info.data.format == 'hardcover') {
info.cancel = true
onRowUpdated
数据更新
类型：函数
默认值：空
对单行/多行数据进行编辑，使用onRowUpdated被编辑的数据会马上更新，点击撤销图标后会撤回显示原数据
onRowUpdating
数据更新
类型：函数
默认值：空
对单行/多行数据进行编辑，使用onRowUpdating被编辑的数据不会马上更新，点击save后才会保存数据
注意：在批量编辑模式下，当几个行要被更新时，onRowUpdating功能将被用于单独各行执行。
查看Demo：
dx-data-grid="{
onRowUpdating: onRowUpdating
$scope.onRowUpdating = function (info) {
if (info.oldData.format == 'hardcover') {
info.cancel = true;
onRowValidating
检查表格数据是否符合标准
类型：函数
默认值：空
当单元的数据被改变时，这些单元格中指定的验证规则进行检查，并提示错误。
dx-data-grid="{
onRowValidating: onRowValidating
$scope.onRowValidating = function (e) {
var dataGrid = e.component;
var rowIndex = dataGrid.getRowIndexByKey(e.key),
year = (e.newData.year === undefined) ? e.oldData.year : e.newData.year;
if (year > new Date().getFullYear()) {
e.isValid = false;
dataGrid.getCellElement(rowIndex, 'year').find('input').css('background', 'rgba(255, 0, 0, 0.5)');
onSelectionChanged
已中单元格/取消时触发，可以传递被选中对象的某些字段（如：selectedRowsData[0]）
类型：函数
默认值：空
可以使用 byKey(key) 检索数据
查看Demo：
dx-data-grid={
onSelectionChanged: function (selectedItems) {
$scope.selectedEmployee = selectedItems.selectedRowsData[0];
pager
页面属性，包含以下内容：
- allowedPageSizes
- infoText
- showInfo
- showNavigationButtons
- showPageSizeSelector
- visible
类型：对象
查看Demo：
教学视频：
dx-data-grid="{
pager: {
showPageSizeSelector: true,
allowedPageSizes: [3, 5, 8]
allowedPageSizes
每页显示的行数
类型：Array|字符串
默认值：“自动”
paging: { pageSize: 8 },
pager: {
showPageSizeSelector: true
bindingOptions: {
'pager.allowedPageSizes': 'selectedPageSizes'
infoText
页面信息的导航文本。
类型：String
默认值：“第{0}{1}页”
当指定此选项，您可以使用位置标记0和总页数使用位置标记1.将访问当前页码的时候读取花括号内的这些位置标记
dx-data-grid="{
dataSource: books,
columns: columns,
paging: { pageSize: 8 },
pager: {
showInfo: true,
infoText: 'Page #{0}. Total: {1} ({2} items)' //{0}：当前页 {1}：总页数 {2}：总数据行数
showInfo
指定是否显示伴随的页面导航的文本。本文由信息文本选项指定。
类型：Boolean
默认值：FALSE
是否显示infoText
bindingOptions: {
'pager.showInfo': 'checkBoxState'
showNavigationButtons
是否显示切换到上一页、下一页的箭头按钮
类型：Boolean
默认值：FALSE
bindingOptions: {
'pager.showNavigationButtons': 'checkBoxState'
showPageSizeSelector
是否显示每页行数的选择按钮
类型：Boolean
默认值：FALSE
是否显示 allowedPageSizes 每页行数的选择按钮
bindingOptions: {
'pager.showPageSizeSelector': 'checkBoxState'
visible
类型：String|布尔
默认值：“自动”
所有pager元素的可见性
bindingOptions: {
'pager.visible': 'checkBoxState'
paging
设定分页设置，paging 为false时禁用分页
类型：Object
- enabled
- pageIndex
- pageSize
查看Demo：
paging: {
pageSize: 8,
pageIndex: 19
enabled
一次性加载网页全部数据
类型：Boolean
默认值：True
paging.enabled为false时，取消分页，当页显示全部数据（有滚动条）
<div style="height:350px" dx-data-grid="{
bindingOptions: {
'paging.enabled': 'checkBoxState'
}"></div>
pageIndex
从指定的第N页开始显示（不能大于总页数）
类型：Number
默认值：0
<div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
paging: { pageIndex: 9 }
}"></div>
pageSize
指定网格显示的行数
类型：Number
默认值：20
<div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
paging: { pageSize: 8 }
}"></div>
selection
指定运行时选择的选项
类型：Object
用户可以在一个或多个模式下执行选择。
当指定多重选择模式，用户能够立即使用主复选框或CTRL + A快捷键选择所有网格记录。
查看Demo：
<div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
dataSource: books,
columns: columns,
paging: { pageSize: 8 },
selection: {
mode: 'multiple',
allowSelectAll: false
}"></div>
sorting
指定运行排序的选项。
类型：Object
在dxDataGrid，用户可以在运行时排序列的记录。若要使排序列，设置它的allowSorting选项设置为true。排序可以以各种模式来执行。要指定需要的模式，使用排序配置对象的模式属性。
查看Demo：
$scope.dataGridOptions = {
dataSource: books,
columns: [
'author',
{ dataField: 'title', width: 210 },
'year', 'genre', 'format'
paging: { pageSize: 8 },
sorting: { mode: 'multiple' }
ascendingText
指定，设置在一列按升序排列的上下文菜单项文本。
类型：String
默认：“升序”
bindingOptions: {
'sorting.ascendingText': 'ascendingText'
clearText
列排序重置设置上下文菜单项文本。
类型：String
默认值：“清除排序”
bindingOptions: {
'sorting.clearText': 'clearText'
指定运行排序模式。
类型：String
默认值：'单'
接受的值：'none' | 'single' | 'multiple'
<div style="max-height:450px" dx-data-grid="{
dataSource: books,
columns: columns,
paging: { pageSize: 8 },
bindingOptions: {
'sorting.mode': ['none', 'single', 'multiple']
}"></div>
本节描述了可用于操纵dxDataGrid插件的方法。
addColumn(columnOptions)
添加一个新列的网格。
columnOptions：对象|字符串
所添加的列或数据字段的名称的选项。
要将列添加到网格，调用网格实例的addColumn（columnOptions）方法。通过添加列作为columnOptions参数的选项。请参阅列选项描述可用选项的完整列表。
有可能的情况下，当没有选择，除的dataField，都需要被指定。在这种情况下，作为参数传递到addColumn（columnOptions）中的数据字段的名称方法而不是用柱选项对象
举个栗子：
$('#addColumnButton').dxButton({
text: 'Add Column',
onClick: function () {
var dataFieldSelectBox = $('#dataFieldSelectBox').dxSelectBox('instance');
var selectedDataField = dataFieldSelectBox.option('value');
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.addColumn(selectedDataField); //添加Column
var indexToRemove = dataFields.indexOf(selectedDataField);
if (indexToRemove != -1) {
dataFields.splice(indexToRemove, 1);
dataFieldSelectBox.option('items', dataFields);
if (dataFields.length === 0) {
dataFieldSelectBox.option('value', null);
$('#addColumnButton').dxButton('instance').option('disabled', true);
} else {
dataFieldSelectBox.option('value', dataFields[0]);
addRow()
将一个新的数据行添加到网格中
$("#insertRowButton").dxButton({
text: 'Add a New Row',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.addRow();//添加一行
beginCustomLoading(messageText)
显示加载面板
通常情况下，dxdatagrid显示负载板自动忙时渲染或加载数据。此外，负载板可以通过调用begincustomloading要求时（messageText）方法。如果你调用这个方法没有参数，负载显示器的loadpanel |文本选项指定的文本。指定的负载板的外观，使用的loadpanel性能
一旦调用代码，加载板不会躲起来，endcustomloading()方法称为
注意：从代码调用的负载面板不会取代自动调用的加载面板。这种情况可能会导致的情况下负载面板调用代码突然改变其文字因为它被自动调用重写负载板。因此，要注意当调用的负载板不同的文字
$("#beginLoadingButton").dxButton({
text: 'Begin Custom Loading',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.beginCustomLoading();
var endLoadingButton = $('#endLoadingButton').dxButton('instance');
if (endLoadingButton.option('disabled'))
endLoadingButton.option('disabled', false);
info.component.option('disabled', true)
beginUpdate()
防止组件更新，直到endupdate()方法被调用。
的beginupdate()和endupdate()方法允许你使用一些修改的组件。在beginupdate()方法被调用时，组件不更新UI，直到endupdate()方法被调用。当您正在更改多个组件设置时，这些方法的使用防止过多的组件更新
byKey(key)
允许您通过它的键获取数据对象
下面的代码演示了如何获得一个key = 15数据对象
dataGridInstance.byKey(15).done(function(dataObject) {
// process 'dataObject'
}).fail(function(error) {
// handle error
cancelEditData()
放弃在网格中所做的更改。
$("#cancelRow").dxButton({
text: 'Cancel',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.cancelEditData();
cellValue(rowIndex, dataField)
获取单元格的值
rowIndex: Number
单元格所属的行的索引
dataField: String
数据源中的数据字段的名称
cellValue(rowIndex, dataField, value)
设置单元格的值。
rowIndex: Number
单元格所属的行的索引
dataField: String
数据源中的数据字段的名称
value: any
单元格的新值
cellValue(rowIndex, visibleColumnIndex)
获取单元格的值
rowIndex: Number
单元格所属的行的索引
visibleColumnIndex: Number
数据源中的数据字段的名称
cellValue(rowIndex, visibleColumnIndex, value)
设置单元格的值。
rowIndex: Number
单元格所属的行的索引
dataField: String
数据源中的数据字段的名称
value: any
单元格的新值
clearFilter()
清除应用于网格记录的特定类型的所有筛选器
在dxdatagrid，网格记录可以以几种不同的方式过滤。此方法的参数指定要清除什么类型的筛选器。参数值可以是以下：
- “数据源”以清除数据源滤波器（定义在配置或通过过滤器（或应用）的方法）；
- “搜索”-清除搜索面板；
- “头”-清除列标题筛选器；
- “行”-清除筛选器行。
$("#clearFilterButton").dxButton({
text: 'Clear Filter',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.clearFilter('dataSource');
clearGrouping()
取消群组网格记录
$("#clearGroupingButton").dxButton({
text: 'Clear Grouping',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.clearGrouping();
clearSelection()
清除所有网格的记录。
或者，你可以选择特定的网格记录使用 deselectRows(keys) 的方法
$("#clearSelectionButton").dxButton({
text: 'Clear Selection',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.clearSelection();
clearSorting()
立即清除所有网格列的排序设置。
$("#clearSortingButton").dxButton({
text: 'Clear Sorting',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.clearSorting();
closeEditCell()
绘制从编辑状态编辑的单元格。使用此方法在编辑模式为批处理时使用此方法
$("#closeButton").dxButton({
text: 'Close Cell',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.closeEditCell();
collapseAdaptiveDetailRow()
折叠当前扩展的自适应细节行
collapseAll(groupIndex)
网格中的折叠组或主行。
groupIndex: Number| undefined
组的索引的折叠。通过未定义折叠所有组。折叠所有行
$("#collapseButton").dxButton({
text: 'Collapse Groups',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.collapseAll();
collapseRow(key)
允许您以它的键将一个特定的组或主行折叠。
key: any
要折叠组行，将此方法与一个数组的每个成员都是一个分组值。要崩溃一个主行，通过该方法的关键
columnCount()
返回网格中的数据列的数目
返回值：Number
方法返回的 columncount() 列目前在网格数。这个数字包括可见的和隐藏的列，但忽略了选择和编辑栏
columnOption(id)
通过标识符返回列的选项。
id: Number|String
返回值: Object
使用此方法获取当前应用于特定列的选项的对象。此方法接受以下几点：
- Name
列名称 - Column Index
列数组中列的索引。 - Data Field
分配给列的数据源字段的名称 - Caption
在列标题中显示的文本。 - Service String
用于获取命令列的字符串。你可以在编辑栏选择列。通过“命令：选择”字符串来获得选择列，通过“命令：编辑” - 来编辑列。得到一个命令列之后，你可以改变它的宽度或visibleIndex。
columnOption(id, optionName)
返回一个特定的列选项的值
id: Number|String
optionName: String
Return Value: any
同columnOption（id）的用法
该方法将返回第一列匹配的第一列匹配的名称、列索引、数据字段或标题的指定选项
columnOption(id, optionName, optionValue)
设置一个特定列的选项。
optionName: String
optionValue: any
同columnOption（id）的用法
通过该方法更改了第一列匹配的名称、列索引、数据字段或标题的指定选项。
onCellClick: function (clickedCell) {
var dataGrid = $("#gridContainer").dxDataGrid('instance');
dataGrid.columnOption(clickedCell.column.index, 'cssClass', 'clicked');
columnOption(id, options)
立即设置一个列的几个选项。
使用此方法，您可以从代码设置一个特定列的几个选项：
- Name
- Column Index
- Data Field
- Caption
- Service String
将更改该方法更改的第一列匹配名称、列索引、数据字段或标题的选项
defaultOptions(rule)
指定设备相关的默认配置选
rule: Object
下面的代码演示如何指定在iOS平台上执行的应用程序的所有按钮的默认选项。
DevExpress.ui.dxButton.defaultOptions({
device: { platform: "ios" },
options: {
text: "Click me"
deleteColumn(id)
deleteRow(rowIndex)
从网格中移除特定的行。
rowIndex: Number
$("#DeleteRowButton").dxButton({
text: 'Delete Row',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
var rowIndex = $('#rowIndexContainer').dxNumberBox('instance').option('value');
dataGrid.deleteRow(rowIndex);
deselectAll()
将目前过滤器内选定的行全部移除
或者，你可以选择所有记录一次使用的 clearselection() 网格方法
deselectRows(keys)
将特定的网格记录。
keys: Array
要访问一个密钥的网格记录，必须在数据源中指定一个字段提供的关键值。如果没有指定密钥，则整个数据对象被认为是关键
editCell(rowIndex, dataField)
将一个特定单元格设置为编辑状态。
rowIndex: Number
dataField: String
editCell(rowIndex, visibleColumnIndex)
将一个特定单元格设置为编辑状态。
rowIndex: Number
visibleColumnIndex: Number
$("#editButton").dxButton({
text: 'Edit Cell',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
var rowIndex = $('#rowIndexContainer').dxNumberBox('instance').option('value');
var visibleColumnIndex = $('#columnIndexContainer').dxNumberBox('instance').option('value');
dataGrid.editCell(rowIndex, visibleColumnIndex);
editRow(rowIndex)
将一个特定的行设置为编辑状态
rowIndex: Number
$("#editRowButton").dxButton({
text: 'Edit the Row',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
var rowIndex = $('#rowIndexContainer').dxNumberBox('instance').option('value');
dataGrid.editRow(rowIndex);
element()
返回控件的HTML元素的根
Return Value: jQuery
endCustomLoading()
隐藏加载面板。
通常，dxdatagrid会在渲染的时候自动隐藏负载面板的小部件。如果你调用的负载板从代码使用begincustomloading（messageText）的方法，你必须调用endcustomloading()方法隐藏
$("#endLoadingButton").dxButton({
text: 'End Custom Loading',
disabled: true,
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.endCustomLoading();
var beginLoadingButton = $('#beginLoadingButton').dxButton('instance');
if (beginLoadingButton.option('disabled'))
beginLoadingButton.option('disabled', false);
info.component.option('disabled', true)
endUpdate()
可以刷新组件后的beginupdate()方法调用。
beginupdate()和endupdate()方法允许你使用一些修改的组件。在beginupdate()方法被调用时，组件不更新UI，直到endupdate()方法称为。当您更改多个组件设置时，这些方法的使用防止过多的组件更新
expandAdaptiveDetailRow(key)
通过父数据行的键来扩展一个自适应的细节行 key: any 注：通过它的键访问数据行，必须在数据源中指定一个字段提供的关键值。如果没有指定密钥，则整个数据对象被认为是关键
expandAll(groupIndex)
在网格中展开组或主行 groupIndex: Number| undefined
注：如果使用远程数据源，这种方法不能被调用
$("#collapseButton").dxButton({
text: 'Collapse Groups',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.collapseAll();
expandRow(key)
允许您通过它的键来展开一个特定的组或主行。
key:any
要展开一组行，用一个数组调用此方法。
exportToExcel(selectionOnly)
将网格数据输出到Excel
selectionOnly: Boolean
有关导出的详细信息，参见客户端导出文章。
filter()
返回一个筛选器表达式应用于使用过滤网格的数据源（或）方法。 返回值：any
你可以从所有可能的过滤器中得到一个总结的过滤器：
- 使用过滤器（过滤器表达式）方法应用的过滤器;
- 使用过滤器连续应用滤镜;
- 使用列标题过滤器应用过滤器;
- 使用搜索面板应用滤镜
filter(filterExpr)
适用于过滤网格的数据源
filterExpr: any 该方法过滤代码中的网格记录。通过一个数组与下面的几种方法
- 数据源字段由哪些数据项进行过滤。
- 比较运算符。以下运算符： "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains"
- 与数据源字段值应该被比较的值
查看Demo
$("#applyFilterButton").dxButton({
text: 'Apply Filter',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
var column = $("#columnsSelectBox").dxSelectBox('instance').option('value');
var filter = $("#filtersSelectBox").dxSelectBox('instance').option('value');
var value = $("#valueTextBox").dxTextBox('instance').option('value');
if (column.length > 0 && filter.length > 0)
dataGrid.filter([column, filter, value]);
focus()
使组件获得聚焦状态
getCellElement(rowIndex, dataField)
允许您通过它的行索引和它的列的数据字段来获得一个单元格
rowIndex: Number
dataField: String
getCombinedFilter()
返回一个筛选器表达式应用于网格利用所有可能的情况
getKeyByRowIndex(rowIndex)
rowIndex: Number
dxdatagrid的API包括很多方法，其中一些接受数据键作为他们的论点而接受别人的行索引。如果你有一个行的索引，你可以得到相应的数据主要通过调用**getkeybyrowindex(rowIndex)**的方法。反之也一样，如果你有一个数据，你可以通过调用getrowindexbykey(key)获得相应的行的索引的方法。
getRowIndexByKey(key)
允许您通过数据键key进行行索引。
key: Object|String|Number
getSelectedRowKeys()
获取当前选择的网格记录键
返回值: Array
如果在数据源中没有指定字段提供键值，则整个数据对象被认为是key。在这种情况下，getselectedrowkeys()方法返回的数据对象对应于选定的记录，因此操作和getselectedrowsdata()方法完全一样
$("#getSelectedRowKeysButton").dxButton({
text: 'Get Selected Row Keys',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
var keys = dataGrid.getSelectedRowKeys();
$('#textArea').html('');
$('#textArea').html(JSON.stringify(keys));
getTotalSummaryValue(summaryItemName)
获取一个总的汇总项目的值。
summaryItemName: String
hasEditData()
检查是否网格包含未保存的更改
此方法是编辑功能的一部分。
hideColumnChooser()
隐藏加载器面板
$("#hideColumnChooserButton").dxButton({
text: 'Hide Column Chooser',
disabled: true,
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.hideColumnChooser();
var showColumnChooserButton = $('#showColumnChooserButton').dxButton('instance');
if (showColumnChooserButton.option('disabled'))
showColumnChooserButton.option('disabled', false);
info.component.option('disabled', true)
instance()
返回此组件类的实例
isAdaptiveDetailRowExpanded(key)
检查一个特定的自适应细节行是否展开或折叠
key :any
注：通过它的key访问数据行，必须在数据源中指定一个字段提供的key。如果没有指定密钥，则整个数据对象被认为是key
sRowExpanded(key)
获取一个特定的组或行是否展开或折叠的状态
key: any
要查找是否展开了组行，可以使用一个数组来调用此方法，其中每个成员都是一个分组值。若要查找主行是否展开，则将其传递给该方法的key
keyOf(obj)
返回对应于通过数据对象的密钥
obj: Object
如果在数据源中没有指定字段提供键值，则整个数据对象被认为是关键值。在这种情况下，keyOf(obj)方法返回其参数
off(eventName)
将所有的事件处理程序从指定的事件
eventName: String
on(eventName, eventHandler)
订阅特定事件
eventName: String
用这种方法来订阅一个事件中部分列出的事件
option(optionName, optionValue)
将一个值设置为该组件的指定配置选项。
optionName: String
设置一个值来配置选项字段
$("#showPagerCheckbox").dxCheckBox({
value: true,
text: 'Show Pager',
onValueChanged: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.option('pager.visible', info.value);
pageIndex()
获取当前页的索引
使用传呼机时，此方法返回一个值，一个小于当前页面的数量
当在一个虚拟的或无限的模式中使用滚动时，该方法返回记录显示在网格中的第一页的索引
$("#getPageIndexButton").dxButton({
text: 'Get the Current Page Index',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
$('#textArea').html('');
$('#textArea').html('Page Index: ' + dataGrid.pageIndex());
pageSize()
获取当前页面大小
在配置dxDataGrid控件时，使用paging | pageSize属性指定页大小。
refresh()
刷新网格数据。
当您使用动态数据作为数据源，dxDataGrid部件无法自动追踪可能的来源由第三方进行的更改。在这种情况下，在小窗口更新数据，调用其 refresh()方法。沿着与主数据源，该方法的一个呼叫刷新查阅列的数据源是否有任何在网格中。
注：调用 refresh()方法，总结了编辑过程。在该行编辑模式中，在一个行（如果有的话）的所有变更消失。在间歇编辑模式，改变被保存在一个缓冲区中等待要实际保存在数据源
repaint()
执行一些外部修改，导致小部件容器的大小或可见性的更改，该部件的状态可能会无效。在这种情况下，使用repaint()方法重绘控件
saveeditdata()
保存在一个单元格的变化
$("#saveRowButton").dxButton({
text: 'Save the Row',
onClick: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.saveEditData();
selectall()
选择所有网格的记录
用这种方法来选择编码记录所有网格。选择特定的按键记录，调用selectrows（键，保存）方法此外，您可以指定选项的用户选择使用性能的选择配置对象
$("#selectAllButton").dxButton({
text: 'Select All Records',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
dataGrid.selectAll();
selectRows(keys, preserve)
选择特定的网格记录。
keys:Array
要访问一个网格记录的一个关键，必须在威刚源中指定一个字段提供的关键值。如果没有指定密钥，则整个数据对象被认为是关键。
默认情况下，调用theselectrows（键，保存）方法清除所有先前选定的记录。如果你需要这些记录保持选中，调用相同的方法withtrueas它的第二个参数，为下面的代码片段演示。
dataGridInstance.selectRows([5, 10, 12], true);
$("#keys").dxTagBox({
height: 35,
width: 300,
dataSource: booksArray,
displayExpr: 'bookID',
valueExpr: 'bookID',
placeholder: 'Choose keys to select grid records...',
onValueChanged: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
var values = info.component.option('values');
dataGrid.selectRows(values);
selectRowsByIndexes(indexes)
Selectsgrid rowsby指标。
传递给此方法作为参数必须包含行的索引的数组。当他们计算，数据和组行进行计数，但只有数据行可以选择。
请注意，如果是用于通过网页浏览，由 selectRowsByIndexes(indexes) 应用选择方法，一旦用户移动到不同的页面被清除。因此，为了保持该选择，调用theonContentReadycallback函数。
如果使用虚拟滚动模式，行索引只对已经可见页面呈现。所以，这是不可能选择一个页上的行中，使用这种方法，页面是不可见的。
注：调用theselectRowsByIndexes（索引）方法取消选择所有先前选定的记录
$("#indexes").dxTagBox({
height: 35,
width: 300,
dataSource: [0, 1, 2, 3, 4, 5],
placeholder: 'Choose row indexes to select grid records...',
onValueChanged: function (info) {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
var rowIndexes = info.component.option('values');
dataGrid.selectRowsByIndexes(rowIndexes);
state()
返回网格的当前状态
为更多的信息关于电网状态工作，指的是thestatestoringoption描述
totalCount()
返回当前由网格所持有的记录的数目。
使用此方法获取当前网格所持有的记录数。
$("#getTotalCountButton").dxButton({
text: 'Get Total Count',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
$('#textArea').html('');
$('#textArea').html(dataGrid.totalCount());
undeleteRow(rowIndex)
恢复在批量编辑模式中被删除的行（感觉跟取消选中有点类似）
rowIndex: Number
$("#UndeleteRowButton").dxButton({
text: 'Undelete Row',
onClick: function () {
var dataGrid = $('#gridContainer').dxDataGrid('instance');
var rowIndex = $('#rowIndexContainer').dxNumberBox('instance').option('value');
dataGrid.undeleteRow(rowIndex);
updateDimensions()
更新网格到其内容的大小。
使用此方法网格元素被调整后更新的网格内容的位置。
本节描述了这个小部件暴露事件。
为了处理事件，请使用下列方法：
-
附加处理程序，以一个小部件的选项
指定的回调函数，这需要对所要求的事件的处理程序小部件选项。可以在窗口小部件的配置对象内处理的事件列在配置部分。所有这些事件都从on()开始。
-
附上一个多个处理程序或多个事件窗口小部件
指定 on()方法的一个或多个事件的事件处理函数，所有部件事件在事件部分详细说明
本节介绍了网格行的属性。包含这些属性的对象涉及到某些事件处理函数
单元格内容是数据对象
- rowType是“数据”⇒data 包含数据行的数据对象
- rowType是“细节”⇒data 包含在主人的行中的数据对象
- rowType是“组”⇒data 具有以下结构
data: {
key: string, // contains the grouping value
items: array, // contains data objects that satisfy the grouping value
isContinuation: boolean // "true" if the group starts on one of the previous pages; "false" otherwise
- rowType是“groupfooter”⇒ data 具有以下结构
data: {
key: string, // contains the grouping value
items: array, // contains data objects that satisfy the grouping value
isContinuation: boolean, // "true" if the group starts on one of the previous pages; "false" otherwise
aggregates: array // contains values calculated for the group summary
- rowType是“header”，“filter”或“totalfooter”⇒data未定义
isExpanded
行展开或折叠
rowIndex
rowType
行属性类型
类型：字符串
可能是以下值：
- "data"
- "detail"
- "group"
- "groupFooter"
- "header"
- "filter"
- "totalFooter"
注：行属性取决于行类型
不定期更新中，有翻译错的地方欢迎批评指正 ☺
为什么80%的码农都做不了架构师？>>> ...
要查看的文件：
Blazor数据网格-如何保存/加载网格的布局信息
本示例说明如何使用 ， 事件以及和方法将布局信息保存到某些存储器中。 之后，可以还原此信息并将其应用于DxDataGrid
注意：如本例所示，这是一种通用方法，布局信息存储在单例服务中。 此服务无法识别当前的最终用户。
页面包含两个DxDataGrid。
第一个网格处理和事件。 当前布局信息存储在单例服务中，并在这些事件处理程序中从该服务中还原。 因此，最终用户的修改（分页/排序/分组/过滤）将在页面重新加载后自动恢复。
第二个网格使用调用和方法的外部按钮保存和加载布局信息。 单击“保存当前布局”按钮以保存当前布局信息。 相应的项目将在外部列表框中创建。 然后在此列表框中选择任何项目，然后单击“加载布局”按钮以加载相应的布局信息。
我们平时一个页面可能存在多次loading加载，会在用户端重复刷新，造成很不好的用户体验
造成这个问题的原因是我们通过vuex定义一个loadingShow为true或者false来显示隐藏loading组 件，导致我们在面对多个接口时，会来回操作loadingShow
因为每次请求都会走全局封装的http，所以我们可以在vuex中定义一个{ loadingCount : 0 }，每次 请求让loadingCount++，请求结束让loadingCount--
网络状况是互联网发展与软件发展的一个很大的瓶颈，如果哪天访问网上资源能象访问本地硬盘，或者能象访问内存那样快，那样咱们的计算机以后只需要输入输出设备以及网络设备就可以了，哈哈，这只是一个美好的愿望。
Flex应用在Web开发上，避免不了网络问题，下面的说明如何在加载数据时显示Loading状态，刚刚接触Flex不久，欢迎拍砖。
原理是这样的，首先定义了...
推荐文章