UI-Grid : An AngularJS data grid

Help!

Head to http://ui-grid.info for documentation and tutorials. Join https://gitter.im/angular-ui/ui-grid to discuss development and ask for specific help.

We're always looking for new contributors, for pro-level contribution guidelines look at Contributor.md, if you're more of a first-timer with open source (or just need a refresher), look at First Time Open Source Contributor.md, also look at Developer.md

Need Some Inspiration? Have a look at our open PRs Plz! issues.

安装

Bower

    bower install angular-ui-grid

    <link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css">
    <script src="bower_components/angular-ui-grid/ui-grid.min.js">

NPM

    npm install angular-ui-grid

    <link rel="stylesheet" type="text/css" href="node_modules/angular-ui-grid/ui.grid.min.css">
    <script src="node_modules/angular-ui-grid/ui.grid.min.js">

CDN

You can use rawgit.com's cdn url to access the files in the Bower repository. These files are hosted by MaxCDN. Just alter the version as you need.

• https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js
• https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css

Angular Compatibility

UI-Grid is currently compatible with Angular versions ranging from 1.2.x to 1.4.x.

Feature Stability

UI-Grid comes bundled with several features. Not all of them are currently stable. See the list below for the stability of each:

For more details on the features check the Tutorials.

构建

Install dependencies

git must be on your path.  If you can't do 'git' from your terminal, then install git first and make sure you have access from the path.
Bower installs are dependent on git.

If you are a git noob, the easiest way to install is by installing the github client.

# If you don't already have the grunt-cli installed:
> npm install -g grunt-cli

> npm install
> grunt install

Default grunt task will test and build files into dist/

> grunt

开发

Development "watch" task. This will automatically rebuild from source on changes, reload Gruntfile.js if you change it, and rebuild the docs.

1. A server on localhost:9002 serving whichever directory you checked out, with livereload. Navigate to http://localhost:9002/misc/demo to see the demo files.
2. A server on localhost:9003 serving the ./docs directory. These are the docs built from source with a custom grunt-ngdocs that should work with Angular 1.2.x.

grunt dev

By default grunt dev will start several karma background watchers that will run the tests against multiple versions of angular. You may specify the version(s) you want to use with the --angular flag:

> grunt dev --angular=1.2.21

> grunt dev --angular=1.2.20,1.2.21

You can also use the --browsers specify what browsers to test with (PhantomJS is the default).

> grunt dev --browsers=Chrome

# Run a single test run against multiple browsers
> grunt karma:single --browsers=Chrome,Firefox,IE

By default the dev tasks runs e2e tests with protractor. If you have problems with them running slow or hanging, you can disable them with the --no-e2e flag:

> grunt dev --no-e2e

The grunt task is getting slower as the body of tests gets larger. If you're only working on the core functionality you can disable the unit tests on the features with the --core flag:

> grunt dev --core

As a shortcut for options that the developers frequently use, there is also a --fast flag, which equates to --core --no-e2e --angular=<latest>:

> grunt dev --fast

Karmangular

The karmangular task runs tests serially against multiple browsers (it is used internally by the dev task).

# Run tests against all available versions of Angular on Chrome
> grunt karmangular --browsers=Chrome

# Run tests with a couple versions of Angular against the default PhantomJS browser
> grunt karmangular --angular=1.2.20,1.2.21

SauceLabs

ui-grid is set up to run against SauceLabs. You must have the SAUCE_ACCESS_KEY environment variable set.

# Execute tests for a couple versions of angular on IE8
> grunt karmangular --angular=1.2.20,1.2.21 --browsers=SL_IE_8

# Run the watch tasks against IE10
> grunt dev --browsers=SL_IE10

The full list of SauceLabs browsers can be seen by running grunt saucebrowsers. Usually it should suffice to let Travis do this testing automatically, unless you're trying to debug a browser-specific issue.

What Happened to 2.x?

As of the 3.0 release, 2.x is officially deprecated. There will be no further releases. If for some reason you need to find the 2.x source please see the 2.x branch.

The 2.x docs are here: http://angular-ui.github.io/ui-grid/.

Repository Rename

With the 3.0 release, the repository has been renamed from "ng-grid" to "ui-grid".

All network traffic to GitHub should redirect automatically but they say you should update your git remote url:

git remote set-url origin https://github.com/angular-ui/ui-grid.git

Thanks

Thanks to Sauce Labs and BrowserStack for providing their testing platforms to open source projects for free.

菜单

• 098 Contributing to ui-grid
• 099 Upgrading
• 100 Prerequisites
• 101 Intro to UI-Grid
• 102 Sorting
• 103 Filtering
• 104 i18n
• 105 Footer
• 106 Binding examples
• 108 Hidden Grids
• 109 Multiple Grids per Page
• 110 Grid in a Modal
• 111 CellClass
• 112 Add/Delete/Swap Data
• 113 Adding and removing columns
• 114 Adding a row header
• 115 HeaderCellClass
• 116 Fonts and Installation
• 117 Tooltips
• 120 RTL Support
• 121 Grid Menu
• 122 Accessibility
• 190 Large Dataset
• 191 Horizontal Scrolling
• 200 Features
• 201 Edit Feature
• 202 Cell Navigation
• 203 Pinning
• 204 Column Resizing
• 205 Row Edit Feature
• 206 Exporting Data
• 207 Importing Data
• 208 Save and restore state
• 209 Grouping
• 210 Selection
• 212 Infinite scroll
• 213 Auto-Resizing
• 214 Pagination
• 215 Tree View
• 216 Expandable grid
• 217 Column Moving
• 299 Third Party Features
• 301 Edit On Focus
• 302 Custom Header
• 303 Customizing Column Menu
• 304 Two grids on a page
• 305 Accessing Scope in templates
• 306 Custom Filters
• 307 External Sorting
• 308 External Filtering
• 309 Edit Feature With Cellnav
• 311 Importing Data With Row Edit
• 312 Exporting Data With Custom UI
• 313 Custom Interpolation Symbols
• 314 External Pagination
• 315 Edit Feature With Cascading Dropdowns
• 316 Dynamic Data Changes and Watchers
• 317 Custom Templates
• 319 Complex Trees
• 320 Complex Grouping
• 321 Single filter
• 401 All Features
• 402 Grid Scrolling
• 403 End to End Testing
• 404 Large Data Sets and Performance
• 405 Exporting All Data With External Pagination
• 499 FAQ Frequently Asked Questions