ASP.NET MVC 3 中 jQuery 网格控件的客户端模板列答案

【问题标题】：client-side templated columns for jQuery grid controls in ASP.NET MVC 3ASP.NET MVC 3 中 jQuery 网格控件的客户端模板列
【发布时间】：2012-02-06 17:00:04
【问题描述】：

我需要在 ASP.NET MVC 应用程序中使用 jQuery 将通过 Ajax 调用获得的 JSON 数据绑定到网格。但是对于每一列，我希望能够定义一个模板（类似于 webforms 中的 GridView 控件中的 TemplateField）。该模板就像一个列定义，可以完全控制该列中显示的内容。哪个网格控件支持这个？我认为 jQGrid、DataTable 和 SlickGrid 是用于客户端数据绑定的流行的基于 jQuery 的网格控件。这些是否支持为网格中的一个或多个列提供自定义模板？我找到了link，它展示了如何将 JSON 数据绑定到客户端的网格，但没有关于如何为每列定义模板的信息。

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-3 jquery-ui jqgrid

【解决方案1】：

在 jqgrid 中，您可以有一个自定义格式化程序函数，您可以在其中返回要在给定列上使用的 html 字符串模板 (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:自定义格式化程序）。在 Datatable（和 jqGrid 也是）中，可以选择从现有元素创建网格。在这种情况下，您可以在 razor 中使用 @foreach 语句创建表格，并在单元格中应用您的模板。

使用 jqgrid 自定义格式化程序和 jquery 模板的示例：

// Your cell template
<script id="MyColumnTemplate" type="text/x-jquery-tmpl">
  <h1>${Name}</h1>
</script>


<script>

// creating the grid passing the formating function
$('#GridView').jqGrid({
    (...)
    colModel: [         
    { name: 'Custom', formatter: myFormatter}, ...],
     });
});

function myFormatter(cellvalue, options, rowObject) {
   var data = { Name: 'Test' };
   // applying the jquery template and returning html output
   return $('#MyColumnTemplate').tmpl(data).html();
}

</script>

【讨论】：

谢谢。我更喜欢第二个选项，即在 razor 中定义模板而不是在 Javascript 中。但是我可以为客户端绑定执行此操作吗？我的意思是我可以将 JSON 对象集合绑定到 Javascript 中的网格，并且仍然能够在 razor 中定义网格模板吗？你能分享一些关于如何做到这一点的例子吗？我花了很长时间寻找这个，但找不到类似的东西。
我不想在 Javascript 中定义我的模板的主要原因是因为它对 HTML 使用字符串连接，很容易出错，而不是定义模板的干净方法。
您可以创建一个仅定义模板的局部视图，在此处使用 razor 并使用 ajax get 调用检索它。但我认为这会更复杂，所以我建议使用自定义格式化程序方法。
您也可以选择手动编辑（使用 jquery）网格的 html 输出。在这种情况下，我会推荐 Datatable，因为它的 html 输出比 jqgrid 干净得多。
我认为您指的是 Ajax 助手（BeginForm 和 ActionLink），而不是 jQuery。我在问我是否可以使用 jQuery 通过 Ajax 调用获取数据，并且仍然能够通过在 razor 中定义网格列模板将数据绑定到网格。如果这是不可能的（可能不可能，因为 razor 有 C# 代码并且它在服务器上执行），那么除了用 Javascript 编写 HTML 之外，我似乎别无选择。我认为有一种叫做 JTemplates 的东西，我不能在这种情况下使用它们吗？