Nhập excel góc

Ag-grid là một thư viện js được hỗ trợ sử dụng để hiển thị dữ liệu dưới dạng bảng biểu trong javascript và các khung của nó

Nó hỗ trợ từ các chức năng cơ bản đến phức tạp mà một bảng biểu cần phải có như .

• Tạo cột, điều chỉnh chiều rộng, chiều cao, ngắt dòng văn bản
• Sắp xếp, lọc dữ liệu, kéo thả vị trí các cột cố định trên giao diện người dùng, đặt một số cột
• Nhập dữ liệu trực tiếp, định dạng dữ liệu…

Hoặc bạn có thể tùy ý bổ sung các tính năng khác cho lưới như .

• Xác thực dữ liệu đã nhập
• Tạo đầu vào tùy chỉnh Gắn liền với từng ô
• Chèn công thức tính toán như trên excel

ag-grid có bản Community [miễn phí] và Enterprise [mất phí]. Bản Enterprise có thêm một số tính năng hỗ trợ cao cấp hơn [như xuất file excel, thay vì chỉ xuất csv ở bản miễn phí]. Tuy nhiên để học và tìm hiểu hoặc làm dự án nhỏ thì bản Cộng đồng đã có đầy đủ các chức năng cần thiết rồi.

#2. @ViewChild là gì?

Trong ví dụ dưới đây, chúng ta sẽ làm việc với @ViewChild, vậy @ViewChild là gì?

Angular 

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

2 decorator là 1 trong những decorator đầu tiên mà chúng ta sẽ tìm hiểu khi tìm hiểu về Angular

Khi chúng ta muốn truy cập vào các thành phần con, chỉ thị hay phần tử DOM từ thành phần mẹ, trình trang trí ViewChild sẽ giúp chúng ta điều này

ViewChild trả về phần đầu tiền mà chúng ta muốn truy vấn. Trong trường hợp chúng tôi muốn truy vấn nhiều phần từ con, chúng tôi có thể sử dụng

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

3 thay thế

Để hiểu thêm về @ViewChild mời bạn xem tiếp tại đây

Bắt đầu với AG Grid Angular

Để thực hiện và có kết quả như bài viết này Chúng ta cần phải cài đặt môi trường Dev trước khi bắt đầu

#1. Khởi tạo dự án

$ cd temp/
$ ng new my-app --style scss --routing false
$ cd my-app/
$ code .

Khởi động máy chủ

$ ng serve 
#hoặc  
$ npm start

#2. add AG Grid to project

#1. Thêm gói

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

4 vào

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

5

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

#2. Add

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

6 to

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

7– src/app/app. mô-đun. ts

import { AgGridModule } from 'ag-grid-angular';

imports: [
    AgGridModule.withComponents[[]]
]

#3. truyền

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

8 của ag-grid vào ứng dụng– src/styles. scss

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

1

#4. Tạo Định nghĩa cột cơ bản– src/app/app. thành phần. ts

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

2

#5. chuyển ag-grid vào mẫu– ứng dụng/ứng dụng. thành phần. html

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

3Kết quả ag-grid với cột cấu hìnhDefs cơ bản

#3. Cho phép lưới có thể sắp xếp

src/ứng dụng/ứng dụng. thành phần. ts

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

4

#4. Cho phép lưới có thể lọc

src/ứng dụng/ứng dụng. thành phần. ts

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

5Kết quả lưới sắp xếp và bộ lọc

#5. Hiển thị tải dữ liệu từ xa

#1. Add

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

9 to

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

7– src/app/app. mô-đun. ts

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

8

#2. Mã tải dữ liệu từ xa– src/app/app. thành phần. ts

$ ng serve 
#hoặc  
$ npm start

0

#3. Cài đặt mẫu– ứng dụng/ứng dụng. thành phần. html

$ ng serve 
#hoặc  
$ npm start

1Kết quả đọc dữ liệu từ máy chủ từ xa

#6. Tạo cột có hộp kiểm

#1. Chọn cột có hộp kiểm, cài đặt cộtDefs– src/app/app. thành phần. ts

$ ng serve 
#hoặc  
$ npm start

2

#2. Chọn lưới chọn được nhiều dòng, cài đặt mẫu– ứng dụng/ứng dụng. thành phần. html

$ ng serve 
#hoặc  
$ npm start

3

#7. Truy cập dữ liệu trên lưới

#1. Tạo nút với sự kiện nhấp chuột để hiển thị tin nhắn là dữ liệu của các dòng được chọn, thêm vào mẫu– ứng dụng/ứng dụng. thành phần. html

$ ng serve 
#hoặc  
$ npm start

4

#2. Create instance of grid

a] Cài đặt mẫu– ứng dụng/ứng dụng. thành phần. html

$ ng serve 
#hoặc  
$ npm start

5

b] Mã hiển thị tin nhắn, sử dụng @ViewChild tạo cá thể– src/app/app. thành phần. ts

$ ng serve 
#hoặc  
$ npm start

6Kết quả đọc dòng dữ liệu được chọn

#số 8. Tạo cột nhóm

“Nhóm là một tính năng dành riêng cho AG Grid Enterprise. Bạn có thể dùng thử miễn phí AG Grid Enterprise để xem bạn nghĩ gì. Bạn chỉ cần liên hệ nếu muốn bắt đầu sử dụng AG Grid Enterprise trong một dự án dành cho sản xuất”

#1. Thêm gói

import { AgGridModule } from 'ag-grid-angular';

imports: [
    AgGridModule.withComponents[[]]
]

1 vào

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

5

$ ng serve 
#hoặc  
$ npm start

7

#2. Add

import { AgGridModule } from 'ag-grid-angular';

imports: [
    AgGridModule.withComponents[[]]
]

3 to

$ npm install --save ag-grid-community ag-grid-angular
$ npm install

7– app. mô-đun. ts

$ ng serve 
#hoặc  
$ npm start

8

“Nếu mọi thứ đều ổn, bạn sẽ thấy một thông báo trong bảng điều khiển cho bạn biết không có khóa cấp phép doanh nghiệp. Bạn có thể bỏ qua tin nhắn khi chúng tôi đang thử nghiệm”