2012-04-28 17 views
10

Tôi muốn jqgrid của mình trông giống như bootstrap tables giao diện.
Có thể tùy chỉnh giao diện hay không.
Tôi biết rằng hỗ trợ jqgrid (chủ đề jquery), nhưng tôi muốn nhìn và cảm nhận bootstarp và không phải chủ đề jquery.Có thể tùy chỉnh giao diện và giao diện jqgrid không?

+0

từ đâu mà câu hỏi thích một người đàn ông hay phụ nữ đến từ .. khách hàng của tôi muốn nhìn và cảm thấy bootstarp .. tôi không muốn viết plugin lưới của riêng tôi ... cư xử như một chuyên gia .. – Rajesh

Trả lời

7

Tôi đã gặp phải sự cố tương tự và kết thúc giảm jqgrid và nhận DataTables thay thế - http://datatables.net/. Nó rất giống với jqgrid, được cho là có chức năng tốt hơn và đi kèm với hướng dẫn về cách tạo kiểu cho nó như bootstrap - http://datatables.net/blog/Twitter_Bootstrap.

+3

ya điều này là ok datatables đến với bố trí bootsrap .. Tôi hy vọng sam ething có thể được thực hiện với jqgrid cũng .. bố trí như vậy là như vậy trong jqgrid..user nên được tự do để chọn tài sản CSS .. Tôi hy vọng thiết kế jgrid là nghe lời than phiền của tôi .. – Rajesh

9

Vấn đề là jqGrid dựa trên jQuery UI CSS framework. jqXây dựng lưới từ phần tử trống <table> động. Nó chèn rất nhiều yếu tố có tên CSS được xác định trước như "ui-widget", "ui-widget-content", "ui-state-hover", "ui-icon" v.v.

Tôi chưa từng sử dụng bootstrap trước đây. Dường như nó có khuôn khổ Base CSS riêng. Vì vậy, cách duy nhất mà tôi thấy là bạn tùy chỉnh jQuery UI CSS để nó tương ứng với việc tìm kiếm bootstrap. Bạn có thể làm điều này liên quan đến Themeroller. Trên trang bạn có thể tương tác tạo Theme jQuery UI mới trông rất gần với bootstrap CSS. Cuối cùng, bạn có thể tải xuống CSS tùy chỉnh bằng cách nhấp vào nút "Tải xuống chủ đề" (xem phần bên trái trên trang trong tab "Cuộn riêng của bạn"). Hoặc bạn có thể sử dụng jQuery UI ThemeRoller Developer Tool để tạo CSS mới.

+0

nhưng những gì về làm cho jqgrid đáp ứng? đó là toàn bộ ý tưởng sử dụng Twitter Bootstrap, bất kỳ đề xuất nào? – Yasser

+0

@Yasser: Xin lỗi, nhưng tôi không hiểu ý bạn là gì. – Oleg

+0

Xin chào @Oleg! Tôi muốn hỏi làm thế nào để làm cho jqgrid đáp ứng – Yasser

3

jqGrid sử dụng jQuery UI dựa trên html và lớp học để chủ đề Bootstrap cho jQuery UI nên thực hiện thủ thuật, trừ khi bạn đã tùy chỉnh Bootstrap của bạn thì các tùy chỉnh tương tự cần phải được thực hiện hai lần.

http://addyosmani.github.com/jquery-ui-bootstrap/

+0

Liên kết này bị hỏng (Không tìm thấy tệp) – haraman

0

Tôi đang sử dụng jqGrid miễn phí (một chi nhánh của trirand jqGrid), và nó hỗ trợ tích hợp trong phong cách. Bạn có thể điều chỉnh look-and-feel với hai lựa chọn chính:

  1. guiStyles (https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L600): jQueryUI, bootstrap, bootstrapPrimary, bootstrap4
  2. icons: (https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L389): jQueryUI, fontAwesome, glyph