Question

我正在使用knockout simplegrid并希望在中心显示一列。

我尝试使用text-align：center添加以下代码，以在我的视图模型中启动简单网格

this.gridViewModel = new ko.simpleGrid.viewModel({
    data: this.items,
    columns: [
        { headerText: "Item Name", rowText: "name" },
        { headerText: "Sales Count", rowText: "sales",text-align: "center" },
        { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
    ],
    pageSize: 4
});

但它引发了我错误意外的令牌 -

我还添加了一个可观察的simplegrids视图模型，即this.textAlign = ko.observable("left");

我增加了价值＆＃34;离开＆＃34;因为这将是默认的。但我不知道如何在simplegrid视图模型中使用这个observable。

以下是Fiddle

急切地等待你聪明人的反馈。

UPDATE1

我知道为什么我会得到＆＃34;意外的令牌 - ＆＃34;错误。因为它期待text-align的javascript样式名称。等效的javascript样式名称是 textAlign ，没有 - 。我从这个Page

获得了这些信息

但我仍然无法将文本动态绑定到中心

Answer 1

knockout simplegrid的功能非常有限，因此您需要自己添加此功能。

您必须扩展"ko_simpleGrid_grid"模板并在gnerated style上添加td绑定：

<tr data-bind=\"foreach: $parent.columns\">\
      <td data-bind=\"text: typeof rowText == 'function' ? \
          rowText($parent) : $parent[rowText], style: $data.cellStyle \"></td>\
</tr>\

现在您可以使用以下内容传递任何有效的style绑定值

columns: [
            { headerText: "Item Name", rowText: "name" },
            { headerText: "Sales Count", rowText: "sales", 
              cellStyle: { textAlign: "center" } },
            { headerText: "Price", 
                rowText: function (item) { return "$" + item.price.toFixed(2) } }
        ],

演示JSFiddle。

在knockout simplegrid中动态对齐文本中心

1 个答案: