自定义Knockout数据表格绑定

在开发Web应用程序时，经常需要展示和操作数据表格。为了提升用户体验和开发效率，希望这些表格能够支持排序、过滤等功能，并且能够在客户端完成这些操作。此外，也希望这些表格能够简单易用，并且具有高度的可定制性。本文将介绍如何使用Knockout.js创建一个自定义的数据表格绑定。

在业务应用程序中，需要一个外观良好且能够进行排序和过滤的网格。为了更好的用户体验，这些操作应该在客户端完成。为了更好的开发体验，它应该简单易设置（即，只需指定要显示的每个列的成员字段）并且灵活（或者提供函数或甚至是Knockout模板）。列应该是可隐藏的。理想情况下，它应该是数据驱动的（即，没有jQuery事件，只需在JavaScript中设置控件的属性，网格就会更新！这被称为MVVM编程）。

技术栈

决定依赖以下技术来实现这个控件：

• HTML &TypeScript（这是一个Web应用程序！）
• Bootstrap（使表格看起来更好）
• Knockout（实现MVVM开发风格）

项目结构

除了样式文件（这是一个Web应用程序！）和测试文件（当然），还有2个源文件：

• knockout.d.ts，TypeScriptKnockout绑定，来自NuGet。它唯一的用途是在TypeScript中进行完全类型的调用到Knockout API。它不产生任何JavaScript文件，仅在编译时使用，不在运行时使用。
• KOGridBinding.ts，网格的源代码，总共380行，下面将简要解释。

使用代码

要使用网格，只需在适当样式化的TABLE标签上调用"kogrid"绑定，如下所示： <table class="table table-striped table-bordered table-hover table-condensed" data-bind='kogrid: gridViewModel'></table> 这里的类是Bootstrap表格样式。传递给kogrid绑定的数据必须是KOGridModel（如在KOGridBinding.ts中定义的），如果不是这样，将抛出异常作为提醒。

KOGridModel类

KOGridModel类具有描述网格状态的所有属性。以下是一些关键属性的说明：

• itemsSource：包含所有显示的行
• columns：描述每个列
• header：列的标题（字符串）
• headerTemplate：不是字符串，而是传递一个Knockout模板来显示任何内容，甚至是HTML输入！
• data：Function(row)，获取单元格数据
• template：使用ko模板，显示任何内容。数据上下文将是行
• dataTemplate：使用ko模板，显示任何内容。数据上下文将是单元格的数据
• cellStyle：字符串或observable，TD的样式
• headerStyle：字符串或observable，TH的头部
• visible：列是否可见
• sortable：列是否可排序（也需要数据非null）
• sort：UI状态，当前排序状态

计算属性

计算属性是Knockout.js的一个强大功能，它允许基于其他observables的值来计算新的值。在本文中，使用了计算属性来实现过滤和排序后的当前项目列表，以及当前页面的项目列表等。

本文介绍了一个新的Knockout绑定扩展："kogrid"及其相关的数据模型"KOGridModel"。它们一起使创建外观良好、可定制、过滤和排序的数据网格变得非常简单。