DevExtreme 之dxDataGrid 在Angularjs 框架下的應用
dxDataGrid 有幾種寫法均可以達到構建一個表格的目的，官網給出的方法是：javascript
Demo裏給出了幾種寫法：css
<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' }
}">
</div>
</body>
剛接觸DevExpress的時候，感受代碼風格偏向ECharts之類（多是我先接觸的ECharts因此有先入爲主的觀念），可是說實話當時看了時候的感受是「把js代碼寫在<div>裏面不是很優雅啊」，畢竟筆者本身是習慣於用編輯器自帶的格式化代碼快捷鍵的，好比webstorm的["ctrl+alt+l"]之類的，若文本斷定是html語言的話，一格式化之後，<div>裏面全部代碼都沒有了縮進，奇醜無比，也不利於代碼維護，建議仍是分開來寫。html
其餘寫法：java
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<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
}">
</div>
</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;
});
好了，扯回正事。jquery
dxDataGrid功能豐富，拖動表頭能夠直接更換列表順序，提供了豐富的搜索和排序功能，表內數據可直接編輯。angularjs
一下提供一個表格編輯和彈窗popup組件聯動的Demo：web
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
</div>
<div dx-popup="plantWinOpt">
<div data-options="dxTemplate: { name:'info' }">
<div dx-form="plantWinFrom"> </div>
</div>
</div>
</div>
</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>
相關文章
- 1. 跨平臺開發框架DevExtreme發佈v17.2.8|附下載
- 2. 跨平臺開發框架DevExtreme發佈v17.2.7|附下載
- 3. 【版本升級】跨平臺開發框架DevExtreme發佈v18.1.4|附下載
- 4. AngularJS - 下一個大框架
- 5. angularjs應用骨架
- 6. AngularJS應用骨架
- 7. Visual Studio下的跨平臺移動開發框架DevExtreme
- 8. AngularJS 框架
- 9. JS框架~Angularjs
- 10. 使用AngularJS建立應用的5個框架
- 更多相關文章...
- • Redis在Java Web中的應用 - Redis教程
- • Maven Web 應用 - Maven教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
