Căn chỉnh ô tiêu đề của ô tiêu đề trên lưới trơn

Question

Tôi đang sử dụng lưới lưới để hiển thị dữ liệu trong lưới. Slick lưới tính toán tất cả những thứ như chiều cao, chiều rộng khi lưới cụ thể được tạo ra và lưới điện trông thực sự tốt. Các foments rắc rối khi lưới điện được tạo ra nhưng được ẩn và trên hành động của cái gì khác (checkbox/nút radio chọn) lưới trở nên nhìn thấy được. thời gian này tính toán sẽ trở nên tồi tệ và các ô tiêu đề và hàng (cột cho tiêu đề) không được căn chỉnh theo chiều dọc ..

Tôi không thể hiểu cách kiểm soát điều này. Nếu bất cứ ai khác cũng đã phải chịu đựng ở bàn tay của lưới slick và đã có thể bảo vệ mình xin vui lòng trần đạn dược.

Trong dự đoán, Premanshu

Answer 1

Tôi đã có một vấn đề tương tự khi tự động hiển thị/ẩn lưới sử dụng JQuery .show() và .hide().

Nếu bạn tạo thẻ div với display: none (do đó ban đầu nó bị ẩn) các cột lưới không khởi tạo đúng cách. Để giải quyết vấn đề này, tôi tạo thẻ div với visibility: hidden và xóa kiểu này trước khi sử dụng các phương thức .hide() và .show().

Mã của tôi trông gần như thế này:

<div id="mygrid" style="visibility: hidden"></div> 

    $grid = $("#mygrid") 

    grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions); 

    // Hide grid by default, remembering to remove the visibility style 
    $grid.hide(); 
    $grid.css("visibility", "visible"); 

    // You can now show and hide the grid using normal jQuery methods 
    $grid.show(); 
    $grid.hide(); 

Một khi nó được khởi tạo và visibility: hidden; tài sản được lấy ra, tôi đang sử dụng .hide() và .show() nhưng tôi nghi ngờ điều này sẽ có tác dụng nếu bạn thao tác các display: none; thuộc tính trực tiếp nếu bạn không sử dụng JQuery.

Hy vọng điều này sẽ hữu ích.

Answer 2

Điều này được hỗ trợ và không nên xảy ra. Trong thực tế, hầu hết các ví dụ (bao gồm http://mleibman.github.com/SlickGrid/examples/example1-simple.html) có cùng thực hiện chỉ để đảm bảo nó hoạt động chính xác.

Bạn có thể bao gồm bản giới thiệu jsfiddle.net không?

Answer 3

Tôi đã có cùng một vấn đề chính xác và sau khi đọc câu trả lời từ @Premanshu và @Tin tôi đã tìm thấy một tuyến đường khác để giải quyết nó.

Về cơ bản bạn cần phải bỏ qua một chu kỳ sự kiện và để DOM bắt kịp trước khi bạn hiển thị lưới, điều này sẽ cho phép nó tìm độ rộng cột bên phải. Tôi đã sử dụng setTimeout để làm điều đó.

var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>"); 
    grid = new Slick.Grid(myGrid, data, columns, options); 


    // ... later on, append the container to the DOM and initialize SlickGrid 
    setTimeout(function(){ 
    myGrid.appendTo(that.$el); 
    grid.init(); 
    },1); 

Answer 4

Tôi gặp sự cố tương tự khi sử dụng nó trên trang có css bootstrap trên Twitter. Giải pháp là ghi đè kích thước hộp thành content-box

*, *: before, *: sau { -webkit-box-sizing: content-box; -moz-box-sizing: hộp nội dung; kích thước hộp: hộp nội dung; }

có lẽ nên tìm ra chính xác những lớp nào thực sự cần nó, nhưng điều đó đã sắp xếp mọi thứ cho tôi.

Answer 5

Tôi có thể làm việc này trong bootstrap 3 (môi trường nơi box-sizing được đặt thành border-box) chỉ bằng cách áp dụng box-sizing: content-box cho .slick-header-column.

.slick-header > .slick-header-columns > .slick-header-column { 
    -webkit-box-sizing: content-box;                
    -moz-box-sizing: content-box; 
    box-sizing: content-box; } 

---

Chỉ cần cẩn thận khi sửa đổi các thuộc tính của border.slick-header-column. Tôi đã có thể loại bỏ biên giới ở bên phải bằng cách thiết lập màu sắc để transparent:

.slick-header > .slick-header-columns > .slick-header-column:last-child { 
    border-right-color: transparent; 
} 

Note: Bạn có thể chơi xung quanh với các đặc selector - chọn bạn ghi đè lên là:

.slick-header-column.ui-state-default { ... } 

Answer 6

Không có giải pháp nào phù hợp với tôi, có thể là do mã của SlickGrid đã thay đổi kể từ năm 2012 :) Tôi tìm thấy giải pháp trong số này post, tương tự như @ Wex's, nhưng có sự khác biệt nhỏ:

.slickgrid, 
.slickgrid *, 
.slick-header-column { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
} 

Trường hợp .slickgrid là bộ chọn của phần tử vùng chứa lưới.

Answer 7

Đã giải quyết nó cho tôi. Đây là những gì tôi đã thực hiện: 1. khởi lưới 2. append dữ liệu để nó 3. Trình bày nó bằng cách sử modal của div chứa lưới

Để giải quyết tôi đã làm điều này: 1. Trình bày nó bằng cách sử modal của div có chứa lưới 2. Lưới khởi tạo 3. Nối dữ liệu