文件列表:

CHANGELOG.md (63, 2017-08-17)
LICENSE (1496, 2017-08-17)
analysis_options.yaml (394, 2017-08-17)
angular-dart-data-grid.iml (743, 2017-08-17)
lib/ (0, 2017-08-17)
lib/app_component.css (73, 2017-08-17)
lib/app_component.dart (2307, 2017-08-17)
lib/app_component.html (312, 2017-08-17)
lib/src/ (0, 2017-08-17)
lib/src/custom-grid/ (0, 2017-08-17)
lib/src/custom-grid/custom-template-outlet/ (0, 2017-08-17)
lib/src/custom-grid/custom-template-outlet/NgTemplateOutlet.dart (2012, 2017-08-17)
lib/src/custom-grid/custom_grid.dart (6502, 2017-08-17)
lib/src/custom-grid/custom_grid.html (2913, 2017-08-17)
lib/src/custom-grid/custom_grid.scss (2808, 2017-08-17)
lib/src/custom-grid/model/ (0, 2017-08-17)
lib/src/custom-grid/model/table_model.dart (726, 2017-08-17)
lib/src/model/ (0, 2017-08-17)
lib/src/model/column_model.dart (159, 2017-08-17)
pubspec.yaml (910, 2017-08-17)
test/ (0, 2017-08-17)
test/app_test.dart (856, 2017-08-17)
test/packages (11, 2017-08-17)
web/ (0, 2017-08-17)
web/favicon.png (2661, 2017-08-17)
web/index.html (474, 2017-08-17)
web/main.dart (447, 2017-08-17)
web/packages (11, 2017-08-17)
web/styles.css (407, 2017-08-17)

[Demo](https://abhishek-buragadda.github.io/angular-dart-data-grid/) # angular-dart-data-grid This is a custom grid build in angular dart with material design. ## Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. ### Prerequisites #### Softwares * SASS -- need to install SASS in the machine for this to work. #### Dart packages * Polymer * Polymer elements * dart sass transformer ``` dependencies : polymer: 1.0.0-rc.19 polymer_elements: 1.0.0-rc.10 transformers: - dart_sass_transformer ``` ### Installing Copy the custom-grid folder into your lib folder. Udpate the pubspec.yaml file. Include the custom-grid in the imports . ``` import 'package:angular_dart_data_grid/src/custom-grid/custom_grid.dart'; ``` Add the CustomGridComponent in the directives ``` directives: const [materialDirectives, CustomGridComponent], ``` Get the dependecies and run pub build/serve. ### Using it in the HTML. #### Inputs : `showSelection : bool` -- It will show the checkboxes for each of the rows if true . `showActions : bool` -- if true show the add / delete buttons whose functionality is customizable. The delete button is visible only when atleast one of the checkboxes are selected. `data : List<>` -- Data to be displayed in the grid. Expecting a list here. `colDefs : List<>` -- List of column definitions that are required to be shown in the grid. We have add other options like sortable also. `rowDetails : bool ` -- if true this will make the expand the row on click and user can add a custom template to show more details of a particular data item. #### Events : add : AsyncAction -- fired when add button is clicked. delete : AsyncAction> -- fired with the list of items selected when delete button is clicked. User can write their own delete function like below. (delete)="delete($event)" -- $event is the list of items selected in the grid. Just iterate the $event to get the individual items. #### Basic Usage : ``` ``` The above example will show the checkboxes for each of the row, add/delete button and columns as per the column definitions. ### Show Grid with custom template: ``` ``` In the above example we can enclose what we want to show as row detail in the template tag. The data item object will be passed to the 'item' and we can access its fields as item.. ### Sample List and Column Definitions. #### Column Definitions: ``` colDefs = [ { 'columnName':'column1', 'displayName': 'displayName1', 'isSortable': true // this will make the column sortable. }, { 'columnName':'column2', 'displayName': 'displayName2', 'isSortable': false }, { 'columnName':'column3', 'displayName': 'displayName3', 'isSortable': true } ] ``` #### Sample Data to be displayed in the grid. ``` data = [ { 'column1':value1, 'column2': value2, 'column3': value3 }, { 'column1':value3, 'column2': value4, 'column3': value5 }, { 'column1':value7, 'column2': value8, 'column3': value9 } ] ```

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：