如何为Knockout simpleGrid模板添加带按钮的通用操作列？

需求回顾 #

你现在用的是Knockout的simpleGrid模板，能根据模型动态生成列，但想要在每一行最后加一个固定的Action列，里面放删除按钮，实现示例里的效果。咱们来一步步改模板和相关代码：

1. 修改表头模板 #

原来的表头是通过foreach: columns循环生成所有列，现在要在循环结束后，手动添加一个固定的<th>Action</th>，这样表头就会多一个操作列：

<thead>
  <tr class="active">
    <!-- 原来的动态列循环，改用无容器绑定来混合固定元素 -->
    <!-- ko foreach: columns -->
    <th data-bind="text: headerText"></th>
    <!-- /ko -->
    <!-- 新增固定的操作列表头 -->
    <th>Action</th>
  </tr>
</thead>

这里用Knockout的无容器绑定语法<!-- ko foreach: columns -->，能在同一个<tr>里同时渲染动态列和固定列，避免额外的DOM嵌套。

2. 修改表体行模板 #

同样，原来的表格行是循环$parent.columns生成所有td，现在要在循环结束后加一个固定的td，放入删除按钮，并且绑定点击事件到当前行的数据：

<tbody data-bind="foreach: data">
  <tr>
    <!-- 原来的动态列循环 -->
    <!-- ko foreach: $parent.columns -->
    <td data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></td>
    <!-- /ko -->
    <!-- 新增操作列td，绑定删除点击事件 -->
    <td>
      <button type="button" class="btn btn-default" title="Delete"
              data-bind="click: $parent.$parent.deleteItem">
        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
      </button>
    </td>
  </tr>
</tbody>

这里的click: $parent.$parent.deleteItem是因为当前上下文是行数据（data里的item），$parent指向columns的父级也就是gridViewModel，$parent.$parent则是咱们的PagedGridModel，所以需要在这个模型里添加删除方法。

3. 完善ViewModel的删除逻辑 #

在你的PagedGridModel里添加删除方法，这样按钮点击后能移除对应行的数据：

var PagedGridModel = function(items) {
  this.items = ko.observableArray(items);
  
  // 新增删除方法，绑定this确保能访问到items
  this.deleteItem = function(item) {
    this.items.remove(item);
  }.bind(this);

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

完整修改后的模板代码 #

把这些修改整合到你的ko_simpleGrid_grid模板里，最终的模板代码如下：

templateEngine.addTemplate("ko_simpleGrid_grid", "\
<table class=\"table table-bordered table-condensed\" >\
  <thead>\
    <tr class=\"active\">\
      <!-- ko foreach: columns -->\
      <th data-bind=\"text: headerText\"></th>\
      <!-- /ko -->\
      <th>Action</th>\
    </tr>\
  </thead>\
  <tbody data-bind=\"foreach: data\">\
    <tr>\
      <!-- ko foreach: $parent.columns -->\
      <td data-bind=\"text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] \"></td>\
      <!-- /ko -->\
      <td>\
        <button type=\"button\" class=\"btn btn-default\" title=\"Delete\"\
                data-bind=\"click: $parent.$parent.deleteItem\">\
          <span class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></span>\
        </button>\
      </td>\
    </tr>\
  </tbody>\
</table>");

这样修改后，你的simpleGrid就会自动在每一行最后添加一个带删除按钮的操作列，点击按钮就能删除对应的数据行啦。

内容的提问来源于stack exchange，提问作者OfirD