Thực hiện cuộn vô tận với chế độ xem danh sách web

Question

Tôi biết rằng phiên bản web listview không có tính năng cuộn vô tận như hộp di động. Tôi vẫn cần phải thực hiện điều này trong giải pháp của tôi và tôi không thực sự chắc chắn nơi để bắt đầu. Tất cả các id tôi đã yêu cầu tôi phải reaload tất cả các dữ liệu một lần nữa. Vì vậy, cho phép nói rằng tôi có 25 hàng được nạp. Bạn đạt đến điểm di chuyển và nó tải hơn 25, cách tôi sẽ thực hiện nó nó sẽ tải lại 25 đầu tiên và thêm 25 hơn nữa. Điều này tất nhiên sẽ làm chậm đi nhiều hơn bạn đi vì vậy nó không phải là một lựa chọn Hà ai thực hiện một cái gì đó như thế này thành công? Có bất kỳ giải pháp cuộn vô tận nguồn mở nào có sẵn không? Bất kỳ lời khuyên/thông tin/mã sẽ được đánh giá cao.

Cảm ơn!

Answer 1

tôi cuối cùng đã đưa ra một giải pháp cho việc này. Cuộn ảo với lưới không phải là thứ tôi đang tìm kiếm. Tôi bỏ listview và sử dụng một nguồn dữ liệu và vẽ mẫu kendo đồng bằng.

Đây là cách hoạt động ... Tôi có div cha cho dữ liệu của mình. Tôi đính kèm một sự kiện vào sự kiện thay đổi nguồn dữ liệu của tôi và khi một trang mới của dữ liệu được đọc div cha sẽ nhận được div con được nối vào bên trong đó trang dữ liệu mới được hiển thị. Điều này làm việc hoàn hảo cho tôi cho đến nay.

vì vậy DOM của tôi trông giống như thế này.

<div id="EndlesslyScrollabledata" > 
    <div id="DataPage1"> 
     ..... 
    </div> 
    <div id="DataPage2"> 
     ..... 
    </div> 
</div> 
<button> Load more data </button> 

Mỗi click vào tải nhiều dữ liệu hơn sẽ di chuyển các nguồn dữ liệu đến trang tiếp theo, nối tiếp theo "DataPage" và đưa ra các mẫu với các dữ liệu bên trong nối "DataPage".

Answer 2

Tính năng này có sẵn trong lưới kendo trong web (xem các ví dụ cuộn ảo trong trang web kendo). Làm thế nào về việc sử dụng lưới với cuộn ảo và sửa đổi mẫu hiển thị để trông giống như listview?

Mẫu mã cho lưới di chuyển ảo là:

$("#yourList").kendoGrid({ 
     dataSource: { 
      type: "json",     
      pageSize: 25, 
      transport: { 
       read: { 
        cache: false, 
        url: "controller/actionmethod", 
        type: "post", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json" 
       } 
      } 
     }, 

     height: 150, 
     width: 50, 
     pageable: true, 
     //selectable: "multiple", 
     scrollable: { 
      virtual: true 
     }, 

     columns: [ { field: "col1", title: "col1" }] 

    }); 

Answer 3

Tôi đã đi đến một giải pháp mà sử dụng sự kiện dataBinging bắt chước hành vi này:

MVC Mã số:

@(Html.Kendo().ListView<your.custom.Class>() 
    .Name("searchResults") 
    .TagName("div") 
    .ClientTemplateId("tptSearchResult") 
    .DataSource(source => 
    { 
     source.Read(read => 
     { 
      read.Action("Search", "ControllerName").Data("searchResults_AdditionalData"); 
     }); 


    }) 
) 

Bạn nên sử dụng phương pháp "AdditionalData" nếu bạn muốn gửi các thông số tìm kiếm hoặc một cái gì đó thêm vào dịch vụ tìm kiếm.

Javascript Code:

function Search(page) { 
    currentPage = page; 
    if(page == 1) { 
     searchResults = []; 
    } 

    $("#searchResults").data("kendoListView").dataSource.read(); 
} 

function searchResults_AdditionalData(ev) { 
    return { 
     code: $("#txtSearchCode").val(), 
     pageNumber: currentPage, 
     pageSize: pageSize 
    }; 
} 

var currentPage = 1; 
var pageSize = 20; 
var searchResults = []; 
$(document).ready(function() { 

    $("#searchResults").data("kendoListView").bind("dataBinding", function(ev) { 

     if(searchResults.length != (currentPage * pageSize)) { 
      if(!!ev && !!ev.items && ev.items.length == pageSize) { 
       $("#btnLoadMoreData").show(); 
      } else { 
       $("#btnLoadMoreData").hide(); 
      } 

      searchResults = $.merge(searchResults, ev.items); 
      this.dataSource.data(searchResults); 
      this.dataSource.sync(); 
     } 

    }); 
}); 

Chỉ có một điều còn lại: di chuyển đến các yếu tố bổ sung đầu tiên trong danh sách sau khi đồng bộ hoá.