本指南示範了一種在 ASP.NET MVC 應用程式中的 JqGrid 中顯示兩個相關資料庫表中的資料的方法。 表已鏈接，但只有 ID 值可用於該關係。
解決方案概述：
此方法涉及修改控制器以以JSON 格式傳回必要的數據，建立輔助函數來格式化JqGrid 的位置數據，使用JqGrid 的beforeProcessing 事件動態設定列選項，以及使用Bootstrap Select2 增強使用者體驗搜尋和過濾。
1。控制器修改：
控制器操作需要從兩個表（例如 Students 和 Locations）檢索數據，並將位置數據包含在 JSON 回應中。
2。伺服器端資料格式化：
輔助函數對於將位置資料轉換為與 JqGrid 的 editoptions.value 和 searchoptions.value 相容的格式至關重要。這通常涉及對位置進行排序並將它們連接為“ID:Value;”。
3。動態 JqGrid 列配置：
在客戶端 JavaScript 程式碼中使用 beforeProcessing 事件根據伺服器的回應動態設定 JqGrid 列選項。 這允許在運行時調整列格式化程式、編輯類型和其他設定。
4。使用 Bootstrap Select2 增強搜尋/過濾：
整合 Bootstrap Select2 以改善下拉清單中的搜尋和篩選功能，與標準選擇元素相比，提供進階搜尋功能和更好的使用者介面。
控制器程式碼範例：
<code class="language-csharp">public class HomeController : Controller
{
// ... other controller actions ...
public JsonResult Students()
{
var students = new List<Student> { /* ... your student data ... */ };
var locations = new List<City> { /* ... your city data ... */ };
var formattedLocations = locations.OrderBy(l => l.CNAME)
.Aggregate("", (current, location) => current + $"{location.CID}:{location.CNAME};");
// Remove trailing semicolon
if (formattedLocations.EndsWith(";"))
{
formattedLocations = formattedLocations.Substring(0, formattedLocations.Length - 1);
}
return Json(new
{
colModelOptions = new
{
CITY = new
{
formatter = "select",
edittype = "select",
editoptions = new { value = formattedLocations },
stype = "select",
searchoptions = new { sopt = new[] { "eq", "ne" }, value = $":Any;{formattedLocations}" }
}
},
rows = students
}, JsonRequestBehavior.AllowGet);
}
}</code>這個例子示範了一個簡化的結構。 調整 Student 和 City 類別和資料檢索以符合您的特定資料庫架構和資料存取方法。 請記得相應地調整客戶端 JqGrid 配置以處理動態提供的 colModelOptions.
以上是如何使用 ASP.NET MVC 動態顯示 JqGrid 中多個資料表的關聯資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
