programming excel

Excelexportjs js

Xuất excel cho phép xuất dữ liệu Lưới sang tài liệu Excel. Bạn cần sử dụng phương pháp để xuất. Để bật tính năng xuất Excel trong lưới, hãy đặt giá trị là true

Để sử dụng tính năng xuất excel, bạn cần đưa mô-đun 





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
1 vào lưới

________một_______





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....

Hiển thị spinner trong khi xuất

Bạn có thể hiển thị/ẩn thành phần spinner trong khi xuất lưới bằng các phương pháp 





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
2/ 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
3. Bạn có thể sử dụng sự kiện 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
4 để hiển thị công cụ quay vòng trước khi xuất và ẩn một công cụ quay trong sự kiện 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
5 hoặc 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
6 sau khi xuất

Trong sự kiện 





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
4, dựa trên tham số 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
8 là 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
9 hoặc 
import { Grid, Page, Toolbar, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject[Page, Toolbar, PdfExport, ExcelExport];

let grid: Grid = new Grid[{
    dataSource: data,
    allowPaging: true,
    allowPdfExport: true,
    allowExcelExport: true,
    toolbar: ['PdfExport', 'ExcelExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', visible: false },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'ShipCity', headerText: 'ShipCity', textAlign: 'Right', width: 140 }
    ],
    height: 230
}];
grid.appendTo['#Grid'];
grid.toolbarClick = [args: Object] => {
    if [args['item'].id === 'Grid_pdfexport'] {
        grid.showSpinner[];
        grid.pdfExport[];
    }
    if [args['item'].id === 'Grid_excelexport'] {
        grid.showSpinner[];
        grid.excelExport[];
    }
}
grid.pdfExportComplete = [] => {
        grid.hideSpinner[];
    }
grid.excelExportComplete = [] => {
        grid.hideSpinner[];
    }
0, chúng ta có thể gọi phương thức 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
2 từ grid instance

Trong sự kiện 





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
5 hoặc 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
6, chúng ta có thể gọi phương thức 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
3

Trong bản demo bên dưới, chúng tôi đã kết xuất thành phần spinner mặc định khi xuất lưới

________mười một_______





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....

Nguồn dữ liệu tùy chỉnh

Xuất excel cung cấp tùy chọn để xác định nguồn dữ liệu động trước khi xuất. Để xuất dữ liệu động, hãy xác định 

import { Grid, Page, Toolbar, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject[Page, Toolbar, PdfExport, ExcelExport];

let grid: Grid = new Grid[{
    dataSource: data,
    allowPaging: true,
    allowPdfExport: true,
    allowExcelExport: true,
    toolbar: ['PdfExport', 'ExcelExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', visible: false },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'ShipCity', headerText: 'ShipCity', textAlign: 'Right', width: 140 }
    ],
    height: 230
}];
grid.appendTo['#Grid'];
grid.toolbarClick = [args: Object] => {
    if [args['item'].id === 'Grid_pdfexport'] {
        grid.showSpinner[];
        grid.pdfExport[];
    }
    if [args['item'].id === 'Grid_excelexport'] {
        grid.showSpinner[];
        grid.excelExport[];
    }
}
grid.pdfExportComplete = [] => {
        grid.hideSpinner[];
    }
grid.excelExportComplete = [] => {
        grid.hideSpinner[];
    }
5 trong 
import { Grid, Page, Toolbar, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject[Page, Toolbar, PdfExport, ExcelExport];

let grid: Grid = new Grid[{
    dataSource: data,
    allowPaging: true,
    allowPdfExport: true,
    allowExcelExport: true,
    toolbar: ['PdfExport', 'ExcelExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', visible: false },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'ShipCity', headerText: 'ShipCity', textAlign: 'Right', width: 140 }
    ],
    height: 230
}];
grid.appendTo['#Grid'];
grid.toolbarClick = [args: Object] => {
    if [args['item'].id === 'Grid_pdfexport'] {
        grid.showSpinner[];
        grid.pdfExport[];
    }
    if [args['item'].id === 'Grid_excelexport'] {
        grid.showSpinner[];
        grid.excelExport[];
    }
}
grid.pdfExportComplete = [] => {
        grid.hideSpinner[];
    }
grid.excelExportComplete = [] => {
        grid.hideSpinner[];
    }
6

________hai mươi_______





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....

Truyền tham số bổ sung cho máy chủ khi xuất

Bạn có thể truyền tham số bổ sung trong thuộc tính 

import { Grid, Page, Toolbar, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject[Page, Toolbar, PdfExport, ExcelExport];

let grid: Grid = new Grid[{
    dataSource: data,
    allowPaging: true,
    allowPdfExport: true,
    allowExcelExport: true,
    toolbar: ['PdfExport', 'ExcelExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', visible: false },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'ShipCity', headerText: 'ShipCity', textAlign: 'Right', width: 140 }
    ],
    height: 230
}];
grid.appendTo['#Grid'];
grid.toolbarClick = [args: Object] => {
    if [args['item'].id === 'Grid_pdfexport'] {
        grid.showSpinner[];
        grid.pdfExport[];
    }
    if [args['item'].id === 'Grid_excelexport'] {
        grid.showSpinner[];
        grid.excelExport[];
    }
}
grid.pdfExportComplete = [] => {
        grid.hideSpinner[];
    }
grid.excelExportComplete = [] => {
        grid.hideSpinner[];
    }
7 bằng cách gọi phương thức 
import { Grid, Page, Toolbar, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject[Page, Toolbar, PdfExport, ExcelExport];

let grid: Grid = new Grid[{
    dataSource: data,
    allowPaging: true,
    allowPdfExport: true,
    allowExcelExport: true,
    toolbar: ['PdfExport', 'ExcelExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', visible: false },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'ShipCity', headerText: 'ShipCity', textAlign: 'Right', width: 140 }
    ],
    height: 230
}];
grid.appendTo['#Grid'];
grid.toolbarClick = [args: Object] => {
    if [args['item'].id === 'Grid_pdfexport'] {
        grid.showSpinner[];
        grid.pdfExport[];
    }
    if [args['item'].id === 'Grid_excelexport'] {
        grid.showSpinner[];
        grid.excelExport[];
    }
}
grid.pdfExportComplete = [] => {
        grid.hideSpinner[];
    }
grid.excelExportComplete = [] => {
        grid.hideSpinner[];
    }
8. Trong sự kiện 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
4, bạn có thể định nghĩa tham số là cặp khóa và giá trị để nó nhận ở phía máy chủ khi xuất

Trong ví dụ dưới đây, chúng tôi đã chuyển 





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
0 thành 




            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
1 bằng cách sử dụng phương thức 
import { Grid, Page, Toolbar, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject[Page, Toolbar, PdfExport, ExcelExport];

let grid: Grid = new Grid[{
    dataSource: data,
    allowPaging: true,
    allowPdfExport: true,
    allowExcelExport: true,
    toolbar: ['PdfExport', 'ExcelExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', visible: false },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'ShipCity', headerText: 'ShipCity', textAlign: 'Right', width: 140 }
    ],
    height: 230
}];
grid.appendTo['#Grid'];
grid.toolbarClick = [args: Object] => {
    if [args['item'].id === 'Grid_pdfexport'] {
        grid.showSpinner[];
        grid.pdfExport[];
    }
    if [args['item'].id === 'Grid_excelexport'] {
        grid.showSpinner[];
        grid.excelExport[];
    }
}
grid.pdfExportComplete = [] => {
        grid.hideSpinner[];
    }
grid.excelExportComplete = [] => {
        grid.hideSpinner[];
    }
8

import { Grid, Page, Toolbar, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
import { Query } from '@syncfusion/ej2-data';

Grid.Inject[Page, Toolbar, PdfExport, ExcelExport];

let queryClone: Object;
let grid: Grid = new Grid[{
    dataSource: data,
    allowPaging: true,
    allowPdfExport: true,
    allowExcelExport: true,
    toolbar: ['PdfExport', 'ExcelExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', visible: false },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'ShipCity', headerText: 'ShipCity', textAlign: 'Right', width: 140 }
    ],
    height: 230
}];
grid.appendTo['#Grid'];
grid.toolbarClick = [args: Object] => {
    if [args['item'].id === 'Grid_pdfexport'] {
        queryClone = grid.query;
        grid.query = new Query[].addParams["recordcount", "12"];
        grid.pdfExport[];
    }
    if [args['item'].id === 'Grid_excelexport'] {
        queryClone = grid.query;
        grid.query = new Query[].addParams["recordcount", "12"];
        grid.excelExport[];
    }
}
grid.pdfExportComplete = [] => {
        grid.query = queryClone;
    }
grid.excelExportComplete = [] => {
        grid.query = queryClone;
    }





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....

Bạn có thể chuyển các bản ghi đã chọn đến máy chủ với sự trợ giúp của yêu cầu ajax. Trong sự kiện 





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
4, bạn có thể lấy các bản ghi đã chọn bằng phương thức và chuyển các bản ghi đã chọn tới máy chủ bằng thuộc tính dữ liệu của ajax

import { Grid, Page,Toolbar } from '@syncfusion/ej2-grids';
import { Ajax } from '@syncfusion/ej2-base';

Grid.Inject[Page,Toolbar];
let grid: Grid = new Grid[{
    dataSource: data,
    allowSelection: true,
    toolbar: ['Selected'],
    columns: [
        { type: 'checkbox', width: 50, },
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120},
        { field: 'CustomerID', width: 140, headerText: 'CustomerID'},
        { field: 'ShipCity', headerText: 'Ship Country', width: 140 }
    ],
    toolbarClick: function [args] {
        if [args.item.text === 'Selected'] {
            var selectedRecord = this.getSelectedRecords[];
            var ajax = new Ajax[{
                url: "/Home/SelectRecord",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify[selectedRecord],
                successHandler: function [response] {
                    console.log[JSON.parse[response]];
                },
                failure: function [response] {
                    alert[response];
                }
            }];
            ajax.send[];
        }
    },
}];
grid.appendTo['#Grid'];

Chi tiết bản ghi đã chọn được liên kết với tham số 





            
    EJ2 Grid
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
Loading....
5. Vui lòng tham khảo ảnh chụp màn hình sau

Bài Viết Liên Quan

Đồ thị vô hướng Python
Bivariate phân phối Poisson trăn
Christian Women's Retreat 2023
Cách tốt nhất để học javascript miễn phí
Công việc reddit excel
Một ngày ăn bao nhiêu cơm là đủ
Tính tổng 1 1+2 1 3 1/n trong pascal
Nhận tọa độ nhấp chuột python
Làm cách nào để tạo biểu mẫu đăng ký đơn giản trong php và MySQL?
PHP giải thích bằng ví dụ là gì?
Python kết nối MongoDB
Gửi email ở định dạng HTML
Làm cách nào để tách chuỗi bằng dấu phẩy trong MySQL?
Vàng mỹ ký giá bao nhiêu 1 chỉ?
Làm cách nào để lấy tất cả các giá trị từ đối tượng trong JavaScript?
Xóa bằng Python
Làm thế nào để bạn nối hai đầu vào trong python?
Câu lệnh điều khiển trong PHP giải thích bằng ví dụ là gì?
Chữ ký HTML là gì
Năng suất Python không có vòng lặp

Toplist mới

#1
Top 9 review kem chống nắng cho bà bầu 2023
6 tháng trước
#2
Top 5 tiếng anh lớp 2 unit 7 trang 46 2023
6 tháng trước
#3
Top 10 tải: mẫu the nhân viên trên excel 2023
6 tháng trước
#4
Top 7 tuyển dụng nhân viên chốt đơn tại nhà 2023
6 tháng trước
#5
Top 7 mẫu nhà 2 tầng chữ l 100m2 mái bằng 2023
6 tháng trước
#6
Top 4 truyện ngắn về quê hương lớp 2 2023
6 tháng trước
#7
Top 6 sơ đồ bộ máy nhà nước thời hồ 2023
6 tháng trước
#8
Top 8 trước việc nhật đảo chính pháp, đảng ta có chủ trương gì mới 2023
6 tháng trước
#9
Top 7 dân số đông đã đem đến cho nước ta 2023
6 tháng trước

Bài mới nhất

Trường trung cấp nghề 19 thái bình năm 2024
Làm thế nào để lưu ứng dụng vào thẻ nhớ năm 2024
Máy bán card điện thoại truemoney bị lỗi năm 2024
Cơ chế giao vốn cho doanh nghiệp là gì năm 2024
Bài tập unit 9 lớp 6 mới nhất năm 2024
Máy hít bâm của máy năng lương là gì năm 2024
Quản lý kinh doanh là làm gì năm 2024
Sườn xào chua ngọt tiếng anh là gì năm 2024
Ngành disaster resilience and sustainable development là ngành gì năm 2024
Chiến tranh cục bộ dưới thời tổng thống nào năm 2024

Chủ Đề

Toplist programming Địa Điểm Hay Hỏi Đáp Là gì Mẹo Hay Nghĩa của từ Học Tốt Công Nghệ Khỏe Đẹp bao nhiêu mẹo hay Top List Bao nhiêu Sản phẩm tốt Bài Tập Xây Đựng Ngôn ngữ đánh giá Tiếng anh Bài tập So Sánh Ở đâu So sánh Hướng dẫn Dịch bao nhieu Tại sao Đại học hướng dẫn Máy tính Thế nào Vì sao Bao lâu Khoa Học Hà Nội