系列文章 1 向您介绍了 JQM.Show，我们创建了医生模型及其特征。我们还查看了 JQM.Show 为 HMS 应用程序生成的代码。文章 2 探讨了医院模型的定义以及我们如何使用相同的 RAD 工具创建它。在我们详细讨论了代码和各自的后端操作以及我们的模型之后。现在我们将使用 JQM.Show 创建患者模型，但我们不会深入研究代码。原因是避免重复。

患者模型基于 Tab 方法开发。每个患者大约有 16 个字段，我们想节省空间，因此我们将 UI 分成不同的选项卡。每个患者的选项卡将包括它们的输入控件：

1. 详细信息（患者姓名、街道地址 1、街道地址 2、城市、邮政编码、手机、电子邮件地址）

2. 病情（疾病、诊断日期、病情）

3. 医院（医院名称、病房号、主治医生）

4. 近亲（姓名、手机、电子邮件地址）

本文的图 1，我们的家庭树，详细介绍了如何创建选项卡导航将大型表单分成多个部分，请参阅该文章了解更多详情。

让我们根据我们将用于创建它的信息，看看**患者**UI。

图 1：患者列表（显示 Web 应用中已捕获的患者，如我们所定义的）

对于每个患者，我们可以在右侧的气泡计数上看到联系方式、医院名称和主治医生以及病情。

图 2：患者详细信息（用于添加患者和其他详细信息的屏幕）

图 3：患者病情（患者病情的详细信息，例如疾病、诊断日期和病情）

图 4：患者医院（此患者的医院、病房号和主治医生信息）

如您所见，医院名称和主治医生是下拉列表，它们基于并从已捕获的医院和医生加载。在患者屏幕出现之前，系统会读取现有的医院和医生，并将它们加载到下拉列表中。

图 5：患者近亲（如果我们想联系某位家属关于该患者的信息）

图 6：患者报告（报告所有可用患者并导出到 Excel 的屏幕）

图 7：患者医院关系（每个医院的患者）

图 8：患者医生关系（每个医生的患者）

使用代码

1. 启动 JQM.Show 并打开您创建的 HMS 项目。它看起来应该像这样……（当然，包含您的详细信息）

3. 创建一个患者模型，如下图所示。它应该看起来像……

请注意我们指定的导航栏项目：

Details;Sickness;Hospital;Next of Kin.

我们将输入控件分成这些不同的选项卡，以便用户轻松输入屏幕，如图 2 所示。

4. 为此模型创建字段，单击“下一步”后，选择新字段并键入这些字段名称

Patient Name;Street Address 1;Street Address 2;City;Postal Code;Mobile Phone;Email Address;Disease;Date Diagnosed;Condition;Hospital Name;Ward Number;Attending Doctor;Nok Full Name;Nok Mobile Phone;Nok Email Address

字段将被添加到模型中。我们需要自定义字段，例如，医院名称链接到可用医院，以及将医生链接到患者。

5. 让我们看一下每个字段的定义，您应该将每个字段定义为类似以下内容。在第 2 篇文章中，我向您展示了如何为模型创建每个字段。您可以使用字段向导键入所有字段名称，然后稍后自定义每个字段。

5.1 患者姓名（这是患者模型的主键）

5.2 街道地址 1

5.3. 街道地址 2

5.4 城市

5.5 邮政编码

5.6 手机

5.7. 电子邮件地址

5.8. 疾病

5.9 诊断日期

5.10 病情

5.11 医院名称

医院名称是从医院下拉列表中派生的，因此在选项中指定数据源和数据字段以建立关系。

5.12 病房号

5.13 主治医生

主治医生也来自可用医生列表，因此在选项字段中定义数据源和数据字段。

5.14 近亲姓名

5.15 近亲手机

5.16 近亲电子邮件地址

就是这样。您已为 HMS Web 应用定义了患者模型。现在是时候将您的应用程序编译成 Web 应用了。在第 2 篇文章中，我向您展示了如何快速创建您的应用程序。在 HMS 应用屏幕上，单击“创建”按钮，让 JQM.Show 为您的 HMS Web 应用创建源代码和所有 HTML 定义。

恭喜！您刚刚创建了您的第一个 CRUD JQM.Show JQuery Mobile Web 应用。

登录您的应用后，您应该会看到这个启动板。

单击“报告”按钮将带您访问可以生成和导出到 Excel 的每个模型的各种报告。

请查看 JQM.Show 根据我在附件中的参数为我的 HMS 示例生成的完整**HTML 定义**。

对于所有应用程序的 JavaScript 源代码，主要的区别在于 CRUD 操作取决于后端，但其他一切基本相同。

关注点

在我的项目中，为了学习 JQuery Mobile，了解如何将其用于 CRUD 操作，我最终开发了一个 RAD 应用程序，可以安装在 Android 设备上，并用于开发基本的 CRUD 应用。我的目标是让不同的后端框架能够处理所有 CRUD 操作。附件中是我迄今为止掌握的三个后端：WebSQL、LocalStorage 和通过 PHP 的 JSON。下一篇文章将是 XML，然后是 IndexedDB。

有了这个 HMS，我决定展示 JQM.Show 的所有功能，但之前的文章逐步汇集了这一过程的每个练习。JQuery Mobile 的 XML 版本 CRUD 应用将与 JSON 版本几乎相同，但有两个 JavaScript 文件被添加来粘合 JQuery Mobile 在该实例中的魔力。IndexedDB，虽然是一个非常容易遵循的框架，但也给我带来了一些挑战。我就是无法让 d3 图表正常工作，当遇到这个问题时，我会进一步研究。祝您使用愉快。

附注：我发现使用 split 函数如下……不起作用

PatientRec.PatientName = PatientRec.PatientName.split(' ').join('-');

不得不先定义一个变量然后分割它，再重新赋值，但我仍然不确定为什么。