SlickGrid Chế độ xem dữ liệu là gì?

Question

Tôi bắt đầu sử dụng SlickGrid và tôi đã nhầm lẫn về sự khác biệt giữa Chế độ xem dữ liệu và Lưới (với tính năng chỉnh sửa được bật). Tôi đã không tìm thấy trong các tài liệu một số cuộc thảo luận về xem dữ liệu, mặc dù nó đã được đề cập ở đó.

Hãy khai sáng cho tôi.

Answer 1

Trong điều kiện rất đơn giản, chỉ cần nghĩ đến ba lớp:

Grid 
    ---- 
DataView 
    ---- 
    Data 

Ở phía dưới bạn có các dữ liệu thô. Đây chỉ là một mảng cũ đơn giản. Mỗi mục trong mảng đại diện cho một hàng dữ liệu (được hiển thị dưới dạng một hàng trong lưới).

DataView đọc mảng dữ liệu và làm cho nó có sẵn cho lưới bằng cách phơi bày một vài phương pháp tiêu chuẩn. Bằng cách này, khi lưới điện muốn lấy dữ liệu cho mục đích hiển thị, nó chỉ nói chuyện với các dataview thông qua một trong những phương pháp tiêu chuẩn.

Lưới là thành phần hiển thị. Trách nhiệm duy nhất của nó là hiển thị mã HTML cần thiết để hiển thị đầu ra mong muốn trên màn hình.

Lưới không bao giờ truy cập dữ liệu trực tiếp. Nó chỉ bao giờ nói chuyện với các dataview. Điều này cho phép dataview thực hiện các thủ thuật khi trả lại dữ liệu vào lưới, chẳng hạn như phân phối các hàng "phantom" được sử dụng để đại diện cho các tiêu đề nhóm.

Nếu bạn quan tâm, ví dụ dưới đây chỉ là về ví dụ đơn giản nhất bạn có thể tìm ra bằng cách sử dụng một dataview với SlickGrid.

var data = [ 
    { title: "Primer",  rating: "A" }, 
    { title: "Matrix",  rating: "B" }, 
    { title: "Transformers", rating: "C" }, 
]; 
var columns = [ 
    { id: "title", name: "Title", field: "title" }, 
    { id: "rating", name: "Rating", field: "rating" } 
]; 
var options = { 
    enableColumnReorder: false // ... whatever grid options you need 
}; 

var dataView = new Slick.Data.DataView(); 
var grid = new Slick.Grid("#myGrid", dataView, columns, options); 

// wire up model events to drive the grid 
dataView.onRowCountChanged.subscribe(function (e, args) { 
    grid.updateRowCount(); 
    grid.render(); 
}); 
dataView.onRowsChanged.subscribe(function (e, args) { 
    grid.invalidateRows(args.rows); 
    grid.render(); 
}); 

// Feed the data into the dataview 
dataView.setItems(data); 

Answer 2

DataView cho phép sắp xếp và lọc dữ liệu mà không sửa đổi hoặc lưới. Bạn có thể coi nó như là một lớp phủ trên đầu trang trên lưới điện cung cấp các chức năng liên quan đến khung nhìn - trong một số trường hợp tăng cường các chức năng này.

Hy vọng điều đó sẽ hữu ích!

Answer 3

DataView là sự trừu tượng trên đầu nguồn dữ liệu của bạn. Nếu tất cả dữ liệu có sẵn trên máy khách (tức là trong một mảng Javascript), thì DataView có thể cung cấp nhiều tính năng hữu ích mà bản thân lưới không có. (Thực tế là lưới thiếu các tính năng này là do thiết kế - SlickGrid cố gắng giữ cho lõi gọn gàng và đơn giản trong khi khuyến khích thiết kế mô đun và trừu tượng hóa dữ liệu trong API của nó.)

DataView hoạt động bằng cách lấy dữ liệu của bạn và hoạt động như một dữ liệu nhà cung cấp mà bạn có thể chuyển tới SlickGrid thay vì mảng dữ liệu ban đầu của bạn. Ví dụ, nếu bạn tạo dữ liệu nhóm DataView, nó làm cho lưới nghĩ rằng các hàng "nhóm" chỉ là các mục dữ liệu thông thường, do đó lưới không cần phải biết chúng. DataView cho lưới biết rằng các mục đó có hiển thị và hành vi tùy chỉnh và cung cấp triển khai cả hai. Sau đó, bạn kết nối các sự kiện onRowCountChanged và onRowsChanged của DataView để cập nhật lưới và thì đấy.

Dưới đây là danh sách sơ bộ tính năng mà DataView thêm vào lưới:

• Paging.
• Sắp xếp.
• Tìm kiếm.
• Nhóm với tổng số.
• Mở rộng/thu gọn nhóm.