本指南演示了一种在 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中文网其他相关文章！
