DHTML/AJAX 网格控件

• 下载源代码 - 3 KB

引言

这是我在上一篇文章 Tiny JavaScript tree 中开始的项目的延续。以下是我尝试实现的目标列表

• 最小化的应用程序 JavaScript。 这应该是任何 HTML 表格的附加组件。
• 最小的依赖性 - 我不想使用任何第三方 JavaScript 库。 理想情况下，此对象需要与 AJAX 库捆绑在一起，因此用户所做的任何修改都可以转发到后端进行服务器处理。
• 应用程序定制 - 应用程序开发人员应该能够在不修改库代码的情况下定制开箱即用的行为。 因此，与 AJAX 捆绑应该很容易。
• 实现以下功能
• 通过单击表格单元格 (<TD>) 创建适当的编辑器。 定位此编辑器以覆盖原始单元格。 编辑完成后，使用适当的值更新 <TABLE> 并允许将新值发送到服务器 (AJAX?)。
• 允许通过单击表格列标题 (<TH>) 进行动态排序。
• 允许动态列大小调整（待完成）。

Using the Code

以下是代码示例

<table id="t">
    <tr><th>Hdr1</th><th>State</th><th>Price</th></tr>
    <tr><td>row 1</td><td>California</td><td>100</td></tr>
    <tr><td>row 2</td><td>Arizona</td><td>200</td></tr>
</table>
<select id="states" style="visibility:hidden">
    <option value="CA">California</option>
    <option value="AZ">Arizona</option>
</select>
<script type="text/javascript">
var combo = document.getElementById("states");
var grid = new Grid("t", {
    getEditor : function(cell, g) {
        return (g.getCellIndex(cell).col == 1) ? combo : g.defEditor;
    }
});
</script>

如您所见，只有一个带有数据的普通表格定义。

由于此网格控件仅提供一个普通的 <INPUT> 编辑器，因此任何其他类型的编辑器都需要在应用程序中定义。 因此，组合框 (<SELECT>)。 首先需要将其定义为隐藏的。 网格控件会在需要时使其可见。

在 JavaScript 代码中，我首先获取对组合框的引用，然后创建一个网格对象。 对象的第一个参数是 HTML <TABLE> 元素的 ID，第二个参数是一个 JSON 定制对象。 有关第二个参数的可能属性，请参见下表

getEditor (cell, grid)	返回单元格的编辑器。 如果不允许编辑该单元格，则返回 null。 在上面的示例中，我使用 grid.getCellIndex 函数获取单元格的行/列位置，然后为第 1 行（州列表）返回组合框，为任何其他单元格返回默认编辑器。
isSortable(cell, grid)	如果允许通过单击此单元格进行排序，则返回 true。 默认情况下，可以通过单击第一行上的 <TH> 单元格进行排序。
saveValue(cell, grid, value)	执行验证并可能使用 AJAX 将值保存到服务器。 默认情况下，不执行任何操作。 如果执行/启动了保存，则返回 OK；如果存在任何类型的验证/持久性错误，则返回 false。
cellComp(ela, elb, col, grid, rowA, rowB)	排序例程。 默认情况下，处理日期/数字/字符串排序。 如果需要任何类型的自定义排序，请覆盖此函数。 有关详细信息，请参见默认实现。

自定义编辑器

我可能没有对通用自定义编辑器进行足够的测试。 我尝试了 <INPUT TYPE=TEXT> 和 <SELECT>。 可能需要使用其他通用类型的编辑器对该控件进行故障排除。 如果您选择冒险进入这个领域，请告诉我结果。 请检查源代码中的 configEditor 函数，以了解添加编辑器需要做什么。