jqGrid - Có cách nào để luôn hiển thị thanh cuộn dọc không?

Question

Ứng dụng của tôi có một số jqGrids có thể có hoặc không chứa đủ hàng để yêu cầu thanh cuộn dọc. Nhưng các hàng có thể được thêm động vào các lưới này sau khi chúng được tạo ra, để lưới có thể yêu cầu một thanh cuộn.

Vấn đề là nếu lưới không có đủ hàng để yêu cầu thanh cuộn, có khoảng trống ở phía bên tay phải của lưới. Tôi muốn sửa lỗi này bằng cách nào đó - hoặc luôn hiển thị thanh cuộn dọc hoặc bằng cách nào đó sẽ tự động thêm nó khi cần thiết.

Tôi đã thử thêm CSS sau đây để .ui-jqGrid-bdiv div của lưới:

overflow-y: scroll; 

Sử dụng jQuery sau (mã là xấu xí, tôi biết):

$("#mygrid").closest(".ui-jqgrid-bdiv").attr("style", 
$("#mygrid").closest(".ui-jqgrid-bdiv").attr("style") + " overflow-y: scroll; "); 

này hoạt động tốt trên Firefox và Chrome, nhưng trên IE lưới không bao giờ hiển thị thanh cuộn (cho dù có bao nhiêu hàng tôi thêm vào, chúng được thêm vào dưới cùng của lưới và thanh cuộn dọc không bao giờ xuất hiện).

Mọi trợ giúp đều được đánh giá cao!

Answer 1

overflow-y là CSS3, và nó chưa được hỗ trợ đầy đủ bởi IE (thở dài ...)

Vì vậy, tôi đoán chỉ có 2 điều CSS bạn có thể làm về vấn đề này, mà không cần bất kỳ đánh dấu khác có liên quan, là sử dụng hoặc overflow: auto (sẽ cho phép trình duyệt quyết định) hoặc overflow: scroll, sẽ buộc cả thanh cuộn dọc và thanh ngang.

Cách giải quyết có thể là bọc toàn bộ lưới trong div lớn hơn với chiều cao tối thiểu, do đó bạn đặt bằng với cửa sổ trình duyệt + 1px. Bằng cách đó bạn sẽ buộc một thanh cuộn dọc.

Đặt chiều cao tối thiểu có thể khó thực hiện trong tất cả các trình duyệt, nhưng tôi thấy điều này hoạt động tốt trong hầu hết các trình duyệt.

.the-wrapper{ 
    height: auto !important; /* for real browsers*/ 
    height: 601px;   /* IE6 will use this a min-height. Use any height you need - you can even set this using JavaScript depending on the browser window height */ 
    min-height: 601px;  /* for real browsers - same value as height */ 
} 

Tất nhiên, điều này sẽ thêm một số khoảng trống bên dưới lưới. Chào mừng bạn lên tàu!

Answer 2

Bạn đã đặt thuộc tính độ cao trên lưới? IE có thể trở nên gắt gỏng với thanh cuộn nếu không có chiều cao được đặt.

Answer 3

Bạn đã thử phiên bản beta jQgrid 3.6, có nhiều tính năng mới như: Hàng cuộn đúng Tôi nghĩ, đây là giải pháp cho bạn.

Demo các tính năng mới: http://www.trirand.com/jqgrid/jqgrid36/jqgrid.html

alsow có phương pháp mới được bổ sung: gridResize mà có thể thay đổi kích thước lưới. http://github.com/tonytomov/jqGrid/commit/a008ebf7b8ad684b21e51f21eed4301b82bc66f2

Answer 4

Có tùy chọn scrollOffset cho jqGrid.

Đặt thành 0 và không gian trống sẽ biến mất.