编辑器中的级联列表
在数据密集型应用程序中,使用类别和子类别是一种非常普遍的操作。对于程序员(即您!)来说,在数据操作方面,对于最终用户的概念模型来说,它可以很有用。使用 Editor 的 select
选项,类别很容易处理 - 只需用数据填充它,最终用户即可从中进行选择。子类别需要更多的交互操作,因为可用选项取决于用户为主要类别所选择的值。尽管如此,在 Editor 中,它仍然非常直接!
在本文中,我将演示如何创建下表,其中可以按洲缩小国家/地区范围
姓名 | 位置 | |
---|---|---|
洲 | 国家/地区 |
客户端
在客户端,我们设置 Editor 实例 正常 并且只需要使用一行附加代码,就可以根据洲值选择更新选项 - 使用 dependent()
方法
editor.dependent( 'continent', '/api/countries' );
参考文档 dependent()
乍一看可能有点吓人,因为它有许多可用的选项:它可以控制表格中字段的可见性、值、选项等。在这篇文章中,我们准备仅专注于通过 Ajax 调用获取它的选项。
在上面的代码中,我们使用两个参数
- 字段名称 (
fields.name
) 软件应监听其发生变化。 - 检测到更改时它应向其请求数据的 URL。
如果不想陷入市场营销言论,确实,客户端只需要这么多信息。它基本上为您设置一个 更改
监听器,并在需要时向服务器发出一个 Ajax 请求,其中包含有关该表格状态的信息。
服务器端
由于目标是更改 Editor 中的 country
字段的选项,因此服务器需要以以下结构返回 JSON
{
"options": {
"country" [
...
]
}
}
使用此 JSON 结构,您会看到我们还可以定义其他属性,例如其他字段、值等的选项 - 但同样,为了简单起见,此处将仅更改 country
字段选项。
PHP
虽然 Editor PHP 库会为您执行所有标准 CRUD 操作,但它不会自动从表中读取从属字段的信息。不过,我们可以利用 Editor 库中的 Database
类来查询数据库。
include_once( $_SERVER['DOCUMENT_ROOT']."/php/DataTables.php" );
$countries = $db
->select( 'country', ['id as value', 'name as label'], ['continent' => $_REQUEST['values']['continent']] )
->fetchAll();
echo json_encode( [
'options' => [
'country' => $countries
]
] );
此处使用了 select
方法(由 Editor 提供的数据库库提供),它从 country
表中获取我们需要的两个字段,其中条件是由提交的数据中正确的 continent
指定的。
.NET
与 PHP 库类似,在 .NET 中我们需要使用 Select
方法(由 Editor 的数据库库提供)来查询数据库。
[Route("api/countries")]
[HttpPost]
public IHttpActionResult CountryOptions()
{
var request = HttpContext.Current.Request;
var settings = Properties.Settings.Default;
using (var db = new Database(settings.DbType, settings.DbConnection))
{
var query = db.Select(
"country",
new[] {"id as value", "name as label"},
new Dictionary<string, dynamic>(){{"continent", request.Params["values[continent]"]}}
);
dynamic result = new ExpandoObject();
result.options = new ExpandoObject();
result.options.country = query.FetchAll();
return Json(result);
}
}
此处针对数据库进行查询,然后使用 ExpandoObject
's 创建 JSON 结构。这些方法可用于在运行时快捷地定义属性,但您也可以根据需要创建一个简单的类。
结论
希望这篇博文提供了一个有用的指南,展示了如何以最简单的方式之一使用 dependent()
。实现可以得到极大扩展,包括多层级联选择列表、多个独立级联,以及复杂的表单控件(根据用户值选择显示和隐藏元素)。如果您对 dependent()
有其他用途并想要分享,请在论坛中发布内容 - 我们都将从中受益!