Bất kỳ đề xuất Lưới nào cho Breeze?

Question

Chúng tôi quyết định sử dụng API Web, EF + ASP.NET MVC 4 + Knockout + Breeze cho dự án của chúng tôi sau một nghiên cứu dài. Nhưng chúng tôi không thể tìm thấy bất kỳ mạng lưới làm việc cho Breeze. Chúng tôi muốn liên kết các thực thể dễ dàng với lưới và có thể chỉnh sửa dữ liệu trên lưới cho một số trường hợp.

Chúng tôi thử lưới mới gần như hàng ngày nhưng vẫn không may mắn, ví dụ: , chúng tôi đã thử jqxGrid (từ jqWidgets) nhưng nó ném ngoại lệ trong khi dữ liệu ràng buộc (có thể do tham chiếu vòng tròn giữa các thực thể). Nếu chúng ta không sử dụng thực thể khoe và chọn một kiểu vô danh thì nó hoạt động ok.

Bạn có đề xuất nào không?

Xin cảm ơn trước.

Answer 1

chúng tôi quyết định đi với KoGrid, sau một số nghiên cứu, chúng tôi có thể làm tất cả những gì chúng tôi cần. Cảm ơn tất cả các bạn đã giúp đỡ. Bạn có thể tìm thấy mã thử nghiệm của chúng tôi bên dưới. Chúc một ngày tốt lành.

<!--3rd party library scripts --> 
<script src="~/Scripts/jquery-1.7.1.min.js"></script> 
<script src="~/Scripts/json2.js"></script> 
<script src="~/Scripts/es5-sham.min.js"></script> 
<script src="~/Scripts/es5-shim.min.js"></script> 
<script src="~/Scripts/knockout-2.1.0.js"></script> 
<script src="~/Scripts/q.js"></script> 
<script src="~/Scripts/jquery.json-2.3.js"></script> 
<script src="~/Scripts/KoGrid.debug.js"></script> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     var GridViewModel = function() { 
      var self = this; 
      self.products = ko.observableArray(); 
      self.currentPage = ko.observable(1); 
      self.pageSize = ko.observable(10); 
      self.totalServerItems = ko.observable(80); 
      self.selectedItem = ko.observable(); 
      self.sortInfo = ko.observable(); 
      self.filterInfo = ko.observable(); 
      self.updateItem = function() { }; 

      var entityModel = window.breeze.entityModel; 
      var entityManager = new entityModel.EntityManager('api/Service'); 
      var metadataStore = entityManager.metadataStore; 
      metadataStore.importMetadata($.toJSON(metadata)); 
      var op = window.breeze.FilterQueryOp; 

      this.getPagedDataAsync = function (pageSize, page, filterInfo, sortInfo) { 
       var columnName = "ProductID"; 
       if (sortInfo != null) 
        columnName = sortInfo.column.field + " " + sortInfo.direction; 

       var query = entityModel.EntityQuery.from("Products").orderBy(columnName).skip((page - 1) * pageSize).take(pageSize); 
       for (var propertyName in filterInfo) { 
        query = query.where(propertyName, op.StartsWith, filterInfo[propertyName]); 
       } 

       entityManager.executeQuery(query).then(function (data) { 
        self.products.removeAll(); 
        var items = data.results; 
        items.forEach(function (item) { 
         self.products.push(item); 
        }); 
       });      
      }; 

      this.dataChangedTrigger = ko.computed(function() { 
       var page = self.currentPage(), 
        pageSize = self.pageSize(), 
        filterInfo = self.filterInfo(), 
        sortInfo = self.sortInfo(); 

       if (page && pageSize) { 
        self.getPagedDataAsync(pageSize, page, filterInfo, sortInfo); 
       } 

       return null; 
      }); 
     } 

     var model = new GridViewModel(); 
     ko.applyBindings(model); 
     model.getPagedDataAsync(10, 1, model.filterInfo(), model.sortInfo()); 
    }); 
</script> 

<div id="sandBox" class="example" style="height: 600px; width:600px; max-width: 700px;" 
    data-bind="koGrid: { data: products, 
         columnDefs: [{ field: 'ProductName', width: 200 }, 
            { field: 'QuantityPerUnit', width: 200 }, 
            { field: 'UnitPrice', width: 150 }], 
         autogenerateColumns: false, 
         isMultiSelect: false, 
         enablePaging: true, 
         useExternalFiltering: true, 
         useExternalSorting: true, 
         filterInfo: filterInfo, 
         sortInfo: sortInfo, 
         pageSize: pageSize, 
         pageSizes: [10, 20, 50], 
         currentPage: currentPage, 
         totalServerItems: totalServerItems, 
         selectedItem: selectedItem }"> 
</div> 

<!-- Application scripts --> 
<script src="~/Scripts/breeze.js"></script> 
<script src="~/Scripts/app/metadata.js"></script> 

Answer 2

Tôi cũng đang tìm kiếm một mạng lưới. Tôi đã kiểm tra jQGrid, koGrid, slickGrid và một số chi tiết khác. Hiện tại, tôi đang sử dụng DataTables với tiện ích mở rộng loại trực tiếp, có thể tìm thấy tại đây: http://datatables.net/forums/discussion/4969/knockoutjs/p1

Nó có thể được tạo kiểu với bootstrap và có thể tùy biến cao với các mẫu và hơn thế nữa. Bạn phải làm một số liên kết giữa gió và DataTables, nhưng nó hoạt động rất tốt cho tôi.

Answer 3

Rất dễ dàng để có một lưới có thể chỉnh sửa với KO.

Đây là một bằng chứng của khái niệm: http://jsfiddle.net/vtortola/wx8cL/

(xin vui lòng không nhớ CSS: D)

Về cơ bản, bạn có thể có một mẫu hàng để xem, và một mẫu hàng để chỉnh sửa:

<script id="inner-row-tmpl" type="text/html"> 
     <td data-bind="text: par1"></td> 
     <td data-bind="text: par2"></td> 
     <td data-bind="text: par3"></td> 
     <td><button class="edit">Edit</button></td> 
</script> 

<script id="row-tmpl" type="text/html"> 
    <tr data-bind="template: { name: 'inner-row-tmpl'}"> 
    </tr> 
</script> 

<script id="editable-inner-row-tmpl" type="text/html"> 
     <td class="editable-row" data-bind="text: par1"></td> 
     <td><input type="text" data-bind="value: par2"/></td> 
     <td><input type="text" data-bind="value: par3"/></td> 
</script> 

Chúc mừng.