4

以下を使用します。

1) Visual Studio 2012。 2) ホットタオル テンプレート。3) ko グリッドとその css をダウンロードします。

home.html

<section id="alerts-view" class="view">
 <header>
        <a class="btn btn-info btn-force-refresh pull-right" 
            data-bind="click: refresh" href="#"><i class="icon-refresh"></i> Refresh</a>
        <h3 class="page-title" data-bind="text: title"></h3>
        <div class="article-counter">
            <address data-bind="text: alerts().length"></address>
            <address>found</address>
        </div>
    </header>
    <div  data-bind="koGrid: gridOptions"></div>
  </section>

home.js

define(['services/datacontext', 'durandal/plugins/router'],
    function (datacontext, router) {

        var alerts = ko.observableArray();
        isAttachedToView = ko.observable(false);

        var activate = function (routeData) {
            if (routeData.id == undefined)
                return datacontext.getAlerts(alerts);
        };

        var deactivate = function () {
            isAttachedToView(false);
            alerts([]);
        };

        var refresh = function () {
            return datacontext.getAlerts(alerts);
        };


       var vm = {
            activate: activate,
            deactivate: deactivate,
            refresh: refresh,
            alerts: alerts,
            gridOptions: {
                            data: alerts,
                            canSelectRows: true,
                            enableColumnResize: true,
                            footerVisible: true,
                            displaySelectionCheckbox: true,
                            enableSorting: ko.observable(true),
                            columnDefs: [
                                            { field: 'efficency', displayName: 'Green or C02 Bus' } ......................

                                        ]

                           },
            isAttachedToView: isAttachedToView,
            title: 'Current Alerts'
        };
       return vm;


       function viewAttached() {
           isAttachedToView(true);
           return true;
       }
    });

バンドル構成。

bundles.Add(
new StyleBundle("~/Content/css")

//.Include("~/Content/ie10mobile.css")
//.Include("~/Content/bootstrap.css")
//.Include("~/Content/bootstrap-responsive.css")
//.Include("~/Content/font-awesome.css")
//.Include("~/Content/durandal.css")
.Include("~/Content/toastr.css")
//  .Include("~/Content/app.css")
.Include("~/Content/KoGrid.css")
//  .Include("~/Content/jquery-ui-1.9.1.custom.css")

);

最初の写真

2 番目の画像 2番目の写真は1行のみです。 何が問題なのか、ここで何が間違っているのかわかりませんが、次の 2 つの画像のように見えます。

最初にグリッドが表示されません。グリッドが表示されるウィンドウのサイズを変更しますが、1 行のみです。G の緑のバスでグループ化してから、列を大きくしたい場合は、最初の列ではなく 2 番目の列がシフトし始めます。

ダウンロードして使用できるHottowelテンプレートとkogridで動作するものや例はありますか?

男子生徒のエラーのように見えますが、見つけて理由を付けるのは困難です。

4

3 に答える 3

2

私もその問題に直面しています。奇妙なことに、viewport div (kogrid によってクラス名が生成されたものkgViewport) が 20 px の固定高さに設定されているようです。

回避策として、jQuery で修正してもらいました (viewmodel の最後の行):

$("div.kgViewport").css("height", "inherit");
于 2013-08-29T10:42:59.360 に答える