利用 Django 与 jQuery 来创建电子表格应用程序
?
本文描述了如何利用 jQuery、jQuery 插件、以及 Django 来实现基于 web 的电子表格。并不是为了与 Google Docs 进行竞争，而是要演示如果创建 “office” 风格的应用程序，并给出大量可用的 jQuery 插件与工具。我采用 SQLite/Python/Django 栈作为后端，您也可以通过很小的工作量，来实现到其他框架的端口，比如 Ruby on Rails。
在项目的顶级目录中创建目录 resources，并创建 css、js、与 images 子目录。SlickGrid 之类的下载依赖项，以及用于应用程序的自定义 JavaScript 代码存储在此处。如果觉得麻烦，可以下载演示版并复制 resources 目录即可。
接下来，创建域模型（见清单 3）。该模型将仅包含 3 个字段：workbook_name、?sheet_name?与?data。 Django Object-Relational Mapper（ORM）会自动创建关键字段?id。
清单 3. models.py 文件
如您所见，在 HTML 中没有控制逻辑或样式 — 仅有标记。事实上，甚至主体中也没有任何元素。这些都通过 JavaScript 代码来动态生成，也就是通过方法调用来增加或删除元素。
图 1 展示了一个非常简单的菜单，它仅包含一些按钮与文本框。
图 1. 菜单
?
insert_grid_markup?方法与?insert_menu_markup?类似，只是这一次采用了?append?方法。jQuery UI 请求?<div>?中的一个清单来生成选项卡组件：
该组件是所有数据网格的容器。此时，在选项卡的下面增加按钮，它将会在每次单击时动态增加选项卡。可通过方法add_newtab_button?来完成此任务：
最后一个可视化组件是创建 Open 窗体，可通过清单 9 中展示的?insert_open_dialog_markup?方法来创建。同其他插入标记方法一样，它创建包含标记信息的字符串，并将其附加到主体中。
清单 9. 用于生成对话框标记的方法
此时已有了用于窗体的标记，可通过清单 10 中展示的?make_open_dialog?方法来增加其功能 —?render_ui?中的最后一个方法。通过调用?.dialog()?方法，并向其传递参数?autoOpen:false，只有当表单被明确地打开时，它才会在 web 页面中展示。对话框表单包含选择清单，该清单中包含了所加载工作簿的名称。
清单 10. 使 Open 窗体生效
如果您有兴趣，那么可以选择比较优雅的方法来编写标记字符串，那就是采用一些 JavaScript 模板，而不是将字符串连接在一起。唯一的表 ID 保存在隐藏的?input?元素中。为了保存 JSON 数据，还增加了另一个隐藏元素。这一隐藏 input 遵循一个简单的命名规则 — 数据加上选项卡号。另一点需要注意的是，新增加的选项卡具有在实际增加 SlickGrid 之前修改的 CSS 属性。如果不这样做，那么网格将无法正确呈现。
方法?openTab?调用方法?add_grid，它完成 SlickGrid 对象的一个真实实例。清单 12 显示出应用程序任务繁重。可创建两个 JavaScript 对象 —?workbook?与?grid_references。Workbook?对象包含到当前?workbook?对象的引用，而?grid_references?包含到每个 SlickGrid 对象的引用。add_grid?方法接受两个参数：网格名与网格号。
在列定义中，需要将 16 列作为默认值 — a 到 p — 采用?TextCellEditor?来在一个 SlickGrid 示例中提供。完成列定义后，要向 SlickGrid 提供参数定义。单元格可编辑、可调整、可选择。要注意确保?asyncEditorLoading?选项已设置为 True ，这用于在网格上实现 Ajax 操作。
清单 12. 为应用程序增加 SlickGrids
以 “类似黑客” 的方式使用?eval?语句，动态创建变量名。变量?data?将以空字符串数据方式加载，并完成 SlickGrid 实例的创建。
此时，针对事件将?attach?增加到网格，如清单 13 所示。当?onCurrentCellChanged?事件发生时，它获取网格中的数据并更新单元格内容。在完成单元格编辑之前，调用?onBeforeCellEditorDestroy?事件。然后事件触发，将会获取单元格数据，但这一次要确定第一个字符是等号。如果是，则采用?eval?方法来计算输入的表达式。
注意：?不要在生产环境中使用此代码。它会使您的系统完全开放给各类注入攻击。始终要注意净化您的数据。
最后，到网格的引用将保存以供其他方法使用。
清单 13. 向网格增加事件处理
?
可向项目添加很多内容，比如：
结束语
虽然这一 web 应用程序还不能用于生产环境，但它演示了如何将多项技术组合在一起。采用 JavaScript、语义 HTML、JSON 对象来实现服务器数异步传输据，最重要的是，有很多现成的 jQuery 插件可供使用，这就大大简化了您的工作。
