Cột có thể thay đổi kích thước

Question

Tôi đang phát triển một ứng dụng web và đang tìm cách tạo các thẻ dữ liệu của riêng mình.

Tôi biết rằng có rất nhiều kịch bản tuyệt vời ở đó với tất cả chuông và còi, nhưng tôi cần chức năng cụ thể của riêng tôi, kiểu dáng css và khả năng sử dụng các điều khiển ui của riêng tôi trong đó.

Thực sự, điều duy nhất tôi cần là khả năng thay đổi kích thước các cột. Tôi không thực sự quan tâm nếu đánh dấu không duy trì cấu trúc hàng hoặc không phải ngữ nghĩa, bởi vì tất cả dữ liệu sẽ được điền bởi các yêu cầu ajax.

Tôi đã suy nghĩ một giải pháp có thể là đặt từng cột thành div.

Có hướng dẫn nào ở đó có thể giúp tôi không?

Answer 1

Không thực sự là một hướng dẫn, nhưng một xương thực sự trần Ví dụ, bạn có thể làm việc từ: http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/

Answer 2

Tôi khuyên bạn nên sử dụng jQuery UI Resizable với một số cải tiến. Plugin thực sự chỉ tập trung vào việc thay đổi kích thước và cho phép tùy chỉnh đầy đủ vì bạn có thể thêm các chức năng gọi lại của riêng bạn vào bất kỳ sự kiện nào. Theo mặc định, tuy nhiên, plugin không thể thay đổi kích thước tiêu đề bảng, nhưng tôi có thể làm cho nó chạy với HTML hợp lệ, cập nhật vùng COLGROUP của bảng để thay đổi kích thước.

Các ý tưởng cụ thể sẽ là:

1. Bảng HTML xác định chiều rộng ban đầu trong lĩnh vực COLGROUP của nó và có CSS ​​sở hữu bảng bố trí: cố định.
2. Trang trí các phần tử TH với jQuery UI .resizable().
3. Khi bắt đầu thay đổi kích thước: Tìm phần tử COL phù hợp của hoạt động TH và nhớ chiều rộng gốc.
4. Thay đổi kích thước: Tính toán đồng bằng thay đổi kích thước và cập nhật (tăng/giảm) phần tử COL đã chọn. Điều này sẽ thay đổi kích thước toàn bộ cột với mọi trình duyệt.

Plugin init:

$(".resizable th").resizable({ 
handles: "e", 

// set correct COL element and original size 
start: function(event, ui) { 
    var colIndex = ui.helper.index() + 1; 
    colElement = table.find("colgroup > col:nth-child(" + 
    colIndex + ")"); 

    // get col width (faster than .width() on IE) 
    colWidth = parseInt(colElement.get(0).style.width, 10); 
    originalSize = ui.size.width; 
}, 

// set COL width 
resize: function(event, ui) { 
    var resizeDelta = ui.size.width - originalSize; 

    var newColWidth = colWidth + resizeDelta; 
    colElement.width(newColWidth); 

    // height must be set in order to prevent IE9 to set wrong height 
    $(this).css("height", "auto"); 
} 
}); 

tôi đã mô tả giải pháp đầy đủ bao gồm JavaScript, đánh dấu HTML, qua trình duyệt CSS và Live-Demo tại http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/