Tôi muốn slickgrid tự động hóa các cột dựa trên nội dung rộng nhất hoặc văn bản tiêu đề - tùy theo mức nào rộng hơn. Nói một cách đơn giản, tôi muốn nó mô phỏng hành vi mặc định của các bảng HTML thông thường khi nói đến việc định cỡ cột. Làm thế nào tôi có thể làm điều đó trong slickgrid?Làm cách nào để tự động cột trong SlickGrid?
Bạn sẽ có thể gọi phương thức autosizeColumns() của đối tượng lưới.
grid.autosizeColumns();
Điều này không tự động kích thước các cột, nó chỉ cung cấp cho họ tất cả không gian có sẵn. Họ sẽ căng rộng hơn nhiều so với cần thiết chỉ để phù hợp với văn bản. –
Khi xây dựng lựa chọn của bạn, bạn có thể sử dụng forceFitColumns: true
var options = {
enableCellNavigation: true,
forceFitColumns: true
};
này sẽ làm cho cột lấp đầy toàn bộ chiều rộng của div lưới của bạn.
Điều này không tự động kích thước các cột, nó chỉ cung cấp cho họ tất cả không gian có sẵn. Họ sẽ căng rộng hơn nhiều so với cần thiết chỉ để phù hợp với văn bản. –
Chèn văn bản vào phần tử ngoài màn hình và truy xuất chiều rộng của phần tử. Đây là những gì excanvas làm để đo văn bản. Sử dụng điều này để thiết lập chiều rộng của cột vì nó mong đợi một giá trị pixel.
OP đang tìm kiếm các cột để phát triển để phù hợp với nội dung của chúng. grid.autosizeColumns() phát triển các ô để vừa với vùng chứa chính, không giống như vậy.
Tôi đã thêm tính năng này và tính năng này là hướng dẫn sử dụng như bạn có thể tưởng tượng. Bạn lặp qua các ô được hiển thị và đo từng ô, lưu ô rộng nhất và sử dụng chiều rộng đó để đặt chiều rộng cột của bạn. SlickGrid cung cấp cho bạn quyền truy cập tốt vào các ô trong chế độ xem, do đó hoạt động tốt.
Thuật toán đo lường là quyết định lớn của bạn. Bạn có thể đặt màn hình tắt nội dung và đo lường nó, như @jay gợi ý. Điều này làm việc, nhưng nó là phương pháp chậm nhất, vì nó đòi hỏi một repaint để chèn, và một repaint khi bạn loại bỏ. Có thể có cách để tối ưu hóa. Giải pháp tôi đã làm là đo chiều rộng của mỗi chữ cái trong bảng chữ cái, cũng như các ký tự typographic khác mà chúng ta gặp, và tổng hợp chúng để tạo ra một chiều rộng. Vâng, điều này nghe có vẻ ngớ ngẩn. Nó có nhiều ràng buộc: Kích thước phông chữ phải giống nhau, nó không hỗ trợ hình ảnh, không thể có bất kỳ dòng trả về nào và nhiều hơn nữa. Tuy nhiên, nếu bạn có thể sống với các ràng buộc, bạn có thể tính toán kích thước cho một khung nhìn lưới lớn trong <5ms, bởi vì độ rộng ký tự chỉ được đo một lần.
Sau khi bạn nhận được kích thước của các cột, bạn chỉ định chúng cho các cột của mình bằng cách sử dụng grid.setColumns().
Tôi có một PR trên slickgrid mà làm cho các thiết lập của chiều rộng cột nhiều, nhanh hơn nhiều (bạn vẫn phải thực hiện các phép đo): https://github.com/mleibman/SlickGrid/pull/897#issuecomment-36951127 – SimplGy
Tôi đã thêm điều này sau khi lưới được vẽ và nó hoạt động tốt.
$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
Slickgrid sẽ không hỗ trợ kích thước tự động cột dựa trên dữ liệu.Bạn cần phải viết một plugin hoặc ngã ba lõi slickgrid để sửa đổi.
Dưới đây là liên kết Tôi đã tạo ra một plugin để xử lý kích thước tự động slickgrid https://github.com/naresh-n/slickgrid-column-data-autosize
công việc tuyệt vời về điều này, có thể thay đổi kích thước tất cả các cột khi tải không? Ngoài nhấp đúp và CTRL + Shift + A? điều này sẽ hoạt động tốt nhất nếu có nhiều cột – William
Make điều chỉnh này đơn giản để Naresh của https://github.com/naresh-n/slickgrid-column-data-autosize, trên init chức năng:
$container.ready(resizeAllColumns); để hàm init.Điều này đảm bảo các cột autoresize trên tải ban đầu
tôi thấy rất nhiều vấn đề với thiết kế nếu bạn không xác định chiều rộng. Nhưng nếu bạn muốn, chỉ có bạn cần là lưới điện thoại.thay đổi kích thước() –
Bạn đang đề cập đến một phiên bản trước đó hoặc chia hai nếu slickgrid? Coz Tôi không thể tìm thấy các resize() chức năng trong v2.0a1 bởi mleibman. Gần nhất mà tôi có thể tìm thấy là resizeCanvas() nhưng gọi phương thức đó không làm bất cứ điều gì để thay đổi kích thước các cột đúng cách. –