Thanh công cụ bảng tính Jspreadsheet

Jspreadsheet, một plugin lưới dữ liệu Vanilla JavaScript nhẹ, có thể giúp bạn tạo các bảng và bảng tính tương tác dựa trên web đặc biệt. Tương thích với hầu hết các phần mềm bảng tính được sử dụng rộng rãi, chẳng hạn như Excel hoặc Bảng tính Google, nó mang đến cho người dùng trải nghiệm người dùng giống như Excel có một không hai. Nó cũng hoạt động tốt với các khung hiện đại nổi bật và sử dụng linh hoạt một bộ sưu tập lớn các sự kiện, tiện ích mở rộng và cấu hình để đáp ứng các yêu cầu ứng dụng khác nhau. Gây ấn tượng với khách hàng của bạn bằng trải nghiệm người dùng tốt hơn và công cụ quản lý lưới dữ liệu tương tác động tuyệt vời

Ví dụ sau cho biết cách bao gồm và tùy chỉnh thanh công cụ trong bảng tính javascript của bạn

Hướng dẫn

Thanh công cụ có thể được tùy chỉnh với một vài tham số. nhậpcó thể là i cho biểu tượng, chọn cho danh sách thả xuống, màu sắc hoặc bộ chọn màu. nội dung xác định biểu tượng (từ các biểu tượng vật chất) khi bạn sử dụng loại. tôi; . chọn, bạn có thể xác định một mảng các giá trị có thể; onclickcó thể được sử dụng cùng với loại. tôi để thực hiện bất kỳ phương pháp tùy chỉnh. Theo mặc định, phương thức này sẽ nhận phiên bản jspreadsheet và tất cả các ô được đánh dấu.

Mã nguồn

GHI CHÚ. đừng quên bao gồm biểu định kiểu biểu tượng vật liệu

Ví dụ sau cho biết cách bao gồm và tùy chỉnh thanh công cụ trong bảng tính javascript của bạn

Hướng dẫn

Thanh công cụ có thể được tùy chỉnh với một vài tham số. nhậpcó thể là i cho biểu tượng, chọn cho danh sách thả xuống, màu sắc hoặc bộ chọn màu. nội dung xác định biểu tượng (từ các biểu tượng vật chất) khi bạn sử dụng loại. tôi; . chọn, bạn có thể xác định một mảng các giá trị có thể; onclickcó thể được sử dụng cùng với loại. tôi để thực hiện bất kỳ phương pháp tùy chỉnh. Theo mặc định, phương thức này sẽ nhận đối tượng Jspreadsheet và tất cả các ô được đánh dấu.

Mã nguồn

GHI CHÚ. đừng quên bao gồm biểu định kiểu biểu tượng vật liệu

Jspreadsheet mang đến các tùy chọn cơ bản trong thanh công cụ mặc định, nhưng cũng có thể tùy chỉnh các tùy chọn đó như minh họa trong các ví dụ sau

Thanh công cụ mặc định

Ví dụ sau đây cho thấy cách bật thanh công cụ mặc định trong trang tính

GHI CHÚ. Biểu định kiểu biểu tượng vật liệu là bắt buộc đối với việc sử dụng thanh công cụ

Cũng có thể hiển thị hoặc ẩn thanh công cụ tùy chỉnh bằng JavaScript

Mã nguồn

thanh công cụ tùy chỉnh

Có thể tùy chỉnh thanh công cụ bằng cách sử dụng thuộc tính khởi tạo toolbar như bên dưới

Mã nguồn

Tùy chọn thanh công cụ

Các tùy chọn sau xác định cách jspreadsheet sẽ hiển thị thanh công cụ của nó

GHI CHÚ. Các thuộc tính tương tự bên dưới chỉ khả dụng từ jSuites v3. 5. 1+

Loại mô tả thuộc tính. kiểu phần tử chuỗi. tôi. biểu tượng. số chia. nhãn mác. lựa chọn. nội dung màu sắc. nội dung stringElement, có thể là một chuỗi văn bản hoặc biểu tượng (từ các biểu tượng vật liệu) khi bạn sử dụng kiểu. biểu tượng; . booleanTooltip cho chiều rộng phần tử của thanh công cụ. sốTrạng thái chiều rộng phần tử thanh công cụ. booleanThêm bộ điều khiển trạng thái vào thanh công cụ Elementactive. booleanInitial state cho lớp phần tử thanh công cụ. stringCSS Lớp cho mỗi tùy chọn thành phần thanh công cụKhi loại được chọn, tùy chọn này sẽ xác định các mục của danh sách thả xuống. giá trị. sốTùy chọn được chọn ban đầu cho loại. chọn lọc. methodParse các mục của loại. lựa chọn. trong một cái nhấp chuột. phương thứcKhi một mục được nhấp vàothay đổi. phương thức Đối với loại chọn khi một mục mới được chọn. chuỗi (không dùng nữa) có nghĩa là kiểu nên được áp dụng cho ô;v. chuỗi (không dùng nữa) có nghĩa là giá trị của kiểu sẽ được áp dụng cho ô; . chọn, bạn có thể xác định một mảng các giá trị có thể;

Tìm hiểu thêm về thanh công cụ jSuites

Khác với các phiên bản trước, giờ đây có một thanh công cụ cho nhiều trang tính

Tài liệu

phương pháp

Có thể sử dụng các phương pháp sau để hiển thị, ẩn hoặc tùy chỉnh thanh công cụ.
MethodDescriptiongetToolbarNhận cài đặt hiện tại của thanh công cụ.
______8setToolbarXác định lại cài đặt thanh công cụ.
______9
@param {Object} - Đối tượng thanh công cụ, các tùy chọn cho phép được mô tả trong bảng bên dưới. showToolbarHiển thị thanh công cụ bằng cài đặt hiện tại.
____10hideThanh công cụẨn thanh công cụ.
______11

đối tượng thanh công cụ

Có thể tùy chỉnh các mục trên thanh công cụ khi khởi tạo bằng cách sử dụng các thuộc tính sau.
PropertyDescriptionThuộc tính chung của thanh công cụ chứa. booleanHiển thị đường viền vùng chứa thanh công cụ. phù hiệu. boolean Thêm vùng chứa huy hiệu cho từng thành phần thanh công cụ. Tiêu đề. booleanHiển thị tiêu đề bên dưới các biểu tượng. phản ứng nhanh nhẹn. boolean Responsive thanh công cụ. Mặc định. hàng giả. Mảng mục thanh công cụCác mục cho thanh công cụ. Loại thuộc tính mục thanh công cụ. kiểu phần tử chuỗi. biểu tượng. số chia. nhãn mác. chọn nội dung. chuỗiNội dung của tiêu đề phần tử thanh công cụ. booleanTooltip cho chiều rộng phần tử của thanh công cụ. số chiều rộng phần tử thanh công cụ đang hoạt động. booleanInitial state cho lớp phần tử thanh công cụ. stringCSS Class cho mỗi giá trị phần tử thanh công cụ. sốTùy chọn được chọn ban đầu cho loại. chọn lọc. methodRender trình phân tích cú pháp phương thức cho các phần tử trong danh sách thả xuống khi nhập. selectonclick. phương thứcKhi một mục được nhấp vàothay đổi. phương thứcKhi một mục mới được chọn. Hợp lệ cho loại. lựa chọn. cập nhậtTrạng thái. Chức năngTạo bộ điều khiển trạng thái vật phẩm.
______12

ví dụ

Ví dụ cơ bản với chuyển đổi có lập trình

Ví dụ sau đây cho thấy cách bật thanh công cụ mặc định và ẩn hoặc hiển thị thanh công cụ này theo chương trình sau khi khởi tạo

GHI CHÚ. Biểu định kiểu biểu tượng vật liệu là bắt buộc đối với việc sử dụng thanh công cụ

Cũng có thể hiển thị hoặc ẩn thanh công cụ tùy chỉnh bằng JavaScript

Mã nguồn

Mục thanh công cụ tùy chỉnh

Bạn có thể đặt thuộc tính thanh công cụ làm chức năng như hình bên dưới. Điều này cho phép một mục tùy chỉnh mới trong thanh công cụ mặc định mà không cần tạo lại thanh công cụ mới từ đầu

Mã nguồn

thanh công cụ tùy chỉnh

Sử dụng thuộc tính thanh công cụ, có thể tùy chỉnh các mục trong thanh công cụ bảng tính

Mã nguồn