Sự kiện ce bảng tính Jspreadsheet

Chương này sẽ mô tả thêm về hai sự kiện gốc và đối tượng sự kiện JavaScript (e).
EventDescriptiononload(thành phần. DOMElement)Xảy ra khi thành phần được gắn kết và sẵn sàng trong DOM.
self.onload(component: DOMElement) => voidonchange(property,affedElements)Xảy ra khi giá trị của một thuộc tính self trong quan sát được cập nhật.
______7
@param property - thuộc tính bản thân đã kích hoạt sự kiện.
@param affectedElements - Khi cùng một thuộc tính được liên kết với các phần tử HTML khác nhau.

ví dụ

Khi giá trị thuộc tính thay đổi

Có một cuộc gọi đến phương thức

0 khi giá trị của thuộc tính self trong quan sát thay đổi. Thuộc tính bản thân được tự động thêm vào danh sách thuộc tính có thể quan sát được khi thuộc tính bản thân này được đưa vào DOM

Xem ví dụ này trên Codesandbox

Khi thành phần đã sẵn sàng

Phương thức thành phần

1 sẽ được gọi khi thành phần sẵn sàng và được thêm vào DOM

đối tượng sự kiện

Từ phiên bản 2. 2. 4, bạn có thể chuyển đối tượng sự kiện (e) từ mẫu tới bất kỳ trình xử lý sự kiện nào, như ví dụ bên dưới

Sự kiện sẽ được hiển thị trên bảng điều khiển

Jspreadsheet CE là một plugin lưới dữ liệu Vanilla JavaScript nhẹ để tạo các bảng HTML tương tác dựa trên web tuyệt vời và lưới dữ liệu tương thích với bảng tính với phần mềm bảng tính khác. Bạn có thể tạo bảng bảng tính trực tuyến từ mảng JS, tệp JSON, CSV hoặc XLSX. Bạn có thể sao chép từ excel và dán thẳng vào bảng tính Jspreadsheet CE của mình và ngược lại. Rất dễ dàng tích hợp bất kỳ plugin JavaScript của bên thứ ba nào để tạo các cột tùy chỉnh, trình chỉnh sửa tùy chỉnh của riêng bạn và tùy chỉnh bất kỳ tính năng nào vào ứng dụng của bạn. Jspreadsheet CE có nhiều tùy chọn đầu vào khác nhau thông qua các loại cột gốc của nó để đáp ứng các yêu cầu ứng dụng dựa trên web phổ biến nhất. Nó là một giải pháp hoàn chỉnh để quản lý dữ liệu web. Tạo các ứng dụng tuyệt vời với bảng tính JavaScript Jspreadsheet CE

Jspreadsheet Pro v9 - Giải pháp thương mại

• Jspreadsheet Pro

Ưu điểm chính

• Tạo các ứng dụng và giao diện web phong phú và thân thiện với người dùng
• Bạn có thể dễ dàng xử lý các dữ liệu đầu vào phức tạp theo cách người dùng quen sử dụng
• Cải thiện trải nghiệm phần mềm người dùng của bạn
• Tạo CRUDS phong phú và giao diện người dùng đẹp
• Khả năng tương thích với excell. người dùng có thể di chuyển dữ liệu xung quanh bằng các phím tắt sao chép và dán phổ biến
• Dễ dàng tùy chỉnh với tích hợp plugin của bên thứ ba dễ dàng
• Tinh gọn, nhanh chóng và đơn giản để sử dụng
• Hàng ngàn trường hợp người dùng thành công
• Tăng tốc công việc của bạn khi xử lý các mục nhập dữ liệu khó trong một phần mềm dựa trên web

Ảnh chụp màn hình

Cài đặt

Là gói nút

2

Là plugin thư viện/js độc lập

Tải xuống ZIP

đặt và sử dụng các tệp của thư mục

3 trong dự án của bạn (thư viện js và tệp css)

Với một khuôn khổ

Xem phần ví dụ để biết các ví dụ về mã của jspreadsheets với các khung phổ biến

Bản trình diễn cơ bản

Một ví dụ cơ bản để tích hợp bảng tính JavaScript vào trang web của bạn để tạo bảng tính trực tuyến đầu tiên của bạn. https. // codepen. io/hchiam/pen/qBRzXKK

Cách sử dụng

Thêm jexcel/jspreadsheet và jsuites vào tệp html của bạn

<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js">script>
<script src="https://jsuites.net/v4/jsuites.js">script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />

Bạn nên khởi tạo bảng của mình dựa trên vùng chứa div, chẳng hạn như

<div id="spreadsheet">div>

Để khởi tạo bảng Jspreadsheet CE, bạn nên chạy JavaScript, chẳng hạn như

var data = [
    ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
    ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];

jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        { type: 'text', title:'Car', width:120 },
        { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
        { type: 'calendar', title:'Available', width:200 },
        { type: 'image', title:'Photo', width:120 },
        { type: 'checkbox', title:'Stock', width:80 },
        { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
        { type: 'color', width:100, render:'square', }
    ]
});

Phục vụ tệp html của bạn và sau đó bạn sẽ nhận được bảng được hiển thị trong trình duyệt của mình

Phát triển

Xem sự phát triển

ví dụ

• Lưới dữ liệu Javascript
  Bản trình diễn đơn giản (như trong codepen)

• Bản trình diễn cơ bản để phát triển
  Bản trình diễn sử dụng thư viện từ thư mục

  3, sẵn sàng sử dụng để phát triển jspreadsheet

• Triển khai React
  Ví dụ đầy đủ về cách tích hợp Jspreadsheet CE với React.

• Triển khai VUE
  Ví dụ đầy đủ về cách tích hợp Jspreadsheet CE với Vue.

• Tìm kiếm và phân trang
  Ví dụ bảng tính đầy đủ với tìm kiếm và phân trang để mang lại khả năng tương thích tuyệt vời cho những người yêu thích bảng dữ liệu.

• Loại cột
  Tìm hiểu thêm về các loại cột hiệu quả. Ví dụ này mang đến tất cả các loại cột gốc và cách tạo loại tùy chỉnh của riêng bạn.

• Trình đơn thả xuống Javascript
  Ví dụ đầy đủ về cách xử lý trình đơn thả xuống đơn giản, nâng cao, nhiều, tự động hoàn thành và có điều kiện. Tạo các bảng JavaScript tuyệt vời bằng cách sử dụng các danh mục và hình ảnh trong danh sách thả xuống của bạn.

• Lịch Javascript
  Ví dụ về cách sử dụng lịch cơ bản đến nâng cao, bộ chọn ngày và giờ.

• Tải hình ảnh lên
  Ví dụ này cho biết cách tải hình ảnh lên bảng tính của bạn.

• Cập nhật theo chương trình
  Cách cập nhật bảng tính và dữ liệu của bảng tính bằng JavaScript.

• Kiểu bảng
  Mang lại nét đặc biệt cho các ứng dụng tùy chỉnh bảng tính JavaScript của bạn.

• Sự kiện
  Tìm hiểu cách xử lý sự kiện trên Jspreadsheet CE.

• Nhập dữ liệu
  Cách nhập dữ liệu từ tệp CSV, tệp json hoặc XLSX bên ngoài.

• Công thức
  Giải phóng sức mạnh của bảng mang công thức và phương pháp JavaScript tùy chỉnh trên bảng tính Jspreadsheet của bạn.

• Thanh công cụ tùy chỉnh
  Ví dụ đầy đủ về cách bật cũng như tùy chỉnh thanh công cụ bảng tính JavaScript của bạn.

• Nhận xét cột
  Cho phép nhận xét trong bảng tính của bạn.

• Tiêu đề
  Đã bật tiêu đề lồng nhau trong bảng tính của bạn và tìm hiểu cách đặt hoặc nhận giá trị tiêu đề.

• Bản dịch
  Cách dịch thư mặc định từ Jspreadsheet.

• Các ô đã hợp nhất
  Ví dụ đầy đủ về cách xử lý các ô hợp nhất trong bảng JavaScript của bạn.

• Sắp xếp cột
  Ví dụ về cách sắp xếp bảng theo cột thông qua JavaScript.

• Lazy loading
  Ví dụ này mang đến một tính năng rất hay để xử lý các tập dữ liệu bảng lớn.

Lịch sử CE của bảng tính Jspreadsheet

Jspreadsheet CE 4. 6

Jexcel đã được đổi tên thành Jspreadsheet

Jspreadsheet CE 4. 0. 0

Xin gửi lời cảm ơn đặc biệt đến sự hỗ trợ và tài trợ của FDL - Fonds de Dotation du Libre để giúp phiên bản này có thể thực hiện được với rất nhiều tính năng hay

• Hỗ trợ sổ làm việc/tab
• Tạo bảng jexcel dymic từ phần tử tĩnh HTML
• Đánh dấu đường viền từ các ô sau CTRL+C
• Footer có hỗ trợ công thức
• Thay đổi kích thước nhiều cột
• Hỗ trợ cập nhật JSON (Trợ giúp cập nhật máy chủ từ xa)
• Siêu sự kiện toàn cầu (phương pháp tập trung để gửi tất cả các sự kiện trong một)
• Người trợ giúp tùy chỉnh. =PROGRESS (thanh tiến trình), =RATING (xếp hạng 5 sao)
• Người trợ giúp tùy chỉnh. =COLUMN, =ROW, =CELL, =TABLE, =VALUE thông tin được sử dụng khi thực thi công thức
• Cập nhật tiêu đề lồng nhau động
• Một loại cột mới để chỉnh sửa HTML
• cờ mới như. bao gồm Tiêu đề OnCopy, liên tục, bộ lọc, tự động truyền, cột cố định
• Các sự kiện mới như. một sự kiện, trên trang trao đổi, trước khi lưu, lưu
• Thêm ví dụ và tài liệu

Jspreadsheet CE 3. 9. 0 (Jexcel)

• phương pháp mới
• sửa lỗi chung

Jspreadsheet CE 3. 6. 0 (Jexcel)

• Phân tích cú pháp công thức tốt hơn
• Sự kiện mới
• Tùy chọn khởi tạo mới
• sửa lỗi chung

Jspreadsheet CE 3. 2. 3 (Jexcel)

• phương thức getMeta, setMeta
• Gói Npm với jSuites
• sửa lỗi chung

Jspreadsheet CE 3. 0. 1 (Jexcel)

Jspreadsheet CE v3 là phiên bản JavaScript Vanilla được xây dựng lại hoàn chỉnh. Vì lý do đó, không thể giữ tương thích hoàn toàn với phiên bản trước. Nếu bạn đang nâng cấp, bạn có thể cần thực hiện một vài cập nhật trong mã của mình. Nếu thắc mắc bạn có thể xem lại bài viết nâng cấp từ Jspreadsheet CE v2 hoặc Handsontable