Knockout KoGrid - 没有数据显示答案

【问题标题】：Knockout KoGrid - no data displayedKnockout KoGrid - 没有数据显示
【发布时间】：2016-07-11 23:52:24
【问题描述】：

我有一个 ASP.Net MVC5 应用程序，我在其中添加了几个使用出色的 KnockoutJs KoGrid (http://knockout-contrib.github.io/KoGrid/#/examples) 的视图。我的问题是我创建了使用 KoGrid 的第三个视图，尽管遵循其他视图上使用的模式，但我无法说服 KoGrid 显示数据。我在这里为这个问题创建了一个 plnkr：http://plnkr.co/edit/0OaqD2?p=preview。

“真实”视图有几个选项卡，第一个显示数据库详细信息，第二个应该在 ko 网格中显示工作流规则。这是我从控制器返回的视图模型：

public class AdminViewModel
{
    public DatabaseDetails DatabaseDetails { get; set; }
    public List<WorkflowRule> WorkflowRules { get; set; }
}

public class WorkflowRule 
{
    public int WorkflowRuleId { get; set; }
    public string ReceivePortName { get; set; }
    public string MessageType { get; set; }
    public string TriggerSource { get; set; }
    public string TargetEmailAddress { get; set; }
    public int AssignedToId { get; set; }
    public string AssignedToName { get; set; }
}

public class DatabaseDetails
{...

我的淘汰虚拟机如下（为了更简洁，我删除了样板分页代码）：

function ViewModel(vm) {
var self = this;
this.workflowRules = ko.observableArray(vm.WorkflowRules);


this.getPagedDataAsync = function (pageSize, page, searchText) {
    setTimeout(function () {
        var data;
        if (searchText) {
            var ft = searchText.toLowerCase();
            $.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) {
                data = returnedPayload.filter(function (item) {
                    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                });
                self.setPagingData(data,page,pageSize);
            });          
        } else {
            $.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) {
                self.setPagingData(returnedPayload, page, pageSize);
            });
        }
    }, 100);
};


this.gridOptions = {
    afterSelectionChange: function () { return true; },
    data: self.workflowRules,
    enablePaging: true,
    pagingOptions: self.pagingOptions,
    filterOptions: self.filterOptions,
    selectWithCheckboxOnly: true,
    selectedItems: self.selected,
    canSelectRows: true,
    displaySelectionCheckbox: true,
    columnDefs: [{ field: 'ReceivePortName', displayName: 'Receive Port', width: 130 },
                { field: 'MessageType', displayName: 'Message Type', width: 200 },
                { field: 'TriggerSource', displayName: 'Source', width: 60 },
                { field: 'TargetEmailAddress', displayName: 'Email', width: 130 },
                { field: 'AssignedToName', displayName: 'Assigned To', width: 140 },
    ]
};

};

我的观点的关键部分如下：

    @model TVS.ESB.BamPortal.Website.Models.AdminViewModel
@using System.Web.Script.Serialization
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{  string data = new JavaScriptSerializer().Serialize(Model); }

<div class="tab-pane" id="WorkflowRules">
                <h4>Workflow Rules</h4>
                <div id="KoGrid" data-bind="koGrid: gridOptions"></div>
            </div>

@section Scripts {
    <script src="~/KnockoutVM/WorkflowRules.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
    <script type="text/javascript">
        var vm = new ViewModel(@Html.Raw(data));
        ko.applyBindings(vm, document.getElementById("KoGrid"));
    </script>
}

这是 Chrome 如何显示视图的屏幕截图：

谁能告诉我哪里出错了 - 为什么网格中没有显示数据？

我刚刚意识到，如果我减小显示 kogrid 的浏览器的大小，那么数据就会出现。我在这里制作了一个简短的视频：http://biztalkers.com/video/kogridproblem.mp4

【问题讨论】：

我在您的 plnkr 示例中添加了一些缺少的资源：@987654325@ 您能解释一下使用此示例的问题吗？
您添加了脚本的 plnk 效果很好，但我已经在我的解决方案中添加了这些脚本，但我没有显示 KoGrid。实际上我确实可以看到下拉箭头 - 请查看我添加到问题中的屏幕截图
Chrome 的开发者工具控制台是否记录任何错误？
恐怕没有错误。我可以看到来自网格的数据也可以用于 Chrome。
我刚刚注意到，如果我减小显示 kogrid 的浏览器窗口的大小，则会出现网格数据。我在这里做了一个简短的截屏视频：biztalkers.com/video/kogridproblem.mp4

标签： javascript knockout.js kogrid

【解决方案1】：

我可以通过将“工作流程规则”选项卡设置为默认选项来解决这个 CSS 问题。

后来，在另一个网站上 - 如果控制器只返回一行数据，我发现相同的行为。如果返回两行或多行，则它们会正确显示。

【讨论】：