Hãy jqGrid điền container

Tôi đang sử dụng cách bố trí jQuery plugin và các plugin jqGrid tại một trong những dự án của tôi và họ làm việc rất tốt ngoại trừ một vấn đề nhỏ ...Hãy jqGrid điền container

Tôi muốn jqGrid để lấp đầy hoàn toàn khung (khung bố cục jQuery) có chứa nó. Thay đổi kích thước cửa sổ nên thay đổi kích thước jqGrid, đóng ngăn nên ẩn jqGrid, v.v.

Cả jqGrid và jQuery Layout đều cung cấp các cuộc gọi lại nhưng khi tôi sử dụng bố cục trang sẽ phá vỡ khủng khiếp.

Có ai có kinh nghiệm trộn jqGrid với Bố cục jQuery không?

Nguồn

2010-05-27 Horacio

tôi khuyên bạn nên đọc qua resize-jqgrid-when-browser-is-resized, mà thảo luận về một số kỹ thuật cho thay đổi kích thước lưới của bạn.

Nguồn

2010-05-27 14:12:21

Cảm ơn, điều này dẫn tôi đến câu trả lời tôi cần. – Horacio

Bạn được chào đón, vui mừng được giúp đỡ –

@JustinEthier làm cách nào để chúng tôi thực hiện điều này dưới dạng lưới chất lỏng như bảng khởi động twitter. ví dụ tại đây http://192.69.216.111/themes/preview/ace/tables.html –

Đây là giải pháp hiện tại của tôi:

Đầu tiên tạo một hàm thay đổi kích thước đó được gọi là bởi sự kiện onresize:

function resizeGrid(pane, $Pane, paneState) { 
    if(grid = $('.ui-jqgrid-btable:visible')) { 
    grid.each(function(index) { 
     var gridId = $(this).attr('id'); 
     $('#' + gridId).setGridWidth(paneState.innerWidth - 2); 
    }); 
    } 
}

Sau đó, trong cách bố trí của bạn chúng tôi thiết lập các sự kiện thay đổi kích thước để gọi phương pháp này:

$('#mylayout_id').layout({ 
    center: { 
    closable: false, 
    resizable: false, 
    slidable: false, 
    onresize: resizeGrid, 
    triggerEventsOnLoad: true // resize the grin on load also 
    }, 
    west: { 
    fxName: "slide", 
    size: 250, 
    maxSize: 300 
    }, 
    east: { 
    fxName: "slide", 
    size: 250, 
    maxSize: 300 
    } 
});

Với điều này, bạn có thể đặt jqGrid bên trong bất kỳ ngăn nào trong bố cục của bạn và chúng sẽ được thay đổi kích thước để vừa với khung khi cửa sổ trung tâm được thay đổi kích thước.

Nguồn

2010-05-28 02:17:06 Horacio

Tôi đang sử dụng jqGrid 4,0 (thông qua jquery Struts 2 plugin) và jQuery bố trí plugin. Câu trả lời trước không hiệu quả với tôi. Chỉ có chức năng resizeGrid là một vấn đề. Chỉ cần thay thế hàm resizeGrid ở trên bằng cách này. Điều này sẽ chỉ thay đổi kích thước một lưới - một trong đó có id là gridtable.

function resizeGrid(pane, $Pane, paneState) { 
    jQuery("#gridtable").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true'); 
};

#gridtable là id của phần tử bảng bạn tạo cho jqGrid

<div id="grid_container"> 
    <table id="gridtable" class="mygrid"></table> 
    <div id="grid_pgr"></div> 
</div>

Ngoài ra, nếu bạn đang sử dụng struts2 plugin jquery, lưới điện được tự động tạo ra sử dụng <script> khối trong <body> (không trong các khối tập lệnh trong phạm vi <head>). Vì vậy, nếu bạn gọi số layout() và đặt triggerEventsOnLoad: true trong <head>, bạn sẽ gặp phải lỗi javascript. Để tránh điều này, bạn có thể thêm khối tập lệnh này vào đâu đó sau khi (các) lưới của bạn được khai báo.

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery("#gridtable").jqGrid('setGridWidth',$myLayout.state.center.innerWidth - 2, 'true'); 
}); 
</script>

Nếu bạn có nhiều hơn một lưới, bạn có thể truy cập chúng bằng một lớp học mà bạn đã xác định trên các yếu tố bảng (xem Đoạn mã HTML ở trên), và sau đó chạy các phương pháp resizeGrid trên mỗi trong số họ.

Nguồn

2011-05-18 13:25:35 Rosh

Trả lời

Các vấn đề liên quan