J2EE 中可编辑的 (CRUD) Web 表（jQuery Data Tables 和 J2EE 应用程序集成 - 第 II 部分）
4.86/5 (32投票s)
本文解释了如何使用 jQuery DataTables/Editable 和 J2EE 应用程序在 Web 表格中实现完整的数据管理功能（添加、删除、内联编辑）。
引言
在本文中，我将继续介绍如何使用 JQuery 在 J2EE 中实现功能强大的 Web 2.0 表格。在上篇文章“JQuery Data Tables in Java Web Applications”中，我解释了如何轻松地将纯 HTML 表格转换为功能齐全的 Web 2.0 表格。在这里，我将解释如何为 Web 表格添加额外的数据管理功能。下面的示例显示了一个 Web 表格，它允许用户通过内联编辑器编辑单元格。
您可以在此表格中看到许多数据浏览（按关键字过滤、按标题单元格排序、分页、更改每页显示的记录数）和数据管理（内联编辑单元格、删除行、添加新行）的功能。在关于此主题的第一篇文章“JQuery Data Tables in Java Web Applications”中，我解释了如何将基本的 JQuery DataTables 功能集成到 Java Web 表格中。
如果使用 jQuery DataTables 插件，则可以轻松地为 HTML 表格添加搜索、排序、分页、更改每页显示记录数等功能。使用此插件，只需一个 JavaScript 调用即可将上述所有功能添加到网页源代码中的纯 HTML 表格中。
$("myTable").dataTable();
在此示例中，“myTable”是将被 DataTables 插件增强的 HTML 表格的 ID。唯一的要求是在网页源代码中有一个有效的 HTML 表格。
本文的目标是展示如何使用 JQuery DataTables Editable 插件添加额外功能。使用此插件，您可以使用以下代码添加内联编辑、删除行和添加新记录的功能。
$("myTable").dataTable().makeEditable();
此调用将在标准 DataTable 功能的基础上添加数据管理功能。这些功能处理与用户相关的编辑单元格、删除和添加行的完整交互。每次操作时，插件都会向服务器端发送 AJAX 请求，其中包含有关应修改、删除或添加的内容的信息。如果您使用 J2EE 应用程序，则需要实现服务器端功能来执行 DataTables Editable 插件将调用的 ADD、DELETE 和 UPDATE 操作。在本文中，您可以找到有关实现这些数据管理功能的详细说明。
背景
本文将介绍如何将纯表格转换为具有数据管理功能的功能齐全的表格。我将展示如何实现以下功能：
- 使用表格内联编辑器使您可以编辑单元格
- 删除行
- 在表格中添加新记录
这些功能将直接使用 jQuery 在客户端添加。实现这些功能的 jQuery 插件将处理与用户的完整交互，并将 AJAX 请求发送到服务器端。这种方法的优点是 jQuery 插件与服务器端平台无关，即，无论您使用哪种 J2EE 技术（servlets、JSP、JSF、Struts 等），都可以应用它。唯一重要的是您的服务器端组件生成一个有效的 HTML 表格，如下面的示例所示。
<table id="myDataTable">
<thead>
<tr>
<th>ID</th><th>Column 1</th><th>Column 2</th><th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>a</td><td>b</td><td>c</td>
</tr>
<tr>
<td>2</td><td>e</td><td>f</td><td>g</td>
</tr>
</tbody>
</table>
如果您在服务器端生成此类 HTML 表格并将其发送到客户端，则可以使用以下代码行使用 jQuery DataTable 和 jQuery DataTable Editable 插件进行装饰。
$("myDataTable").dataTable().makeEditable();
此调用将为您的表格添加过滤、排序和分页功能（这将由 .dataTables() 调用完成），并且在此功能之上将添加使您能够添加、编辑和删除表格中记录的功能。DataTables Editable 插件将处理所有客户端交互，并根据用户的操作将 AJAX 请求发送到服务器端。下图显示了发送到服务器端的 AJAX 调用的示例。
在图中，您可以看到当需要将信息重新加载到表格中时（例如，当当前页或排序顺序更改时）会调用 CompanyAjaxDataSource。当单元格被编辑时会调用 UpdateData，当行被删除时会调用 DeleteData，当添加新记录时会调用 AddData。您还可以看到在执行 UpdateData AJAX 调用时发送到服务器端的参数。要将插件与服务器端代码集成，您需要创建三个 servlet 来处理 ADD、DELETE 和 UPDATE AJAX 调用。可以处理这些 AJAX 请求的 servlet 示例显示在以下列表中。
@WebServlet("/AddData")
public class AddData extends HttpServlet {
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException { }
}
@WebServlet("/DeleteData")
public class DeleteData extends HttpServlet {
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException { }
}
@WebServlet("/UpdateData")
public class UpdateData extends HttpServlet {
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException { }
}
为了使 DataTables Editable 插件能够正常工作，您需要实现这些类/方法。以下各节将详细说明如何实现这些功能中的每一个。
Using the Code
起点是创建一个生成纯 HTML 表格的 J2EE 应用程序。本示例将使用一个简单的 JSP 页面来生成 HTML 表格中的公司列表。然后，您需要将 DataTables 插件应用于该表格以启用添加基本数据表增强功能。这是关于如何使用 jQuery DataTables 增强 J2EE 应用程序的系列文章中的第二篇，它不会解释如何添加基本的 DataTables 功能。本文的重点将仅放在数据管理功能上。如果您尚未阅读前一篇文章 **jQuery Data Tables and J2EE applications integration**，我建议您先阅读该文章，因为它解释了如何将 DataTables 插件与 J2EE 应用程序集成。本文将假设已实现 jQuery DataTables 插件的集成代码，并且此处仅解释集成 DataTables Editable 插件所需的代码。
本节解释了以下功能的实现：
- 在表格中显示数据，包括需要在
DataTables集成中进行的一些更改 - 使用内联
jEditable插件编辑单元格 - 删除表格行
- 向表格添加新记录
以下各节解释了如何实现这些功能。
安装
如上所述，此代码的先决条件是您已将 jQuery DataTable 插件集成到 Java 应用程序中。您可以在此处找到详细说明：JQuery Data Tables in Java Web Applications，但我将在本文中包含简要说明。
此外，在本文中，我将描述标准 DataTables 集成与 CRUD 模式下的 DataTables 集成之间的主要区别。如果要更新和删除行，则需要一些信息来告知插件行的 ID。此 ID 将被发送到服务器端，以便确定要更新/删除的记录。
jQuery DataTables 插件在两种主要模式下运行：
- 客户端处理模式，其中表格中的所有信息都放在表格的
<TBODY>中，在这种情况下，所有处理都在浏览器中的 JavaScript 代码中完成。这是更快的模式，但如果表格中有大量记录，可能会导致性能问题。 - 服务器端处理模式，您需要在服务器端实现所有功能，并且 jQuery
DataTables插件将提供用户界面并发送 AJAX 请求到服务器。如果您只想将最少的数据集发送到浏览器，请使用此模式。
在客户端处理模式下，表格在服务器端生成（在某个 JSP 页面中），并且每条记录的 ID 应放置在 <TR> 元素的 ID 属性中。生成此表格的 JSP 代码的一部分显示在下面的示例中。
<table id="companies">
<thead>
<tr>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
<% for(Company c: DataRepository.GetCompanies()){ %>
<tr id="<%=c.getId()%>">
<td><%=c.getName()%></td>
<td><%=c.getAddress()%></td>
<td><%=c.getTown()%></td>
</tr>
<% } %>
</tbody>
</table>
每次用户编辑或删除某行/单元格时，插件将获取此属性并将其作为 ID 发送。
在服务器端处理模式下，只将一个纯表格模板作为 HTML 返回，并在页面加载时通过 AJAX 调用动态填充。下面的列表显示了纯表格模板的示例。
<table id="companies">
<thead>
<tr>
<th>ID</th>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
在这种情况下，表格体中没有生成任何内容，行将由 DataTables 插件动态加载。在这种情况下，记录的 ID 放在第一列（此列通常在 DataTables 配置中隐藏）。在本文中可下载的代码示例中，您可以找到一个集成在服务器端处理模式下的表格。
有关将 DataTables 与 Java Web 应用程序集成的更多详细信息，请参阅 JQuery Data Tables in Java Web Applications 文章。
编辑单元格
单元格内容使用 jEditable 内联编辑器进行编辑，并使用 jQuery validation 插件实现验证。因此，这些脚本应包含在使用可编辑数据表插件的 HTML 页面的 head 部分。
上面的示例显示了如何将数据表/可编辑插件应用于没有参数的表格。在默认模式下，表格中的每个单元格都会被一个可用于编辑的文本框替换。当用户完成编辑时，将向服务器发送 AJAX 请求。
可以自定义应用于列的编辑器。下面的示例显示了如何更改更新单元格时调用的服务器端页面的 URL，以及如何在不同列中使用不同的编辑器。
$('#myDataTable').dataTable().makeEditable({
"sUpdateURL": "/Company/UpdateCompanyData"
"aoColumns": [
{
//Empty object is used for the default editable settings
},
null,//null for read-only columns
{
indicator: 'Saving...',
tooltip: 'Click to select town',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
data: "{'London':'London','Liverpool':'Liverpool','Portsmouth':
'Portsmouth','Edinburgh':'Edinburgh', 'Blackburn':'Blackburn',
'Kent':'Kent','Essex':'Essex','Oxon':'Oxon','Lothian':'Lothian',
'West Sussex':'West Sussex','Lanarkshire':'Lanarkshire',
'Birmingham':'Birmingham','East Sussex':'East Sussex','Surrey':'Surrey'}"
}
]
});
aoColumns 数组的每个元素都定义了一个将在表格的一列中使用的编辑器。在上面的示例中，第一个列设置为一个空对象，第二个列设置为 null（以使第二列只读），第三列使用下拉列表进行编辑。
无论您使用哪种配置，DataTables Editable 插件都会向服务器端发送相同格式的 AJAX 请求。AJAX 请求发送以下信息：
id- 行的 ID，取自围绕已编辑单元格的<tr>标签的ID属性。使用此值查找应更新的记录。value- 在单元格中输入的值。此值应写入公司记录。columnName- 列的名称（例如，在列标题中找到的文本）。您可以使用此信息来确定应更新哪个属性。rowId- 表格的行 ID。如果每页显示 10 行，则此值将介于 0 到 9 之间。columnPosition- 列值的位置，从 0 到您在表格中看到的列数 - 1。不计算隐藏列。如果列名可以动态更改，则可以使用此值代替列名来标识应更新的属性。columnId- 列的 ID，从 0 到总列数 - 1。计算隐藏列。如果表格中有隐藏列（无论是初始隐藏还是动态隐藏），则可以使用此值代替列名来标识应更新的属性。您应该使用columnId而不是columnPosition。
您还需要一个 servlet 来接受上述请求，接收插件发送的信息，更新实际数据，并返回响应。本示例使用的 servlet 代码在此处显示。
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
//int columnId = Integer.parseInt(request.getParameter("columnId"));
int columnPosition = Integer.parseInt(request.getParameter("columnPosition"));
//int rowId = Integer.parseInt(request.getParameter("rowId"));
String value = request.getParameter("value");
//String columnName = request.getParameter("columnName");
for(Company company: DataRepository.GetCompanies())
{
if(company.getId()==id)
{
switch (columnPosition)
{
case 0:
company.setName(value);
break;
case 1:
company.setAddress(value);
break;
case 2:
company.setTown(value);
break;
default:
break;
}
response.getWriter().print(value);
return;
}
}
response.getWriter().print("Error - company cannot be found");
}
该 servlet 读取应更新的记录的 ID、用于确定要更新的对象属性的列以及应设置的值。如果未返回任何内容，插件将假定记录已在服务器端成功更新。返回的任何其他消息都将显示为错误消息，并且已更新的单元格将恢复为原始值。
删除行
DataTables Editable 插件允许用户选择和删除表格中的行。您需要做的第一件事是将一个用于删除行的纯 HTML 按钮放在表单的某个位置。此按钮的示例显示在以下列表中。
<button id="btnDeleteRow">Delete selected company</button>
唯一的要求是将按钮的 ID 设置为值 btnDeleteRow（此 ID 由 DataTables Editable 插件用于添加删除处理程序到按钮）。DataTables Editable 插件会初始禁用该按钮，当用户选择表格中的一行时，该按钮将再次启用。如果取消选择一行，则按钮将被禁用。如果按下删除按钮而一行被选中，DataTables Editable 插件将获取所选行的 ID 并向服务器端发送 AJAX 请求。AJAX 请求有一个参数，即应删除的记录的 ID，如下图所示。
处理此删除请求的 servlet 显示在以下列表中。
protected void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
for(Company c: DataRepository.GetCompanies())
{
if(c.getId()==id)
{
DataRepository.GetCompanies().remove(c);
return;
}
}
response.getWriter().print("Company cannot be found");
}
此 servlet 获取应删除的记录的 ID，并将其从集合中删除。如果未返回任何内容，DataTables Editable 插件将假定删除成功，并且所选行将从表格中删除。servlet 返回的任何文本都将被识别为错误消息，显示给用户，并且删除操作将被中止。
上面示例中使用的 DataTables Editable 初始化调用不需要任何参数。但是，如果您愿意，可以自定义删除功能的行为，如下面的示例所示。
$('#myDataTable').dataTable().makeEditable({
sDeleteHttpMethod: "GET",
sDeleteURL: "/Company/DeleteCompany",
sDeleteRowButtonId: "btnDeleteCompany",
});
此调用设置将用于 AJAX 删除调用的 HTTP 方法（例如，“POST”、“GET”、“DELETE”）、将调用的 URL 以及应用于删除的按钮的 ID（如果您不想为删除按钮设置默认 ID，或者如果您在同一页面上有两个表格有两个删除按钮，则此功能很有用，例如在 live demo site 上）。
添加记录
要启用添加新记录，您需要在客户端添加一些项目。在 DataTables Editable 插件中，新行是使用您需要定义的自定义对话框添加的。下图显示了此对话框。
添加新记录的表单将始终是自定义的，因为它将取决于您在添加时要输入的字段、要用于输入数据的元素类型（文本框、下拉列表、复选框等）、必需字段以及设计。因此，我将由您来定义应使用哪个表单来添加新记录。但是，这并不是一项复杂的任务，因为您唯一需要添加的是用于添加新记录的纯 HTML 按钮，以及一个将用作添加新记录模板的纯空表单。以下列表显示了在此示例中添加的纯 HTML 元素的示例。
<button id="btnAddNewRow">Add new company...</button>
<form id="formAddNewRow" action="#" title="Add new company">
<input type="hidden" id="id" name="id" value="-1" rel="0" />
<label for="name">Name</label><input type="text"
name="name" id="name" class="required" rel="1" />
<br />
<label for="name">Address</label>
<input type="text" name="address" id="address" rel="2" />
<br />
<label for="name">Postcode</label>
<input type="text" name="postcode" id="postcode"/>
<br />
<label for="name">Town</label>
<input type="text" name="town" id="town" rel="3"/>
<br />
<label for="name">Country</label>
<select name="country" id="country">
<option value="1">Serbia</option>
<option value="2">France</option>
<option value="3">Italy</option>
</select>
<br />
<button id="btnAddNewRowOk">Add</button>
<button id="btnAddNewRowCancel">Cancel</button>
</form>
与删除功能类似，应放置一个用于添加新记录的按钮 - 此按钮应具有 ID “btnAddNewRow”。添加新记录的表单应具有 ID “formAddNewRow”，并且应具有OK 和Cancel 按钮，ID 分别为“btnAddNewRowOk”和“btnAddNewRowCancel”。DataTables Editable 插件将按 ID 查找新行添加按钮，为打开对话框中的表单附加事件处理程序，并为提交和取消添加新记录的OK 和Cancel 按钮附加事件处理程序。您可以将任何输入字段放在表单中 - 在表单中输入的所有值都将发布到服务器。下图显示了将发送到服务器端的 AJAX 调用。
您可以看到所有输入字段的值都已发送到服务器端。在服务器端，您需要一个 servlet 来处理此 AJAX 调用并添加一条新记录。处理 AJAX 调用的 servlet 方法的代码显示在以下列表中。
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
String address = request.getParameter("address");
String town = request.getParameter("town");
int country = Integer.parseInt(request.getParameter("country"));
Company c = new Company(name, address, town, country);
DataRepository.GetCompanies().add(c);
response.getWriter().print(c.getId());
}
此代码获取 AJAX 调用中发送的参数，并创建和添加新的公司记录。该方法必须返回新记录的 ID，因为插件将此值设置为表格中添加行的 ID。
AJAX 调用完成后，DataTables Editable 插件会将新行添加到表格中。添加到表格列中的值是通过表单元素中的 rel 属性进行映射的。您可以看到元素 id、Name、Address 和 Town 具有 rel 属性 0、1、2 和 3 - 这些值将用于将新记录映射到表格中的列。
与前面一样，可以通过传递给 makeEditable() 函数的参数来配置添加行为。下面的列表显示了一个示例。
$('#myDataTable').dataTable().makeEditable({
sAddNewRowFormId: "formAddNewCompany",
sAddNewRowButtonId: "btnAddNewCompany",
sAddNewRowOkButtonId: "btnAddNewCompanyOk",
sAddNewRowCancelButtonId: "btnAddNewCompanyCancel",
sAddURL: "/Company/AddNewCompany",
sAddHttpMethod: "POST",
});
在此示例中，我们更改了添加新记录的表单的默认 ID、Add 按钮、添加新记录弹出窗口中使用的OK/Cancel 按钮、应调用以添加新行的 URL，以及在 AJAX 调用中应使用的 HTTP 方法。
结论
本文介绍了如何创建一个功能齐全的客户端 Web 表格，使客户端能够执行所有重要的数据管理操作（创建新记录、删除记录、内联编辑单元格等）。您可以将此客户端代码与接受来自客户端的 AJAX 调用的 Java Web 应用程序集成。
我相信本文可以帮助您使用 jQuery 插件创建有效的用户界面。
历史
- 2012 年 4 月 10 日：初始版本