Hãy xem ví dụ này trong CodeSandbox. ví dụ làm việc
thành phần đánh giá
import { useRef, useEffect } from "react"; import jSuites from "jsuites"; import "jsuites/dist/jsuites.css"; export default function Rating[{ options }] { const ratingRef = useRef[null]; useEffect[[] => { jSuites.rating[ratingRef.current, options]; }, [options]]; return; }
sử dụng thành phần
import { useState } from "react"; import Rating from "./Rating"; export default function App[] { const [ratingValue, setRatingValue] = useState[0]; const handleRatingChange = [element, value] => { setRatingValue[parseInt[value, 10]]; }; return [Rating example
]; }
Chúng tôi đang nỗ lực để tạo ra một plugin tốt hơn, nhưng jExcel đang được phát triển. Chúng tôi rất thích nghe ý tưởng của bạn để làm cho nó trở nên tuyệt vời. Chúng tôi vui mừng thông báo rằng các tính năng mới sẽ ra mắt hàng ngày và chúng tôi hiện đang làm việc với các tính năng như
Nhiều đề xuất được chào đón. Vui lòng gửi nhận xét của bạn trong trang Github của chúng tôi
Jspreadsheet CE là một plugin Vanilla JavaScript nhẹ để tạo các bảng và bảng tính HTML tương tác dựa trên web tuyệt vời tương thích 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
npm install jspreadsheet-ce
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 dist
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
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ư
Để 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ụ
Bản trình diễn cơ bản
Bản trình diễn đơn giản [như trong codepen]Bản demo cơ bản để phát triển
Bản demo sử dụng thư viện từ thư mụcdist
, sẵn sàng sử dụng để phát triển jspreadsheetTriể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