4

使用以下。

1) Visual Studio 2012。2) 热毛巾模板。3) 下载了 ko grid 和它的 css。

主页.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>

主页.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")

);

第一张图片

第二张图片 第二张图只有一排。 我不知道这里出了什么问题或我做错了什么，但看起来像下面的两张图片。

首先看不到任何网格。调整您看到网格但只有一行的窗口大小。尝试在 G 绿色总线上分组，然后当你想让 col 变大时，第二个 col 开始移动，而不是第一个 col。

是否有一些适用于 Hottowel 模板和 kogrid 的东西或示例，我可以下载和使用？

看起来像一个小学生的错误，但很难找到和解释。

4

3 回答 3

2

我也面临这个问题。奇怪的是，视口 div（由 kogrid 生成的类名为kgViewport）似乎设置为 20 px 的固定高度。

作为一种解决方法，我让 jQuery 为我修复了这个问题（我的视图模型中的最后一行）：

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

The solution to the issue in your second picture is setting a height to the div. This should work:

<div style="border: 2px solid gray; height: 500px;" data-bind="koGrid: gridOptions"></div>
于 2013-07-21T03:27:23.627 回答
0

您应该在绑定到的元素上设置显式宽度和高度。

<div class="myGrid" data-bind="koGrid: gridOptions"></div>

然后在你的样式表中

.myGrid {
    width: 700px;
    height: 300px;
}
于 2015-04-21T11:25:55.777 回答