2012-08-29 48 views
12

Bạn có thể thêm lớp của riêng bạn vào cột trong jqgrid như thế nào. Như tôi thấy các yếu tố đầu vào html đang nhận được lớp "FormElement". Tôi cần thêm một lớp vào một cột cụ thể. Tôi tìm thấy điều này http://www.trirand.com/blog/?page_id=393/help/cell-tooltip-1/#p21526, nhưng nó không chắc chắn cho dù đó là cách thuận tiện nhất để đạt được điều này? Tôi có nghĩa là để đi qua tất cả các hàng và các tế bào và sau đó tự thay đổi một tài sản lớp - nó có vẻ là một chi phí cho nhiệm vụ "đơn giản" như vậy.Thêm lớp CSS vào cột

CẬP NHẬT

Tôi muốn thêm lớp vì tôi muốn sử dụng các chức năng của phụ tùng multiselect này http://quasipartikel.at/multiselect/. Tiện ích này hoạt động thông qua các lớp được xác định. Đó là lý do tại sao.

Trả lời

8

Có tùy chọn classes colmodel chỉ thực hiện những gì bạn cần. Từ jqGrid documentation:

lớp

chuỗi

Tùy chọn này cho phép thêm các lớp vào cột. Nếu nhiều hơn một lớp sẽ được sử dụng một không gian nên được thiết lập. Ví dụ: classes:'class1 class2' sẽ đặt một lớp 1 và lớp 2 cho mọi ô trên cột đó.

Trong css lưới có một lớp ui-ellipsis được xác định trước cho phép đính kèm dấu ba chấm vào một hàng cụ thể. Ngoài ra điều này cũng sẽ làm việc trong FireFox.

+0

Cảm ơn bạn Justin, tôi không biết tùy chọn này. Như tôi đã nói tôi biết rằng nó nên là một cái gì đó đặc biệt cho việc này. – Anatoliy

22

Có thể bạn cần sử dụng thuộc tính classes cho cột tương ứng.

Tôi không chắc chắn đó là những gì bạn cần vì bạn đã viết về FormElement lớp hiện có ở mẫu. Trong trường hợp bạn phải sử dụng beforeShowForm gọi lại của chỉnh sửa biểu mẫu ví dụ để thêm lớp vào trường nhập của trường tương ứng của biểu mẫu chỉnh sửa. Id của các trường trong biểu mẫu giống với thuộc tính name của cột tương ứng là colModel.

Nếu bạn thực sự cần phải thêm thuộc tính lớp vào các ô của một cột, bạn có thêm một khả năng: xác định cellattr gọi lại cho cột colModel. Cách này có thể thực tế nếu bạn cần thêm lớp không cho tất cả các ô của cột. Bạn có thể kiểm tra một số điều kiện dựa trên nội dung hàng và chỉ đặt lớp nếu điều kiện diễn ra. Ví dụ: việc sử dụng classes:'ui-state-error-text ui-state-error' sẽ đặt hai lớp tương ứng (ui-state-error-textui-state-error) trên tất cả các ô trên cột. Ở phía bên kia các hàm callback

cellattr: function(rowId, val, rawObject) { 
    if (parseFloat(val) > 200) { 
     return " class='ui-state-error-text ui-state-error'"; 
    } 
} 

cho phép bạn thiết lập các lớp chỉ nếu giá trị tế bào cao như 200. Tôi không sử dụng rawObject trong callback trên và vì vậy người ta có thể loại bỏ các tham số tùy chọn. Tôi đã thêm nó trong chỉ gọi lại để nhắc nhở bạn rằng người ta có thể sử dụng tham số để truy cập vào các giá trị từ một cột khác của hàng. Vì vậy, bạn có thể triển khai các kịch bản phức tạp hơn trong cellattr.

Kết quả là người ta có thể có được mạng lưới như trên hình ảnh sau đây:

enter image description here

CẬP NHẬT: Nếu bạn cần thêm class trên các lĩnh vực đầu vào của các chỉnh sửa forme bạn bổ sung có thể sử dụng dataInit gọi lại editoptions. Trong trường hợp sử dụng sẽ rất đơn giản. Bạn có thể làm ví dụ sau:

editoptions: { 
    dataInit: function (domElem) { 
     $(domElem).addClass("ui-state-highlight"); 
    } 
} 

Kết quả là bạn sẽ nhận được các hình thức chỉnh sửa như

enter image description here

Bản demo bạn có thể tìm here.

+0

Cảm ơn bạn Oleg cho một câu trả lời toàn diện như vậy, tôi nghĩ rằng beforeShowForm là phù hợp hơn trong trường hợp của tôi, bởi vì tôi cần nó chỉ trong chỉnh sửa biểu mẫu. – Anatoliy

+0

@Anatoliy: Bạn được chào đón! Có lẽ việc sử dụng 'dataInit' là thực tế hơn cho bạn: xem phần ** CẬP NHẬT ** của câu trả lời của tôi. – Oleg

+0

Có, nó hoạt động tốt. Nó thực sự có vẻ là một cách ngắn nhất để đạt được điều này. Cảm ơn rất nhiều! Nó cũng tuyệt vời để thấy, rằng có ít nhất 3 cách để giải quyết vấn đề. – Anatoliy

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