9

長い調査の結果、プロジェクトにWeb API、EF + ASP.NET MVC 4 + Knockout+Breezeを使用することにしました。しかし、Breezeの作業グリッドは見つかりません。そよ風のエンティティをグリッドにバインドし、いくつかのシナリオでグリッド上のデータを編集できるようにします。

ほぼ毎日新しいグリッドを試しますが、それでも運がありません。たとえば、jqxGrid（jqWidgetsから）を試しましたが、データのバインド中に例外がスローされます（エンティティ間の循環参照が原因である可能性があります）。そよ風エンティティを使用せず、匿名タイプを選択した場合は、問題なく機能します。

何か提案はありますか？

前もって感謝します。

4

3 に答える 3

7

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>
于 2012-12-03T14:58:29.100 に答える
5

私もしばらくの間グリッドを探していました。jQGrid、koGrid、slickGridなどを調べました。現在、ノックアウト拡張機能を備えたDataTablesを使用しています。これは http://datatables.net/forums/discussion/4969/knockoutjs/p1にあります。

ブートストラップでスタイルを設定でき、テンプレートなどで高度にカスタマイズできます。そよ風とDataTablesの間でリンクを作成する必要がありますが、私にとっては非常にうまく機能します。

于 2012-11-30T10:34:55.590 に答える
2

KOを使用して編集可能なグリッドを作成するのは非常に簡単です。

これは概念実証です：http：//jsfiddle.net/vtortola/wx8cL/

（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>

乾杯。

于 2012-12-03T14:21:46.397 に答える