Biến đổi hàng có khả năng trong SlickGrid không?

Question

Tôi muốn cung cấp chiều cao hàng biến tùy thuộc vào kích thước nội dung. là nó có thể trong Slickgrid?

Bạn có thể chỉ cho tôi bất kỳ ví dụ nào không?

Answer 1

Đơn giản và đơn giản, điều này không được hỗ trợ trong SlickGrid và có khả năng sẽ không bao giờ xảy ra. Lấy làm tiếc.

Answer 2

Điều này là có thể nhưng nó không tầm thường và bạn có thể sẽ bị phạt. Cách thức hoạt động của SlickGrid, bạn cần có thể trả lời nhanh hai câu hỏi sau:

• Đối với một hàng nhất định X, giá trị chênh lệch hàng đầu cho hàng đó là bao nhiêu?
• Đối với một giá trị được xác định Y, hàng nào nằm ở độ lệch đó?

Khi bạn sử dụng chiều cao hàng tĩnh, trả lời những câu hỏi này là không đáng kể; tuy nhiên, với chiều cao hàng động, bạn sẽ cần phải duy trì một vài cấu trúc dữ liệu bổ sung.

Dưới đây là khoảng những gì tôi đã thay đổi trong Slick.Grid.js

• Thêm một mảng mới để theo dõi kích thước hàng. Khởi tạo tất cả các hàng thành kích thước mặc định
• Xóa các quy tắc css trong createCssRules, thiết lập chiều cao ô
• Thêm một số mã ở cuối renderRows kiểm tra chiều cao được hiển thị của mỗi ô trong hàng và sau đó đặt chiều cao của tất cả các ô đến mức tối đa (và lưu trữ chiều cao trong mảng kích thước hàng). Bạn cũng cần phải điều chỉnh bù đầu dựa trên tổng chiều cao của các hàng phía trên giá trị hiện tại.
• Thêm mã vào cuối kết xuất để đổi kích thước canvas thành tổng của tất cả các độ cao của hàng.
• Cập nhật getViewport để trả về hàng trên cùng và dưới cùng dựa trên tổng các chiều cao của hàng.
• Có một số địa điểm khác nơi tùy chọn.rowHeight được sử dụng. Bạn có thể bỏ qua một số trong số chúng nhưng ít nhất, bất cứ nơi nào canvas được thay đổi kích thước cần phải được thay đổi.

Để thực hiện điều này (thực hiện) thực tế, bạn cũng sẽ cần bộ nhớ cache bù hàng đầu (bộ nhớ cache tổng các kích thước hàng). Điều này sẽ cho phép tính toán nhanh cho câu hỏi đầu tiên và sẽ cho phép tìm kiếm nhị phân trả lời câu hỏi thứ hai.

Tôi hy vọng điều đó sẽ hữu ích.

Answer 3

Tôi biết điều này không đáp ứng được tâm điểm của câu hỏi, nhưng đã quyết định một giải pháp đơn giản hiện nay là nỗ lực tối thiểu và đáp ứng các yêu cầu của tôi vào lúc này. Vì vậy, đây chỉ là trong trường hợp những người khác đang tìm kiếm một giải pháp đơn giản là tốt.

Tôi bắt đầu với hộp nhập, nơi thay đổi giá trị sẽ thay đổi kích thước hàng. Tuy nhiên, bây giờ tôi đã định cư bằng cách sử dụng một thanh trượt. Như một vấn đề của thực tế, kể từ khi tôi có dữ liệu nhỏ như vậy trong lưới của tôi (đảm bảo là một lượng nhỏ dữ liệu, và rất ít hàng), tôi tự động thay đổi kích thước lưới như các slide trượt. Bây giờ, tôi biết nhiều người sẽ nói đây là một ý tưởng khủng khiếp bởi vì nó có thể chậm khủng khiếp, nhưng một lần nữa, tôi đang sử dụng một lượng dữ liệu rất nhỏ.

Điều quan trọng là tôi tạo lại lưới lần nữa với giá trị rowHeight mới được đặt trong các tùy chọn.

1. Bao gồm jQuery UI:
2. Tạo các yếu tố cho thanh trượt và giá trị
3. Hãy chắc chắn lưới của bạn được thiết lập và khởi tạo cho khi tải trang.

4. Thêm mã để xử lý thanh trượt và tạo lại lưới (cách khác, bạn có thể di chuyển những gì tôi có trong chức năng "trượt" sang chức năng "dừng" nếu bạn không muốn vẽ lại trên mỗi dấu trượt):

   $j("#resizeRowSlider").slider({ 
        range:"min" 
       , min: 50 
       , max: 200 
       , value: 50 
       , create: function(even, ui) { 
        $j("rowResizeValue").html("50"); 
       } 
       , slide: function(event, ui) { 
        $j("rowResizeValue").html(ui.value); 
   
        options.rowHeight = ui.value; 
   
        // I do a manual resize; you could use autoHeight:true in grid options 
        resizeGrid(); 
   
        grid = new Slick.Grid("#" + gridElemId, json, columns , options); 
        grid.setSelectionModel(new Slick.RowSelectionModel()); 
   
        refreshGrid(); // Handle invalidate, resizeCanvas 
       } 
       , stop: function(event, ui) { 
       } 
   }); 
   

Ngoài ra, tôi nên lưu ý rằng đây không phải là trên một cơ sở cho mỗi hàng, nhưng một lần nữa, nó phù hợp với nhu cầu của tôi bây giờ. Nó không lý tưởng, nhưng nó hoạt động. Ngoài ra, nếu bạn thực sự cần render lưới lần đầu tiên mà không bị tràn, bạn có thể tạo div ẩn bất cứ khi nào bạn nhận được văn bản được đề cập và thêm display:table-cell, sau đó nhận chiều cao div và đặt giá trị đó cho tùy chọn lưới cho rowHeight. Sau đó, tạo (hoặc tạo lại) lưới.

Answer 4

Tôi đã thực hiện điều này trong dự án của mình, với sự trợ giúp của câu trả lời của @Stephen Robinson tại đây.
Nếu có ai quan tâm, họ có thể kiểm tra:
https://github.com/vihari/Seaview/blob/version3.0/SlickGrid-master/slick.grid.js.
Nó có thể được kích hoạt với tệp ở trên nếu bạn đặt tùy chọn.enableWrap thành true.
Cảm ơn bạn.

Answer 5

Giải pháp của Vihari Piratla - Tôi đã tải xuống Seaview, đã sửa đổi /SlickGrid-master/examples/example1-simple.html để thêm tùy chọn mới enableWrap - trong khi thử nghiệm của tôi, example1-simple.html tiếp tục hoạt động như mong đợi khi enableWrap được đặt thành false, nhưng khi được đặt thành true thì lưới được vẽ rỗng mà không có nội dung. Tôi đã tự hỏi nếu có cách đặc biệt sử dụng tùy chọn enableWrap?

Answer 6

Ngoài ra còn có chiều cao thực hiện biến bằng cách JLynch7 trên github:

https://github.com/JLynch7/SlickGrid/tree/variableRowHeight

Theo như tôi hiểu được chiều cao được thiết lập bởi người sử dụng và không được tự động tính toán dựa trên nội dung của các tế bào của hàng (Tôi chỉ xem ví dụ/example-variable-row-height-dataview.html)

Answer 7

Tôi vừa mới chia nhỏ SlickGrid để thêm vào một loạt các tính năng mới - bao gồm các hàng biến (và có thể thay đổi kích thước). Bạn có thể thử nó ở đây: https://github.com/globexdesigns/doby-grid

Answer 8

Xác định biến này bên ngoài ....

var tableHeight = 0;

Trước khi tạo lưới điện slick, sử dụng dưới dòng:

// 30 px cho mỗi dòng này sẽ bao gồm các tiêu đề ... Bạn có thể điều chỉnh giá trị này cho bảng của bạn.

tableHeight = dataTable.length * 30;  

if(tableHeight > ($(window).height() - 400)){ 
     $("#myGrid").height($(window).height() - 400); 
}else{ 
     $("#myGrid").height(tableHeight); 
} 

Nếu người dùng thay đổi màn hình khi trang đã được tạo ra, dưới đây sẽ thay đổi kích thước bảng dựa trên màn hình và số dòng dữ liệu:

$(window).resize(function() { 

    // For grid height 
    if(tableHeight > ($(window).height() - 400)){ 
     $("#myGrid").height($(window).height() - 400); 
    }else{ 
     $("#myGrid").height(tableHeight); 
    } 

    // For grid width 
    $("#myGrid").width("100%"); 

    // Resize the grid dynamically. 
    gridName.resizeCanvas(); 
}); 

Answer 9

Là một bản tóm tắt các tùy chọn ở trên không chúng được chính thức, hỗ trợ và sản xuất sẵn sàng. Ngay cả tùy chọn doby-grid (được hỗ trợ nhiều hơn) vẫn được liệt kê là không sẵn sàng sản xuất.

Lưu ý, cũng có sự khác nhau giữa:

• Chiều cao hàng có thể thay đổi riêng biệt cho mỗi hàng.
• Văn bản có thể quấn quanh dòng tiếp theo.
• Chiều cao hàng có thể tự động điều chỉnh để vừa với nội dung.

Đáng ngạc nhiên, với tất cả các biến thể SlickGrid ở trên (và nhiều thư viện DataGrid khác), bạn có thể nhận được một hoặc hai trong số đó, chứ không phải cả ba.

Nếu bạn không quá quan tâm đến chính thức, hỗ trợ và sản xuất đã sẵn sàng, thì đây là ấn tượng của tôi từ thử nghiệm 3 SlickGrid biến thể liệt kê ở trên:

Seaview

• Người dùng báo cáo vấn đề với chỉ hiển thị màu trắng, không được thử nghiệm với các ô chỉnh sửa (cảnh báo), phân trang có thể không hoạt động (cảnh báo).
• Thử nghiệm bản demo của tôi cho thấy rằng nó đã bao bọc văn bản và tự động thay đổi chiều cao ô ok, nhưng có lỗi mà hàng/đường viền bị tắt bởi một vài pixel. Vì vậy, có thể sử dụng được, nhưng không sẵn sàng sản xuất.
• Tôi đã thử tải xuống và sử dụng nó. Nó có gói văn bản trong các tế bào - tốt. Tự động điều chỉnh chiều cao ô của nó rất bị hỏng/không hoàn chỉnh, khiến cho việc gói văn bản trở nên vô dụng (trừ khi bạn sửa chiều cao hàng - không lớn). Tôi đã cố định một phần điều chỉnh tự động chiều cao ô, nhưng thực hiện khá nhiều công việc. Không phải là một nhiệm vụ đơn giản. Không làm việc ra khỏi hộp. Chắc chắn không phải sản xuất đã sẵn sàng.

JLynch7

• Không demo để chạy mà không cần tải.
• Tôi đã thử tải xuống và sử dụng nó. Đó là lỗi (tôi đã phải sửa chữa nó để làm cho nó hoạt động), thêm chiều cao hàng biến, nhưng dường như KHÔNG bọc văn bản và KHÔNG tự động điều chỉnh chiều cao hàng dựa trên văn bản !. Nó không được duy trì tích cực. Và không phải là rất phổ biến, vì vậy không được hỗ trợ rất tốt. Seaview có vẻ tiên tiến hơn, mặc dù tính năng "tự động điều chỉnh chiều cao hàng" bị hỏng.

doby-lưới

• là ở alpha - không sản xuất sẵn sàng. Có vẻ như một ngã ba đáng kể - nhiều thay đổi.
• Tôi đã thử. Bắt đầu là khó hiểu, nhưng có nó làm việc. Cần bowser và Yêu cầu JS.
• options.resizableRows là một nửa những gì chúng tôi muốn - bạn có thể tự động thay đổi độ cao hàng động. NHƯNG không có tự động tái kích thước của chiều cao hàng để phù hợp với nội dung !! ?? !!
• This issue nói rằng "Thêm chiều cao hàng thực sự động (bị ảnh hưởng bởi nội dung của hàng) sẽ yêu cầu chúng tôi vô hiệu hóa nhiều tính năng.". Chúng cung cấp một vài giải pháp khả thi, nhưng một người đã quyết định đã thử điều này và gặp rất nhiều rắc rối với nó. Anh ta có thể đã làm cho nó hoạt động, hoặc anh ta có thể đã từ bỏ. Tôi sẽ không mạo hiểm nó.

Answer 10

Vì không có nhánh của SlickGrid thực sự là lựa chọn khả thi trong nhiều khía cạnh, tôi nghĩ rằng sẽ rất có giá trị đối với nhiều độc giả của bài đăng này để thảo luận các lựa chọn thay thế cho SlickGrid.

Tôi xem 'các lựa chọn thay thế khả thi' hỗ trợ đầy đủ chiều cao hàng biến: mỗi hàng có thể có chiều cao hàng khác nhau tự động điều chỉnh để phù hợp với nội dung và cho phép văn bản được bao bọc thành dòng tiếp theo.

Tôi đã xem xét điều này khá rộng rãi và rất tiếc là tôi đã không tìm thấy các lựa chọn thay thế khả thi có liên quan đến SlickGrid. Trong số các lựa chọn thay thế khác, tôi chỉ tìm thấy một lựa chọn miễn phí cho mục đích thương mại - dojox DataGrid, tuy nhiên không rõ cách bạn có thể sử dụng trình chỉnh sửa tùy chỉnh với điều này (hầu hết các thương mại đều cung cấp tính năng này).

Có một vài lựa chọn thay thế khả thi yêu cầu thanh toán cho mục đích thương mại: dhtmlxGrid, jQuery EasyUI DataGrid, jQWidgets, tiện ích con Wijmo Grid, JideTable và Sencha ExtJS Grids. Trong số này, cá nhân tôi sẽ nói là tốt nhất là dhtmlxGrid http://dhtmlx.com/docs/products/dhtmlxGrid/ - Phiên bản miễn phí là GPL, phiên bản Pro là $ 199.