对Breeze有什么建议吗?
经过长时间的研究,我们决定在我们的项目中使用WebAPI、EF+ASP.NETMVC4+Knockout+Breeze。 但我们找不到任何微风的工作网格。我们希望将breeze实体绑定到网格,并能够为某些场景编辑网格上的数据 我们几乎每天都在尝试新的电网,但仍然没有运气, 例如,我们尝试了jqxGrid(来自jqWidgets),但它在绑定数据时抛出了一个异常(可能是因为实体之间的循环引用)。如果我们不使用breeze实体并选择匿名类型,它可以正常工作 你有什么建议吗对Breeze有什么建议吗?,breeze,Breeze,经过长时间的研究,我们决定在我们的项目中使用WebAPI、EF+ASP.NETMVC4+Knockout+Breeze。 但我们找不到任何微风的工作网格。我们希望将breeze实体绑定到网格,并能够为某些场景编辑网格上的数据 我们几乎每天都在尝试新的电网,但仍然没有运气, 例如,我们尝试了jqxGrid(来自jqWidgets),但它在绑定数据时抛出了一个异常(可能是因为实体之间的循环引用)。如果我们不使用breeze实体并选择匿名类型,它可以正常工作 你有什么建议吗 提前谢谢。我也搜索了一段时
提前谢谢。我也搜索了一段时间的网格。我检查了jQGrid、koGrid、slickGrid等。我现在使用的DataTables具有击倒扩展,可以在这里找到: 它可以用bootstrap设置样式,并且可以用模板等进行高度定制。
您必须在breeze和DataTables之间进行一些链接,但对我来说效果非常好。使用KO创建可编辑网格非常容易 这是一个概念证明: (请不要介意CSS:D) 基本上,您可以有一个用于查看的行模板和一个用于编辑的行模板:
<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>
编辑
干杯。我们决定使用KoGrid,经过一些研究,我们可以做我们需要的一切。谢谢大家的帮助。您可以在下面找到我们的测试代码。祝你今天愉快
<!--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>
$(文档).ready(函数(){
var GridViewModel=函数(){
var self=这个;
self.products=ko.observearray();
self.currentPage=ko.可观察(1);
self.pageSize=ko.可观察(10);
self.totalServerItems=ko.可观察(80);
self.selectedItem=ko.observable();
self.sortInfo=ko.observable();
self.filterInfo=ko.observable();
self.updateItem=函数(){};
var entityModel=window.breeze.entityModel;
var entityManager=new entityModel.entityManager('api/Service');
var metadataStore=entityManager.metadataStore;
metadataStore.importMetadata($.toJSON(元数据));
var op=window.breeze.FilterQueryOp;
this.getPagedDataAsync=函数(pageSize、page、filterInfo、sortInfo){
var columnName=“ProductID”;
if(sortInfo!=null)
columnName=sortInfo.column.field+“”+sortInfo.direction;
var query=entityModel.EntityQuery.from(“产品”).orderBy(columnName)。跳过((第1页)*页面大小)。获取(页面大小);
for(filterInfo中的变量propertyName){
query=query.where(propertyName,op.StartsWith,filterInfo[propertyName]);
}
entityManager.executeQuery.then(函数(数据){
self.products.removeAll();
var项目=数据。结果;
items.forEach(功能(项目){
自.产品.推(项);
});
});
};
this.dataChangedTrigger=ko.computed(函数(){
var page=self.currentPage(),
pageSize=self.pageSize(),
filterInfo=self.filterInfo(),
sortInfo=self.sortInfo();
如果(页面大小(&pageSize){
getPagedDataAsync(pageSize、page、filterInfo、sortInfo);
}
返回null;
});
}
var模型=新的GridViewModel();
ko.应用绑定(模型);
getPagedDataAsync(10,1,model.filterInfo(),model.sortInfo());
});
谢谢,我们将在周一尝试datatables。。。上面的链接是到线程的,这是到相关帖子的直接链接。谢谢你的示例。我们需要一个功能强大的网格(具有排序、过滤等功能),这样我们就不会超过我们的短期期限。我想我们会用KO网格。嗯。。。看起来不错。我将在这里留下链接:koGrid的2.0版现在有更多的功能,所有绑定现在都可以直接用javascript完成。我甚至制作了一个绑定处理程序,可以自动将现有的只读单元格模板转换为可编辑的单元格模板:但是2.0版没有每列过滤器,我们确实需要它们。此外,我们还需要分组:)我们在这里有点困惑,我们将决定分组或列过滤器是否更重要,或者我们将不得不寻找另一个网格。我并不介意,因为使用knockout可以很容易地使用单独的输入实现我自己的每列过滤器,但是的,像以前一样开箱即用会很好。所以我建议你在问题页面上提出申请,如果还没有。但是请注意:在v2.0中,分组仍然存在!我刚刚查看了问题页面,看起来多栏分组计划用于v2.2:我们已经在ViewModel库中使用了几行代码实现了每栏过滤,因此派生的ViewModels可以自动使用过滤,但是现在我们必须为每个视图和视图模型编写大量代码,而我们可以用1.2版本的简单和经典来实现这一点,这感觉不太对劲。你说得对,我们将提出请求:)