Thay đổi kích thước jqGrid dựa trên số hàng?

Question

Tôi muốn jqGrid của tôi co lại và mở rộng dựa trên số hàng mà nó có. Giả sử nó hiện có 10 hàng, chiều cao của jqGrid sẽ co lại thành 10 hàng (để không có hàng trống nào được hiển thị).

Nếu tuy nhiên có quá nhiều hàng, chiều cao của lưới sẽ mở rộng thành giá trị 'chiều cao' tối đa và thanh cuộn sẽ xuất hiện.

Answer 1

Được tích hợp vào lưới. Bạn đặt height thành 100%. There's a demo on this page nếu bạn đi "Advanced -> Thay đổi kích thước

Answer 2

gọi các chức năng dưới đây từ afterInsertRow và khi xóa một hàng:

function adjustHeight(grid, maxHeight){ 
    var height = grid.height(); 
    if (height>maxHeight)height = maxHeight; 
    grid.setGridHeight(height); 
} 

Answer 3

Hãy thử:

jQuery(".ui-jqgrid-bdiv").css('height', jQuery("#bigset").css('height')); 

Trong callback function jqGrid loadComplete#bigset.. là số id cho bảng tôi đã sử dụng. Điều này làm việc hoàn hảo cho tôi.

Answer 4

Mặc dù chiều cao 100% wo rked tốt trong bản demo, nó đã không làm việc cho tôi. Lưới trở nên lớn hơn nhiều, có lẽ nó đã cố gắng chiếm chiều cao của cha mẹ. Giải pháp của Amit làm việc hoàn hảo cho tôi, cảm ơn! (Tôi mới là người đóng góp ở đây, và vì vậy cần một 'danh tiếng' cao hơn để đánh dấu bất kỳ phiếu bầu nào :))

Answer 5

Tôi đã gặp phải vấn đề tương tự và không có giải pháp nào hiệu quả đối với tôi. Một số công việc nhưng sau đó không có thanh cuộn.

Vì vậy, đây là những gì tôi đã làm:

jQuery("#grid").jqGrid('setGridHeight', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css('height')))); 

Mã này phải được đặt trong xử lý loadComplete và sau đó nó hoạt động tốt. Tham số đầu tiên của Math.min là chiều cao mong muốn khi có đủ dữ liệu để điền vào danh sách. LƯU Ý rằng giá trị tương tự này phải được đặt làm chiều cao cho lưới. Kịch bản này choses tối thiểu của chiều cao thực tế và chiều cao mong muốn của lưới điện. Vì vậy, nếu không có đủ hàng thì chiều cao lưới sẽ bị co lại, nếu không chúng tôi luôn có cùng chiều cao!

Answer 6

Đây là một phương pháp chung tôi đã đưa ra dựa trên giải pháp của Amit. Nó sẽ cho phép bạn chỉ định số hàng tối đa để hiển thị. Nó sử dụng chiều cao tiêu đề của lưới để tính chiều cao tối đa. Nó có thể cần tweeking nếu hàng của bạn không có chiều cao giống như tiêu đề của bạn. Hy vọng nó giúp.

function resizeGridHeight(grid, maxRows) { 
    // this method will resize a grid's height based on the number of elements in the grid 
    // example method call: resizeGridHeight($("#XYZ"), 5) 
    // where XYZ is the id of the grid's table element 
    // DISCLAIMER: this method is not heavily tested, YMMV 

    // gview_XYZ is a div that contains the header and body divs 
    var gviewSelector = '#gview_' + grid.attr('id'); 
    var headerSelector = gviewSelector + ' .ui-jqgrid-hdiv'; 
    var bodySelector = gviewSelector + ' .ui-jqgrid-bdiv'; 

    // use the header's height as a base for calculating the max height of the body 
    var headerHeight = parseInt($(headerSelector).css('height')); 
    var maxHeight = maxRows * headerHeight; 

    // grid.css('height') is updated by jqGrid whenever rows are added to the grid 
    var gridHeight = parseInt(grid.css('height')); 
    var height = Math.min(gridHeight, maxHeight); 
    $(bodySelector).css('height', height); 
} 

Answer 7

Thêm bên dưới mã bên trong chức năng loadComplete

var ids = grid.jqGrid('getDataIDs'); 
//setting height for grid to display 15 rows at a time 
if (ids.length > 15) { 
    var rowHeight = $("#"+gridId +" tr").eq(1).height(); 
    $("#"+gridId).jqGrid('setGridHeight', rowHeight * 15 , true); 
} else { 
//if rows are less than 15 then setting height to 100% 
    $("#"+gridId).jqGrid('setGridHeight', "100%", true); 
}