Làm cách nào để thay đổi biểu tượng sắp xếp cột cho jqgrid?

Question

Tôi cần thay đổi các biểu tượng sắp xếp mặc định cho jqgrid. Hiện tại, nó có mũi tên lên và xuống được hiển thị cho mỗi cột. Làm cách nào để thay thế bằng một biểu tượng duy nhất thay đổi khi được nhấp vào?

Về cơ bản, biểu tượng sẽ chuyển đổi giữa tăng dần, giảm dần và không được phân loại.

---

Giải pháp

Sử dụng câu trả lời Oleg của tôi đã thay đổi các biểu tượng mặc định mũi tên hai là một màu đỏ đơn lên hoặc xuống mũi tên Toggles khi sắp xếp.

jqGrid được gói trong một div với một tìm kiếm Kết quảclass.

Điều này làm cho các biểu tượng tiêu đề màu đỏ:

.searchResults .ui-state-default .ui-grid-ico-sort.ui-icon 
{ 
    background-image: url("../images/ui-icons_cd0a0a_256x240.png"); 
} 

này tập trung các biểu tượng khi chỉ có một biểu tượng được hiển thị và người kia đang ẩn:

.searchResults .ui-jqgrid .ui-icon-asc, .searchResults .ui-jqgrid .ui-icon-desc 
{ 
    height:12px; 
    margin-top:0px; 
} 

này ẩn biểu tượng loại hoạt động:

.searchResults .ui-state-disabled.ui-icon-desc, .searchResults .ui-state-disabled.ui-icon-asc 
{ 
    display: none; 
} 

Answer 1

jqGrid sử dụng giao diện người dùng jQuery cho các biểu tượng sắp xếp. Bạn có thể thực hiện chủ đề của riêng bạn chủ động trên http://jqueryui.com/themeroller/ và tải xuống vào cuối tùy chỉnh. Nếu bạn chỉ muốn thay đổi biểu tượng sắp xếp thành các biểu tượng khác đã tồn tại trong chủ đề, bạn có thể thực hiện việc này dễ dàng hơn. Nhưng trước khi tất cả các bạn phải hiểu làm thế nào các biểu tượng sẽ được sử dụng trong các tiêu đề cột.

Lúc khởi tạo, nó sẽ được tạo tiêu đề cho tất cả các cột của jqGrid. Mỗi tiêu đề chứa các nhịp với các biểu tượng sắp xếp. Các khối nhịp trông giống như sau

<span class="s-ico" style="display: none;"> 
    <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" sort="asc" /> 
    <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" sort="desc" /> 
</span> 

Vì có "biểu tượng ui" lớp các yếu tố có nền đến từ chủ đề giao diện người dùng jQuery mà bạn sử dụng. Từ nền sẽ được sử dụng các phần tương ứng với biểu tượng "ui-icon-triangle-1-n" và "ui-icon-triangle-1-s". Lớp học ui-icon, ui-icon-triangle-1-n và ui-icon-triangle-1-s được định nghĩa như sau

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; } 
.ui-icon-triangle-1-n { background-position: 0 -16px; } 
.ui-icon-triangle-1-s { background-position: -64px -16px; } 

Nếu bạn muốn thay thế đó để các biểu tượng khác (xem tất cả các biểu tượng có sẵn tiêu chuẩn tại botom của http://jqueryui.com/themeroller/), bạn có thể làm điều này cho ví dụ trực tiếp sau khi tạo jqGrid (sau jQuery("#list").jqGrid({/*...*/});). Nếu bạn không tìm thấy trong hình nền các biểu tượng mà bạn cần bạn tốt hơn không nên thay đổi một biểu tượng hiện có. Bạn có thể thêm một số phần mới trong hình nền mà bạn sử dụng.

Không có hỗ trợ trực tiếp cho các biểu tượng sắp xếp 3 trạng thái (tăng dần, giảm dần và không phân loại) trong jqGrid. Nếu bạn muốn thực hiện điều này, tôi khuyên bạn nên đọc kỹ chức năng sortData của grig.base.js mà bạn tìm thấy trong src thư mục con của các nguồn jqGrid đã tải xuống. Hàm này gọi hàm jQuery.hide() hoặc jQuery.show() cho span.s-ico, thêm hoặc xóa ui-state-disabled lớp trên một từ các nhịp con và gọi onSortCol xử lý sự kiện nếu nó được xác định.Vì vậy, bạn có thể triển khai tất cả thay đổi biểu tượng sắp xếp bên trong bộ xử lý sự kiện tùy chỉnh onSortCol.

CẬP NHẬT:Free jqGrid ngã ba có nhiều tùy chọn để tùy chỉnh biểu tượng sắp xếp. Trước tiên, nếu hỗ trợ các biểu tượng Font Awesome. Bạn chỉ cần bao gồm Font Awesome CSS và tùy chọn. Ví dụ, một người có thể sử dụng threeStateSort: true để cho phép hiển thị mục theo thứ tự gốc, chưa được phân loại khi nhấp 3 lần vào tiêu đề cột. Người ta có thể sử dụng sortIconsBeforeText: true để thay đổi thứ tự của các biểu tượng và văn bản. Việc đặt các biểu tượng sắp xếp trước văn bản có thể hữu ích trong trường hợp sử dụng văn bản dài trong tiêu đề cột. Người ta có thể sử dụng tùy chọn showOneSortIcon: true để chỉ hiển thị một biểu tượng sắp xếp (desc hoặc asc) thay vì hai biểu tượng sắp xếp (một biểu tượng trên biểu tượng thứ hai hoặc một ở gần biểu tượng thứ hai).

Một thậm chí có thể tùy chỉnh đầy đủ các biểu tượng sắp xếp bằng cách ghi đè phương pháp $.jgrid.builderSortIcons. The demo cho biết cách người ta có thể sử dụng phương thức $.jgrid.builderSortIcons tùy chỉnh đơn giản để đặt * các biểu tượng sắp xếp khác nhau cho các cột khác nhau. The demo sử dụng ba biểu tượng khác nhau tùy thuộc vào loại dữ liệu trong cột. Các cột với kiểu sắp xếp mặc định sorttype: "text" màn

và

các cột có kiểu dữ liệu (sorttype: "integer", sorttype: "int", sorttype: "float", sorttype: "number" hoặc sorttype: "currency") sẽ hiển thị

và

và tất cả các cột khác, ví dụ, cột có sorttype: "date" màn

và