<body ng-controller="myCtrl">
<div style="height:420px; max-width:750px; margin: 0 auto" dx-data-grid="{
dataSource: books,
columns: [
{ dataField: 'author', width: 125 },
{ dataField: 'title', allowGrouping: false },
{ dataField: 'year', width: 60, sortIndex: 0, sortOrder: 'asc', allowGrouping: false },
{ dataField: 'genre', visible: false },
{ dataField: 'price', width: 60, format: { type: 'currency', precision: 2 }, visible: false, allowGrouping: false },
{ dataField: 'length', width: 65, allowGrouping: false },
{ dataField: 'format', width: 90 }
columnChooser: { enabled: true },
allowColumnReordering: true,
sorting: { mode: 'multiple' },
groupPanel: { visible: true, emptyPanelText: 'Drag a column header here to group grid records' },
pager: { visible: true },
paging: { pageSize: 7 },
editing: {
allowUpdating: true,
mode: 'row',
allowAdding: true,
allowDeleting: true
filterRow: { visible: true },
searchPanel: { visible: true },
selection: { mode: 'none' }
</body>
刚接触DevExpress的时候，感觉代码风格偏向ECharts之类（可能是我先接触的ECharts所以有先入为主的观念），但是说实话当时看了时候的感觉是“把js代码写在<div>里面不是很优雅啊”，毕竟笔者自己是习惯于用编辑器自带的格式化代码快捷键的，比如webstorm的["ctrl+alt+l"]之类的，若文本判定是html语言的话，一格式化以后，<div>里面所有代码都没有了缩进，奇丑无比，也不利于代码维护，建议还是分开来写。
其他写法：
<!DOCTYPE html>
<html ng-app="myApp">
<title>Configuring DataGrid</title>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/16.1.5/js/dx.web.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.light.css" />
<script type="text/javascript" src="grid.js"></script>
</head>
<body ng-controller="myCtrl">
<div style="height:420px; max-width:750px; margin: 0 auto" dx-data-grid="{
dataSource: books
</body>
</html>
var books = [
{ author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman',
price: 4.56, language: 'EN', length: 220, format: 'paperback' },
{ author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi',
price: 12.43, language: 'EN', length: 224, format: 'hardcover' },
{ author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi',
price: 7.21, language: 'EN', length: 306, format: 'e-book' },
{ author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel',
price: 4.95, language: 'EN', length: 218, format: 'paperback' },
{ author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction',
price: 29.84, language: 'EN', length: 1024, format: 'hardcover' },
{ author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel',
price: 4.73, language: 'EN', length: 357, format: 'e-book' },
{ author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction',
price: 15.53, language: 'EN', length: 376, format: 'hardcover' },
{ author: 'G. Grass', title: "The Tin Drum", year: 1959, genre: 'Speculative fiction',
price: 19.51, language: 'EN', length: 592, format: 'hardcover' },
{ author: 'R. Bradbury', title: "Dandelion Wine", year: 1957, genre: 'Novel',
price: 5.95, language: 'EN', length: 298, format: 'e-book' },
{ author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi',
price: 4.50, language: 'EN', length: 298, format: 'e-book' },
{ author: 'R. Bradbury', title: "Fahrenheit 451", year: 1953, genre: 'Dystopian novel',
price: 7.90, language: 'EN', length: 179, format: 'paperback' },
{ author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction',
price: 2.41, language: 'EN', length: 384, format: 'paperback' },
{ author: 'F. Scott Fitzgerald', title: "The Great Gatsby", year: 1925, genre: 'Novel',
price: 16.18, language: 'EN', length: 176, format: 'hardcover' },
{ author: 'E. Hemingway', title: "For Whom the Bell Tolls", year: 1940, genre: 'War novel',
price: 9.12, language: 'EN', length: 480, format: 'e-book' },
{ author: 'E. Hemingway', title: "Farewell to Arms", year: 1929, genre: 'War novel',
price: 8.59, language: 'EN', length: 354, format: 'e-book' },
{ author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners',
price: 8.28, language: 'EN', length: 258, format: 'paperback' }
var myApp = angular.module('myApp', ['dx']);
myApp.controller("myCtrl", function ($scope) {
$scope.books = books;
好了，扯回正事。
dxDataGrid功能丰富，拖动表头可以直接更换列表顺序，提供了丰富的搜索和排序功能，表内数据可直接编辑。
一下提供一个表格编辑和弹窗popup组件联动的Demo：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<title>DevExtreme Demo</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>
window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))
</script>
<script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="form-demo">
<div dx-button="addButton"></div>
<div id='showOlValue'></div>
<div id='showNewValue'></div>
<div dx-data-grid="vm.dxgrid" dx-item-alias="dxTemplateModel">
<div data-options="dxTemplate:{ name:'cellTmlp' }" style="text-align: center;">
<div dx-button="Button" ng-click="showPoup(dxTemplateModel.data)"></div>
<div dx-popup="plantWinOpt">
<div data-options="dxTemplate: { name:'info' }">
<div dx-form="plantWinFrom"> </div>
</body>
<script type="text/javascript">
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
var vm = $scope.vm = {
fromData: {}
vm.dxgrid = {
dataSource: customers,
showRowLines: true,
showColumnHeaders: true,
showColumnLines: true,
showBorders: true,
pager: {
visible: false,
showNavigationButtons: true,
showInfo: true,
showPageSizeSelector: false,
allowColumnReordering: true,
allowColumnResizing: true,
columns: ["CompanyName", "City", "State", "Phone", "Fax", {
dataField: 'Edit',
width: 150,
allowSorting: false,
cellTemplate: "cellTmlp"
$scope.addButton = {
text: 'add',
type: 'default',
onClick: function () {
$scope.plantWinShow = true;
$scope.Button = {
text: 'Edit',
type: 'default',
$scope.showPoup = function (data) {
vm.fromData = angular.copy(data);
$scope.plantWinShow = true;
$scope.plantWinOpt = {
width: 700,
height: 380,
contentTemplate: "info",
showTitle: true,
title: "Form",
deferRendering: true,
dragEnabled: true,
closeOnOutsideClick: false,
toolbarItems: [{
location: "after",
toolbar: "bottom",
visible: true,
widget: 'dxButton',
options: {
text: 'OK',
type: 'default',
onClick: function () {
$('#showNewValue').html("The value of CompanyName is : " + vm.fromData.CompanyName);
location: "after",
toolbar: "bottom",
visible: true,
widget: 'dxButton',
options: {
text: 'cancel',
onClick: function () {
$scope.plantWinShow = false;
onHiding: function (e) {
vm.from_validator.resetValues();
onInitialized: function (e) {
vm.plantWin = e.component;
bindingOptions: {
visible: "plantWinShow",
$scope.plantWinFrom = {
showRequiredMark: true,
showColonAfterLabel: false,
items: [{
dataField: 'CompanyName',
editorType: "dxTextBox",
dataField: 'City',
editorType: "dxTextBox",
dataField: 'State',
editorType: "dxTextBox",
dataField: 'Phone',
editorType: "dxTextBox",
dataField: 'Fax',
editorType: "dxTextBox",
bindingOptions: {
formData: 'vm.fromData',
onInitialized: function (e) {
vm.from_validator = e.component;
var customers = [{
"ID": 1,
"CompanyName": "Super Mart of the West",
"Address": "702 SW 8th Street",
"City": "Bentonville",
"State": "Arkansas",
"Zipcode": 72716,
"Phone": "(800) 555-2797",
"Fax": "(800) 555-2171",
"Website": "http://www.nowebsitesupermart.com"
"ID": 2,
"CompanyName": "Electronics Depot",
"Address": "2455 Paces Ferry Road NW",
"City": "Atlanta",
"State": "Georgia",
"Zipcode": 30339,
"Phone": "(800) 595-3232",
"Fax": "(800) 595-3231",
"Website": "http://www.nowebsitedepot.com"
"ID": 3,
"CompanyName": "K&S Music",
"Address": "1000 Nicllet Mall",
"City": "Minneapolis",
"State": "Minnesota",
"Zipcode": 55403,
"Phone": "(612) 304-6073",
"Fax": "(612) 304-6074",
"Website": "http://www.nowebsitemusic.com"
"ID": 4,
"CompanyName": "Tom's Club",
"Address": "999 Lake Drive",
"City": "Issaquah",
"State": "Washington",
"Zipcode": 98027,
"Phone": "(800) 955-2292",
"Fax": "(800) 955-2293",
"Website": "http://www.nowebsitetomsclub.com"
"ID": 5,
"CompanyName": "E-Mart",
"Address": "3333 Beverly Rd",
"City": "Hoffman Estates",
"State": "Illinois",
"Zipcode": 60179,
"Phone": "(847) 286-2500",
"Fax": "(847) 286-2501",
"Website": "http://www.nowebsiteemart.com"
"ID": 6,
"CompanyName": "Walters",
"Address": "200 Wilmot Rd",
"City": "Deerfield",
"State": "Illinois",
"Zipcode": 60015,
"Phone": "(847) 940-2500",
"Fax": "(847) 940-2501",
"Website": "http://www.nowebsitewalters.com"
"ID": 7,
"CompanyName": "StereoShack",
"Address": "400 Commerce S",
"City": "Fort Worth",
"State": "Texas",
"Zipcode": 76102,
"Phone": "(817) 820-0741",
"Fax": "(817) 820-0742",
"Website": "http://www.nowebsiteshack.com"
"ID": 8,
"CompanyName": "Circuit Town",
"Address": "2200 Kensington Court",
"City": "Oak Brook",
"State": "Illinois",
"Zipcode": 60523,
"Phone": "(800) 955-2929",
"Fax": "(800) 955-9392",
"Website": "http://www.nowebsitecircuittown.com"
"ID": 9,
"CompanyName": "Premier Buy",
"Address": "7601 Penn Avenue South",
"City": "Richfield",
"State": "Minnesota",
"Zipcode": 55423,
"Phone": "(612) 291-1000",
"Fax": "(612) 291-2001",
"Website": "http://www.nowebsitepremierbuy.com"
"ID": 10,
"CompanyName": "ElectrixMax",
"Address": "263 Shuman Blvd",
"City": "Naperville",
"State": "Illinois",
"Zipcode": 60563,
"Phone": "(630) 438-7800",
"Fax": "(630) 438-7801",
"Website": "http://www.nowebsiteelectrixmax.com"
"ID": 11,
"CompanyName": "Video Emporium",
"Address": "1201 Elm Street",
"City": "Dallas",
"State": "Texas",
"Zipcode": 75270,
"Phone": "(214) 854-3000",
"Fax": "(214) 854-3001",
"Website": "http://www.nowebsitevideoemporium.com"
"ID": 12,
"CompanyName": "Screen Shop",
"Address": "1000 Lowes Blvd",
"City": "Mooresville",
"State": "North Carolina",
"Zipcode": 28117,
"Phone": "(800) 445-6937",
"Fax": "(800) 445-6938",
"Website": "http://www.nowebsitescreenshop.com"
"ID": 13,
"CompanyName": "Braeburn",
"Address": "1 Infinite Loop",
"City": "Cupertino",
"State": "California",
"Zipcode": 95014,
"Phone": "(408) 996-1010",
"Fax": "(408) 996-1012",
"Website": "http://www.nowebsitebraeburn.com"
"ID": 14,
"CompanyName": "PriceCo",
"Address": "30 Hunter Lane",
"City": "Camp Hill",
"State": "Pennsylvania",
"Zipcode": 17011,
"Phone": "(717) 761-2633",
"Fax": "(717) 761-2334",
"Website": "http://www.nowebsitepriceco.com"
"ID": 15,
"CompanyName": "Ultimate Gadget",
"Address": "1557 Watson Blvd",
"City": "Warner Robbins",
"State": "Georgia",
"Zipcode": 31093,
"Phone": "(995) 623-6785",
"Fax": "(995) 623-6786",
"Website": "http://www.nowebsiteultimategadget.com"
"ID": 16,
"CompanyName": "EZ Stop",
"Address": "618 Michillinda Ave.",
"City": "Arcadia",
"State": "California",
"Zipcode": 91007,
"Phone": "(626) 265-8632",
"Fax": "(626) 265-8633",
"Website": "http://www.nowebsiteezstop.com"
"ID": 17,
"CompanyName": "Clicker",
"Address": "1100 W. Artesia Blvd.",
"City": "Compton",
"State": "California",
"Zipcode": 90220,
"Phone": "(310) 884-9000",
"Fax": "(310) 884-9001",
"Website": "http://www.nowebsiteclicker.com"
"ID": 18,
"CompanyName": "Store of America",
"Address": "2401 Utah Ave. South",
"City": "Seattle",
"State": "Washington",
"Zipcode": 98134,
"Phone": "(206) 447-1575",
"Fax": "(206) 447-1576",
"Website": "http://www.nowebsiteamerica.com"
"ID": 19,
"CompanyName": "Zone Toys",
"Address": "1945 S Cienega Boulevard",
"City": "Los Angeles",
"State": "California",
"Zipcode": 90034,
"Phone": "(310) 237-5642",
"Fax": "(310) 237-5643",
"Website": "http://www.nowebsitezonetoys.com"
"ID": 20,
"CompanyName": "ACME",
"Address": "2525 E El Segundo Blvd",
"City": "El Segundo",
"State": "California",
"Zipcode": 90245,
"Phone": "(310) 536-0611",
"Fax": "(310) 536-0612",
"Website": "http://www.nowebsiteacme.com"
</script>
</html>
2019独角兽企业重金招聘Python工程师标准>>> ...
一组示例应用程序将帮助您开始使用DevExtreme。
DevExtreme模块
本节中的每个示例都包含一个简单的应用程序，其中包含带有警报对话框的dxButton小部件。 足以演示如何使用 ， ， 或以及 ， ， ， ， 或方法将所需的DevExtreme模块链接到应用程序。 所有示例都需要Node.js和npm来安装软件包及其依赖项。 使用这些工具的基本原理也将有所帮助。
二手技术：
范例名称：
jQuery的RequireJS
使用jQuery的webpack
jQuery的jspm
带有AngularJS的RequireJS
Angula
config.onEditorPreparing = function (e) {
if (e.dataField === 'xx' && e.row.data.Id) {//判断是否是某一列
e.cancel = true;
return;
2.配置子项
config.masterDetail = {
要查看的文件：
Blazor数据网格-如何保存/加载网格的布局信息
本示例说明如何使用 ， 事件以及和方法将布局信息保存到某些存储器中。 之后，可以还原此信息并将其应用于DxDataGrid
注意：如本例所示，这是一种通用方法，布局信息存储在单例服务中。 此服务无法识别当前的最终用户。
页面包含两个DxDataGrid。
第一个网格处理和事件。 当前布局信息存储在单例服务中，并在这些事件处理程序中从该服务中还原。 因此，最终用户的修改（分页/排序/分组/过滤）将在页面重新加载后自动恢复。
第二个网格使用调用和方法的外部按钮保存和加载布局信息。 单击“保存当前布局”按钮以保存当前布局信息。 相应的项目将在外部列表框中创建。 然后在此列表框中选择任何项目，然后单击“加载布局”按钮以加载相应的布局信息。
在本文中，我们主要介绍全新的DataGrid和TreeList工具栏自定义API，并向您展示如何在下一个DevExtreme驱动的应用程序中利用其功能。
DevExtreme v21.2正式版下载
全新的toolbar属性
在以前的版本中，您可以使用 onToolbarPreparing 事件处理程序自定义工具栏。尽管这种方法解决了基本用例，但它不允许您动态修改工具栏或以声明方式配置工具栏（对于 Angular、React 和 Vue 用户很重要）。 为了解决这个限制，v21.2附带了一个新的tool
android小部件主要是用到RemoteViews这个类，和继承AppWidgerProvider。
在res/xml下新建一个appwidget.xml这个是定义小控件的配置信息。
appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout
WinForms Controls窗体控件
1.该内容纯个人兴趣喜好进行翻译，如果涉及到版权问题请联系；
2.后续我会坚持翻译 DX的官方使用文档，以及控件的个人使用心得，转载请注明出处；
3.一下内容，以及后续所有内容都是每个段落的中英对照翻译。以致在个别翻译不够准确的时候能博友来帮忙纠正；
3.后文中的所有 DevExpress简称 DX，所有的 Windows简称 WIN
