MVC3 WebGrid Định dạng hoặc Tạo Kiểu Đầu đề Cột

Question

Tôi đang sử dụng WebCrid MVC3 mới. Cho đến nay rất tốt, chỉ gặp vấn đề về tạo kiểu/định dạng các tiêu đề cột. Điều tốt nhất tôi đã có là một workaround áp dụng cùng một lớp css từ hàng đầu tiên của WebGrid cho tiêu đề bảng.

var headerCells = $("#grid tr:eq(0) th"); 
var firstRowCells = $("#grid tr:eq(1) td"); 

$.each(firstRowCells, function (index, value) { 
    $(headerCells[index]).addClass($(firstRowCells[index]).attr("class")); 
}); 

Ví dụ này rõ ràng là thiếu một tấm séc để đảm bảo có hàng hoặc thực sự là yếu tố id specifed, nhưng nó áp dụng lớp css từ dòng đầu tiên đến dòng tiêu đề có nghĩa là bạn có thể tạo kiểu độc lập với nhau.

td.my-column-style { width:100px } 
th.my-column-style { text-align:right;} 

Có cách nào được tạo kiểu để tạo kiểu cho các phần tử tiêu đề cột (không chỉ sử dụng thuộc tính headerStyle) không?

Answer 1

Không, hiện tại không có cách tích hợp để tạo kiểu cho ô tiêu đề một cách độc lập, chỉ có hàng tiêu đề thông qua thuộc tính headerStyle.

Tôi nghĩ cách giải quyết của bạn là đủ tốt.

Answer 2

Tôi biết đây là một câu hỏi cũ, nhưng điều này có thể hữu ích cho những người xem tình cờ gặp phải. Bộ chọn giả css-child css là bạn của bạn, nếu bạn không muốn dựa vào javascript để sao chép các lớp. Nó rất dễ dàng để thêm một lớp học để webgrid của bạn bằng cách sử dụng tài sản tableStyle, và sau đó bạn có thể tạo kiểu tiêu đề cá nhân với các bit sau css:

.webgridclass tr th:nth-child(1){ 
    background:#ff0; 
} 

.webgridclass tr th:nth-child(2){ 
    background:#f60; 
} 

Thật không may, điều này không được hỗ trợ trong IE8 và IE trước đó, nhưng nó có hỗ trợ đầy đủ trong tất cả các trình duyệt thích hợp (mới hơn FF3).

Answer 3

Chúng tôi có thể thực hiện việc này bằng mã số Javascript như sau.

JsFiddle Example

$("table tr th:nth-child(n)").addClass("col-md-1");