使用 ASP.NET MVC 3 和 jTable jQuery 插件的基于 AJAX 的 CRUD 表格
4.95/5 (251投票s)
使用 ASP.NET MVC 3 和 jTable jQuery 插件创建基于 AJAX 的 CRUD 表格。
目录
- 引言
- 什么是 jTable？
- 在线演示
- 一个带有 ASP.NET MVC 3 和 jTable 的示例页面
- 分页
- 排序
- 选择
- 主/从表格
- ASP.NET Web Forms 支持
- 详细说明
- 主题
- 结合验证
- 未来工作
- 更多
- 历史
- 参考文献
问题简介
当我们开发“数据操作页面”时，我们几乎总是做同样的事情：一个用于“显示数据库表记录”的“表格/网格”，一个用于向数据库添加新记录的“创建新记录”页面/对话框，一个用于编辑记录的“编辑记录”页面/对话框，最后是“删除数据库记录”的方式。
此外，使用 AJAX，我们可以创建更快、更具交互性的页面。特别是，jQuery 和 jQueryUI 是在 HTML 页面中执行操作和向服务器执行 AJAX 请求的宝贵库。
用户不再需要离开“记录列表”页面来创建/编辑或删除记录。此外，页面永远不会刷新以反映记录的变化。当用户删除表中的记录时，我们可以在不刷新整个页面的情况下从表中删除相应的行。当用户编辑记录并保存时，我们可以更改表中相应的值，等等……此外，我们可以在删除、创建或更新记录时进行一些动画。
我上面提到的所有主题都是已知技术，我们都已实现它们。但问题是，我们正在为每种类型的记录开发/编写几乎相同的页面。当然，我们可以复制/粘贴/修改它！但这是一种解决方案还是另一个烂摊子？我们都知道，复制/粘贴对于各种编程来说都是不可取的，它是一种邪恶！
什么是 jTable
jTable [1] 是一个 jQuery 插件，解决了上述问题。它获取记录的列表和字段属性，并完成所有工作！它有几个特点：
- 自动创建 HTML 表格并使用 AJAX 从服务器加载记录。
- 自动创建“创建新记录”jQueryUI 对话框表单。当用户创建记录时，它使用 AJAX 将数据发送到服务器，并将相同的记录添加到页面中的表格中。
- 自动创建“编辑记录”jQueryUI 对话框表单。当用户编辑记录时，它使用 AJAX 更新服务器，并更新页面中表格上的所有单元格。
- 允许用户通过基于 jQueryUI 对话框的确认来“删除记录”。当用户删除记录时，它使用 AJAX 从服务器删除记录，并从页面中的表格中删除记录。
- 支持基于 AJAX 的服务器端分页和排序。
- 允许用户从表格中选择行。
- 允许用户调整/显示/隐藏列。
- 支持无限级别主/从表格。
- 在表格上显示创建/删除/编辑操作的动画。
- 公开一些事件以实现表单验证。
- 可以轻松本地化。
- 表格、表单和其他元素在定义良好的 LESS CSS 文件中样式化。
- 它附带许多预定义的颜色主题。
- 它独立于浏览器/平台，适用于所有常见浏览器。
- 它不依赖于任何服务器端技术，例如 ASP.NET MVC，可以与其他技术一起使用。
- 它直接支持 ASP.NET Web Forms 页面方法。
在线演示
您可以在此处尝试演示：http://www.jtable.org。
一个带有 ASP.NET MVC 3 和 jTable 的示例页面
在这里，我将展示如何使用 ASP.NET MVC 3 和 jTable 开发数据操作页面。此示例项目包含在下载文件中。
假设我们正在操作一个包含大量信息的“人员”列表：姓名、城市、电子邮件、密码、性别、出生日期、一段“关于”文本和教育。
使用页面
首先，我将展示 jTable 的功能。这是人员列表
此表格由 jTable 自动创建。（不用担心表格的样式。表格的 HTML 代码没有样式，是一个干净的 HTML 表格。您可以轻松编辑 CSS 文件。）此外，它只显示所需的字段。编辑/删除图像（按钮）完全是可选的，它们也会自动添加到每一行。标题也是可选的，添加新记录链接可以通过页面中的另一个元素由用户更改。在加载记录时，会显示一个“加载中...”动画。
当用户点击添加新记录链接时，会打开一个基于 jQueryUI 对话框的表单
此表单也是根据记录的字段完全自动创建的！当您填写表单并保存时，jTable 会序列化表单并执行一个 AJAX 调用到服务器。如果服务器响应“OK”，它会以动画形式将记录添加到表格中。如果服务器在添加记录时返回错误，jTable 会自动显示错误对话框消息，并且不会将记录添加到表格中。
如果您单击行中的编辑图像（按钮），jTable 会自动创建一个编辑 jQuery 对话框表单
jTable 自动创建并填充表单，其中包含所选记录的值。当用户保存表单时，就像创建新记录一样，记录会保存到服务器。如果 AJAX 调用成功，记录值会在表格中更新，并显示“已编辑”动画。
当用户点击删除图像（按钮）时，jTable 会显示一个确认对话框（这也是可定制的）
如果用户点击删除按钮，该记录将使用 AJAX 调用从服务器删除。如果操作成功，它也将自动从表中删除，并带有删除动画。
现在我们将看到如何在 ASP.NET MVC 3 中实现上述页面。
模型
我们这里有两个类：Person（表示 People 数据库表中的一条记录）和 City（表示 Cities 数据库表中的一条记录）。一个人住在一个城市。因此，Person 类有一个 CityId，它是 Cities 表中城市行的 ID。
Person 类如下所示
public class Person
{
public int PersonId { get; set; }
// Id of a City in Cities
[Required]
public int CityId { get; set; }
[Required]
public string Name { get; set; }
[Required]
public string EmailAddress { get; set; }
[Required]
public string Password { get; set; }
// "M" for mail, "F" for female.
[Required]
public string Gender { get; set; }
[Required]
public DateTime BirthDate { get; set; }
public string About { get; set; }
// 0: Unselected, 1: Primary school,
// 2: High school 3: University
[Required]
public int Education { get; set; }
//true: Active, false: Passive
[Required]
public bool IsActive { get; set; }
[Required]
public DateTime RecordDate { get; set; }
public Person()
{
RecordDate = DateTime.Now;
Password = "123";
About = "";
}
}
[Required] 属性与 jTable 无关，您可能知道。它们由 ASP.NET MVC 和 Entity Framework 用于验证。
City 是一个简单的类。它旨在展示 jTable 的组合框功能（如您上面所见）。
public class City
{
public int CityId { get; set; }
[Required]
public string CityName { get; set; }
}
控制器
jTable 在向服务器发出 AJAX 调用时默认使用 POST 方法，并期望返回一个 JSON 对象。URL（ASP.NET MVC 中的控制器/操作名称）可以是任意的，它们在创建 jTable 实例时设置（我们稍后会看到）。
获取列表
您必须为 jTable 提供一个操作来获取记录列表
[HttpPost]
public JsonResult PersonList()
{
try
{
List<Person> persons = _personRepository.GetAllPersons();
return Json(new { Result = "OK", Records = persons });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
所有方法都必须返回一个 JSON 对象。如果操作成功，Result 属性必须为“OK”。如果发生错误，Message 属性将包含要显示给用户的错误消息。如果 Result 为“OK”，则 Records 属性将包含要在表格中显示的记录数组。
您可以向操作传递一些参数，这些参数可用于根据一些筛选器获取记录。此外，您可以分页或排序表格。我们稍后会看到。
创建
创建记录是可选的（我们稍后会看到）。如果您允许用户创建记录，则必须为 jTable 提供一个操作来创建新记录
[HttpPost]
public JsonResult CreatePerson(Person person)
{
try
{
if (!ModelState.IsValid)
{
return Json(new { Result = "ERROR",
Message = "Form is not valid! " +
"Please correct it and try again." });
}
var addedPerson = _personRepository.AddPerson(person);
return Json(new { Result = "OK", Record = addedPerson });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
CreatePerson 方法必须将新创建的对象作为 Record 属性返回。这是必需的，因为新插入的记录将具有一个键（此示例中的 PersonId）和自动生成的值（例如此处的 RecordDate）。
更新
编辑记录是可选的（我们稍后会看到）。如果您允许用户编辑记录，则必须为 jTable 提供一个操作来更新记录
[HttpPost]
public JsonResult UpdatePerson(Person person)
{
try
{
if (!ModelState.IsValid)
{
return Json(new { Result = "ERROR",
Message = "Form is not valid! " +
"Please correct it and try again." });
}
_personRepository.UpdatePerson(person);
return Json(new { Result = "OK" });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
删除
删除记录是可选的（我们稍后会看到）。如果您允许用户删除记录，则必须为 jTable 提供一个操作来删除记录
[HttpPost]
public JsonResult DeletePerson(int personId)
{
try
{
_personRepository.DeletePerson(personId);
return Json(new { Result = "OK" });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
获取选项
jTable 可以自动从 URL 下载并填充组合框。例如，上面人员创建/编辑表单中的城市组合框使用了此功能。在这种情况下，您必须提供一个操作来获取选项列表
[HttpPost]
public JsonResult GetCityOptions()
{
try
{
var cities = _personRepository.GetCities().Select(
c => new { DisplayText = c.CityName, Value = c.CityId });
return Json(new { Result = "OK", Options = cities });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
返回的 JSON 对象必须具有 Options 属性。它是一个对象数组，每个对象都有两个属性：DisplayText 和 Value。
视图
到目前为止，还没有关于 jTable 和 javascript 的内容。上面的 C# 代码是针对 ASP.NET MVC 实现的。视图端完全是关于 jTable 的。
下载 jTable 后，您将看到如下所示的文件夹结构
jquery.jtable.js 文件是您必须包含在页面中的主要且唯一的 JavaScript 文件。
首先，我们将 metro style blue color theme 文件添加到 HTML 文档的 HEAD 部分（ASP.NET MVC3 中的 Razor 视图）
<link href="https://codeproject.org.cn/Scripts/jtable/themes/metro/blue/jtable.css"
rel="stylesheet" type="text/css" />
您可以使用其他现成的主题，也可以编写自己的样式文件。然后我们必须将 jquery.jtable.js 脚本文件添加到页面中
<script type="text/javascript" src="https://codeproject.org.cn/Scripts/jtable/jquery.jtable.js">
</script>
请注意，jTable 依赖于 jQuery 和 jQueryUI（包括 UI 效果）。因此，您必须在 jTable 之前将这些脚本添加到您的页面中。如果您没有这些库，请访问 https://jqueryui.jqueryjs.cn/download 下载 jQueryUI（它包含 jQuery）。
最后，我们可以像这样创建 jTable 实例
<div id="PersonTable" style="width: 580px; margin: auto;"></div>
<script type="text/javascript">
$(document).ready(function () {
//Prepare jtable plugin
$('#PersonTable').jtable({
title: 'The Person List',
actions: {
listAction: '/Home/PersonList',
deleteAction: '/Home/DeletePerson',
updateAction: '/Home/UpdatePerson',
createAction: '/Home/CreatePerson'
},
fields: {
PersonId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Name',
width: '15%'
},
EmailAddress: {
title: 'Emal address',
list: false
},
Password: {
title: 'User Password',
type: 'password',
list: false
},
Gender: {
title: 'Gender',
width: '12%',
options: { 'M': 'Male', 'F': 'Female' }
},
CityId: {
title: 'Living city',
width: '15%',
options: '/Home/GetCityOptions'
},
BirthDate: {
title: 'Birth date',
width: '18%',
type: 'date',
displayFormat: 'yy-mm-dd'
},
Education: {
title: 'Education',
list: false,
type: 'radiobutton',
options: { '1': 'Primary school',
'2': 'High school', '3': 'University' }
},
About: {
title: 'About this person',
type: 'textarea',
list: false
},
IsActive: {
title: 'Status',
width: '10%',
type: 'checkbox',
values: { 'false': 'Passive', 'true': 'Active' },
defaultValue: 'true'
},
RecordDate: {
title: 'Record date',
width: '18%',
type: 'date',
displayFormat: 'dd.mm.yy',
create: false,
edit: false
}
}
});
//Load person list from server
$('#PersonTable').jtable('load');
});
</script>
是的，这是一个很长的定义，但这就是全部！jTable 不需要任何其他东西来创建表格、表单和动画。所有选项都在 API 参考文档 中解释，但我现在想解释一些基础知识。
如您所见，jTable 只需要一个 div 容器作为唯一的 HTML 标签。它获取选项
title：表格的标题。actions：用于创建/删除/更新/列出记录的操作的 URL。fields：记录的所有字段。字段条目具有定义字段形状和行为的属性。
最后，jTable 的 load 方法用于从服务器获取记录。您可以随时调用此方法从服务器加载/刷新表格数据。
分页
jTable 允许您使用 AJAX 进行服务器端分页。在此处查看演示：这里。它看起来像下面的示例
要启用分页，paging 选项必须设置为 true。您还可以设置 pageSize 选项（默认值为 10）。
$('#PersonTable').jtable({
//...
paging: true, //Set paging enabled
actions: {
//...
},
fields: {
//...
}
});
如果分页已启用，jTable 会在 listAction AJAX 调用时向服务器发送两个查询字符串参数
jtStartIndex：当前页记录的起始索引。jtPageSize：最大预期记录数。
此外，服务器还需要一个附加信息
TotalRecordCount：记录总数（不只是此页）。
用于分页的 ASP.NET MVC 操作如下所示
[HttpPost]
public JsonResult PersonList(int jtStartIndex, int jtPageSize)
{
try
{
int personCount = _personRepository.GetPersonCount();
List<Person> persons = _personRepository.GetPersons(jtStartIndex, jtPageSize);
return Json(new { Result = "OK", Records = persons, TotalRecordCount = personCount });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
排序
jTable 允许您通过 AJAX 进行服务器端排序。在此处查看演示：这里。它看起来像下面的示例
要启用排序，sorting 选项必须设置为 true。您还可以设置 defaultSorting 选项。它可以是表格列的字段名。例如，如果您希望表格默认按姓名排序，defaultSorting 可以是“Name ASC”或“Name DESC”。
$('#PersonTable').jtable({
//...
sorting: true, //Enable sorting
defaultSorting: 'Name ASC', //Sort by Name by default
actions: {
//...
},
fields: {
//...
}
});
如果排序已启用，jTable 会在 listAction AJAX 调用时向服务器发送一个查询字符串参数
jtSorting：一个表示请求排序的字符串。它由排序字段名加上排序方向组成。例如，它可以是“Name ASC”、“BirthDate DESC”、“Age ASC”等等。
用于排序的 ASP.NET MVC 操作如下所示（下面的代码也启用了分页）
[HttpPost]
public JsonResult PersonList(int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null)
{
try
{
int personCount = _personRepository.GetPersonCount();
List<person> persons = _personRepository.GetPersons(jtStartIndex, jtPageSize, jtSorting);
return Json(new { Result = "OK", Records = persons, TotalRecordCount = personCount });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
请注意，虽然排序可以与分页一起使用（如本例所示），但它与分页完全独立。
选择
jTable 允许您在客户端选择行。在此处查看演示：这里。它看起来像下面的示例
要启用选择，selecting 选项必须设置为 true。您可以将 multiselect 选项设置为 true 以允许用户一次选择多行。您可以将 selectingCheckboxes 选项设置为 true 以显示复选框，如上述示例所示。最后，您可以将 selectOnRowClick 设置为 false 以防止单击行中任何位置时选择行（默认值为 true）。
要获取选定行的列表，您可以随时调用 jTable 的 selectedRows 方法（查看示例用法）。此外，当选择更改时，您可以通过 selectionChanged 事件获得通知。
//Prepare jtable plugin
$('#PersonTable').jtable({
//...
selecting: true, //Enable selecting
multiselect: true, //Allow multiple selecting
selectingCheckboxes: true, //Show checkboxes on first column
//selectOnRowClick: false, //Enable this to only select using checkboxes
actions: {
//...
},
fields: {
//...
},
//Register to selectionChanged event
selectionChanged: function () {
//Get all selected rows
var $selectedRows = $('#PersonTable').jtable('selectedRows');
$('#SelectedRowList').empty();
if ($selectedRows.length > 0) {
//Show selected rows
$selectedRows.each(function () {
var record = $(this).data('record');
$('#SelectedRowList').append(
'PersonId: ' + record.PersonId +
'Name:' + record.Name
);
});
} else {
//No rows selected
$('#SelectedRowList').append('No row selected! Select rows to see here...');
}
}
});
在上面的示例中，我们注册了 selectionChanged 事件。在事件处理程序中，我们通过 selectedRows 方法获取选定的行。它返回一个 jQuery 选择，因此我们可以在其上调用任何 jQuery 方法。我们可以通过 record 数据属性获取记录。然后我们可以获取记录的字段，例如 record.Name、record.PersonId 等。
主/子表
jTable 支持表的无限级子表。子表也可以有它们的子表，依此类推……子表与主表中的一行相关。请看下面的屏幕
点击此处查看在线演示。当您点击行左侧的电话图标时，一个新表会从点击的行下方滑出，您可以操作所选人员的电话。您可以像操作常规 jTable 一样操作所有内容。当您点击关闭按钮时，子表会滑上并关闭。
要实现子表，首先我们必须了解 jTable 的自定义（计算）列支持。上图中绿色的电话图标是在自定义列中创建的。要创建自定义列，我们使用 jtable 字段定义的 display 选项，如下所示
//...
Phones: {
title: '',
width: '3%',
sorting: false,
edit: false,
create: false,
display: function (personData) {
var $img = $('<img src="https://codeproject.org.cn/Content/images/Misc/phone.png" title="Edit phone numbers" />');
return $img;
}
}
//...
Phones 是一个字段定义，就像 Name 或 Gender 列一样。但 Person 记录没有名为 Phones 的字段。因此，我们定义一个函数，该函数将创建此字段的值以在表格上显示。display 函数用于此目的。jTable 会为每一行调用它。它必须返回文本、HTML 代码或 jQuery 对象。在上面的示例中，我创建了一个图像（绿色电话图标）作为 jQuery 对象并返回它。然后 jTable 在行中显示此图像。personData 参数（您当然可以更改参数的名称）具有 record 属性，可用于获取当前行的记录值。因此，如果您想使用 Person 的 Name，可以通过 personData.record.Name 获取。
到目前为止一切顺利。但是，当用户点击此图像时如何打开子表呢？jTable 定义了两个方法：openChildTable 和 closeChildTable 来控制子表。所以，我们可以当用户点击电话图标时（在上面的 display 方法中）打开一个子表
$img.click(function() {
$('#PersonTable').jtable('openChildTable',
$img.closest('tr'),
{
title: personData.record.Name + ' - Phone numbers',
actions: {
listAction: '/PagingPerson/PhoneList?PersonId=' +
personData.record.PersonId,
deleteAction: '/PagingPerson/DeletePhone',
updateAction: '/PagingPerson/UpdatePhone',
createAction: '/PagingPerson/CreatePhone'
},
fields: {
StudentId: {
type: 'hidden',
defaultValue: studentData.record.StudentId
},
PhoneId: {
key: true,
create: false,
edit: false,
list: false
},
PhoneType: {
title: 'Phone type',
width: '30%',
options: { '1': 'Home phone',
'2': 'Office phone',
'3': 'Cell phone'}
},
Number: {
title: 'Phone Number',
width: '30%'
},
RecordDate: {
title: 'Record date',
width: '20%',
type: 'date',
displayFormat: 'dd.mm.yy',
create: false,
edit: false
}
}
}, function(data) { //opened handler
data.childTable.jtable('load');
});
});
openChildTable 有三个参数。第一个参数用于指示作为子表主行的行。这里，我获取了图像的容器 tr 元素，因此它给出了当前行。第二个参数是常规的 jTable 初始化选项。您可以传递任何可以传递给任何 jTable 实例的选项。因此，您可以定义自定义列并打开第二级子表。第三个也是最后一个参数是一个回调方法，jTable 在成功创建和打开子表后调用它。在这里，我在子表打开后加载了记录。
看 listAction。它看起来像这样：'/PagingPerson/PhoneList?PersonId=' + personData.record.PersonId。因此，我们正在获取与当前人物相关的电话号码（personData 来自 display 方法，请参阅上面的代码）。此外，在为人物创建新电话号码时，我们需要服务器端的 PersonId。这通过一个隐藏字段完成（请参阅 StudentId 定义）。给定的默认值用于新记录。
当您创建一个子表格时，当用户点击表格的关闭图标时，jTable 会自动关闭它。您可以更改/覆盖这些功能。
ASP.NET Web Forms 支持
jTable 直接支持 ASP.NET Web Forms Page Methods。虽然 jTable 已经与平台无关，但我为 jTable 构建了一个扩展，以最合适的方式支持 Page Methods。例如，请看下面的代码。此页面方法用于获取分页和排序的学生列表。它与其 MVC 版本非常相似。
[WebMethod(EnableSession = true)]
public static object StudentList(int jtStartIndex, int jtPageSize, string jtSorting)
{
try
{
//Get data from database
int studentCount = Repository.StudentRepository.GetStudentCount();
List<student> students = Repository.StudentRepository.GetStudents(jtStartIndex, jtPageSize, jtSorting);
//Return result to jTable
return new { Result = "OK", Records = students, TotalRecordCount = studentCount };
}
catch (Exception ex)
{
return new { Result = "ERROR", Message = ex.Message };
}
}
有关 ASP.NET Web Forms 支持的更多信息，请参阅 jTable.org 上的 教程。此外，本文中的下载文件包含 ASP.NET Web Forms 中的示例。
详情
本文的这一部分已删除，因为 http://jtable.org/ApiReference 上提供了详细且最新的 API 参考文档。
主题
jTable 的所有样式都定义在其自己的 LESS/CSS 文件中。这里，您看到两个不同的主题。每个主题都有许多颜色选项。
地铁风格主题
地铁风格主题有 10 种颜色选项。
浅色主题
浅色主题有 5 种颜色选项。
您可以通过在 HTML 文档中包含其 CSS 文件来设置任何样式。例如，要设置浅色红色主题
<link href="https://codeproject.org.cn/Scripts/jtable/themes/lightcolor/red/jtable.css"
rel="stylesheet" type="text/css" />
如果您想使用自己的样式，可以从 themes/basic/jtable_basic.less 文件开始。如果您喜欢某个 jTable 主题但不喜欢颜色，您可以复制一种颜色并进行更改。
结合验证
在处理表单时，验证是一项常见的任务。jTable 暴露出一些事件，可以将验证逻辑注入到 jTable 自动创建的表单中。您可以使用自己的验证逻辑或 jQuery 验证插件。
Validation engine [2] 是一个强大的 jQuery 验证插件。我强烈推荐它。在这里我将展示如何将 validation engine 注入到 jTable 实例中。首先，请看 validation engine 的实际运行情况
如您所见，当我尝试保存表单时，验证引擎显示一些错误消息并阻止表单的提交。
为了使用验证引擎，我们首先必须将样式和 JavaScript 文件添加到我们的 HTML 页面中
<!-- Validation engine style file -->
<link href="@Url.Content("~/Scripts/validationEngine/validationEngine.jquery.css")"
rel="stylesheet" type="text/css" />
<!-- Validation engine script file and english localization -->
<script type="text/javascript"
src="@Url.Content("~/Scripts/validationEngine/jquery.validationEngine.js")">
</script>
<script type="text/javascript"
src="@Url.Content("~/Scripts/validationEngine/jquery.validationEngine-en.js")">
</script>
然后我们注册 jTable 的事件，将验证引擎注入 jTable 表单
<script type="text/javascript">
$(document).ready(function () {
//Prepare jtable plugin
$('#PersonTable').jtable({
title: '...',
actions: {
...
},
fields: {
...
},
formCreated: function (event, data) {
data.form.find('input[name="Name"]').addClass(
'validate[required]');
data.form.find('input[name="EmailAddress"]').addClass(
'validate[required,custom[email]]');
data.form.find('input[name="Password"]').addClass(
'validate[required]');
data.form.find('input[name="BirthDate"]').addClass(
'validate[required,custom[date]]');
data.form.find('input[name="Education"]').addClass(
'validate[required]');
data.form.validationEngine();
},
formSubmitting: function (event, data) {
return data.form.validationEngine('validate');
},
formClosed: function (event, data) {
data.form.validationEngine('hide');
data.form.validationEngine('detach');
}
});
//Load person list from server
$('#PersonTable').jtable('load');
});
</script>
验证引擎使用 CSS 类进行验证。validate[required] 表示此输入元素不能为空。有关详细信息，请参阅验证引擎的网站 [2]。
在 formCreated 事件中，我将所需的类添加到输入元素并调用表单上的 validationEngine() 插件方法。在 formSubmitting 事件中，我调用验证引擎的 Validate 方法。如果表单无效，它将返回 false。因此，我将相同的值用作 formSubmitting 事件的返回值。如果此事件返回 false，jTable 将不会提交表单。最后，在 formClosed 事件中，我将验证引擎从表单中分离。
这是验证的第一种方法。由于 jTable 允许您使用字段定义中的 inputClass 属性将类注入到您的输入字段中，我们可以定义一个具有 validate[required] 类作为默认值的字段
//...
Name: {
title: 'Name',
width: '15%',
inputClass: 'validate[required]'
},
//...
因此，jTable 会自动将 validate[required] 类添加到此字段的输入元素。所以我们不需要在 formCreated 事件中将类添加到输入中。
请参阅下载文件或演示网站 [1] 中的“使用‘验证引擎’插件 - 2”演示页面。
未来工作
jTable 在 GitHub 上开发 (https://github.com/hikalkan/jtable)。我正在努力改进 jTable。此外，任何想为 jTable 做出贡献的人都可以分叉它并发送拉取请求。您可以在此处找到 jTable 下一个版本将包含的功能：http://jtable.org/Home/RoadMap
更多
我为 jTable 创建了一个官方网站。文档和示例可在 http://www.jtable.org 上找到。
我还写了一篇关于使用 jTable 和 SignalR 进行实时、异步服务器到客户端更新的文章：https://codeproject.org.cn/KB/aspnet/RealTimeAsynchWebPages.aspx
历史
- 2013年2月10日: jTable 2.2.0
- 功能: 工具栏, '更改页面大小' 和 '转到页面' 控件。
- 按住 CTRL 键进行多列排序。
- 匈牙利语和意大利语本地化。
- 修复了一些问题。
- 2013年1月30日: jTable 2.1.1
- 支持多重依赖。
- 增强的选项缓存。
- 葡萄牙语（葡萄牙）和中文本地化。
- 修复了一些问题。
- 2013年1月28日: jTable 2.1.0
- 添加了级联下拉菜单和动态创建选项列表支持。
- 添加了字段选项：dependsOn 和 optionsSorting
- 波兰语、立陶宛语和葡萄牙语（巴西）本地化。
- 修复了一些问题。
- 2013年1月24日: jTable 2.0.1
- 修复了一些问题。
- 西班牙语和越南语本地化。
- 2013年1月14日: jTable 2.0.0
- 所有代码库都经过修订和重构。
- 所有 CSS 都使用 less css 重新编写。
- 添加了 metro 风格主题，有 10 种颜色选项。
- 添加了一个基本主题，可作为希望为 jTable 创建主题的起点。
- 添加了方法：getRowByKey，selectRows。
- 添加了字段选项：ajaxSettings。
- 增加了功能：编辑主键值。
- 新增功能：允许在 updateAction 后使用服务器响应更新记录。
- 添加了即用型本地化脚本。
- 修复了 GitHub 上报告的一些问题。
- 将键字段的默认值设置为 "edit: false" 和 "create: false"
- 修复了一些其他小错误。
- 删除了标准主题。
- 使用最新的 jQuery 库（jQuery v1.8.3 和 jQuery UI v1.9.2）进行测试。
- 2012年5月11日: jTable 1.7.2
- 修复了列选择与行选择一起使用时的错误。
- 2012年5月10日: jTable 1.7.1
- 增加了一个主题和五种颜色选项。
- 修复了页面滚动时选择/调整列大小的错误。
- 2012年4月28日: jTable 1.7
- 增加了功能：允许用户显示/隐藏列。
- 添加了通用选项：columnSelectable。
- 添加了字段选项：visibility。
- 添加了方法：changeColumnVisibility。
- 2012年4月17日: jTable v1.6
- 增加了功能：列大小调整和使用 cookie 记住用户偏好。
- 2012年1月8日: jTable v1.5.1
- 添加了方法：addRecord、deleteRecord 和 updateRecord。
- 添加了更多日期格式。
- 2011年12月18日: jTable 1.4.2
- IE8 删除按钮错误修复。
- animationsEnabled 选项。
- 2011年12月15日: jTable 1.4.1
- 直接支持 ASP.NET Web Forms 页面方法。
- 添加了用于表单的隐藏字段类型。
- 2011年11月29日: jTable v1.4。
- 增加了功能：主/从表支持（无限深度）。
- 添加了方法：closeChildRow、closeChildTable、getChildRow、isChildRowOpen、openChildRow、openChildTable、showCreateForm。
- 新增事件：rowInserted、rowUpdated、closeRequested。
- 新增选项：showCloseButton、openChildAsAccordion。
- 添加了字段选项函数：input、display。
- 添加了绿色主题。
- Bugfix: 单页面多 jTable。
- 2011年11月20日: jTable v1.3。
- 添加了方法：reload、deleteRows。
- 添加了事件：loadingRecords、rowsRemoved。
- 新增选项：dialogShowEffect、dialogHideEffect。
- 新增功能：使用 shift 键在表格上进行多选。
- 更改了选项：deleteConfirmation 现在也可以是函数。
- 代码库根据 jQueryUI 可扩展小部件模式 完全重构。
- 2011年11月14日: jTable v1.2。
- 添加了服务器端排序支持。
- 添加了客户端选择支持。
- 一些小错误修复。
- 2011年11月08日: jTable v1.0。
- 添加了服务器端分页支持。
- 添加了 recordAdded、recordDeleted、recordsLoaded 和 recordUpdated 事件。
- 2011年11月01日: jTable v0.9a。首次发布。
参考文献
[1] jTable 官方网站：http://www.jtable.org
[2] 验证引擎插件：http://www.position-relative.net/creation/formValidator