編輯器中的階層式列表
在數據密集型應用程式中，使用類別和子類別是很常見的操作。無論是對於程式設計師（即您！）在數據操作方面，還是對於終端使用者對數據的概念模型，這都很有用。使用 Editor 的 select 選項可以輕鬆處理類別 - 只需用資料填充它，終端使用者就可以從中選擇。子類別需要更多互動，因為可用的選項取決於使用者為主要類別選擇的值。儘管如此，在 Editor 中仍然相當簡單！
在這篇文章中，我將示範如何建立以下表格，其中可以根據洲來縮小國家範圍
| 姓名 | 地點 | |
|---|---|---|
| 洲 | 國家 | |
客戶端
在客戶端，我們像平常一樣設定 Editor 實例，並且只需要額外一行程式碼，就可以讓選項根據所選的洲值進行更新 - 使用 dependent() 方法
editor.dependent( 'continent', '/api/countries' );
dependent() 的參考文件起初可能有點令人生畏，因為它有許多可用的選項：它可以控制表單中欄位的可見性、值、選項等。在這篇文章中，我們將只專注於讓它通過 Ajax 呼叫取得選項。
在上面的程式碼中，我們使用了兩個參數
- 軟體應監聽變更的欄位名稱（
fields.name）。 - 檢測到變更時應從其請求資料的 URL。
不希望陷入行銷術語 - 是的，這真的是客戶端所需的一切。它基本上為您設定了一個 change 監聽器，並在需要時向伺服器發出 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
]
] );
此處使用 Editor 提供的資料庫函式庫中的 select 方法 - 它只是從 country 表格中取得我們需要的兩個欄位，並根據提交的資料中正確的 continent 作為條件。
.NET
與 PHP 函式庫一樣，在 .NET 中，我們需要使用 Editor 資料庫函式庫中的 Select 方法查詢資料庫
[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);
}
}
此處，對資料庫進行查詢，然後使用 ExpandoObjects 建立 JSON 結構。這些對於在執行時快速定義屬性很有用，但如果您願意，也可以建立一個簡單的類別。
結論
希望這篇文章提供了一個有用的指南，說明如何以最簡單的形式使用 dependent()。可以大幅擴展實作，以包含多個階層式選取清單、多個獨立的階層式清單，以及根據使用者值選擇顯示和隱藏元素的複雜表單控制。如果您對 dependent() 有其他用途，並且想要分享，請在論壇上發布 - 我們都會從中受益！