在DataTable中渲染HTML内容

Question

我正在 asp.net core razor 页面中使用 js 在 datatable 中加载服务器响应。由于数据/UI 很复杂，我需要根据每个表格单元格中的当前值呈现不同的布局。

Datatable 支持每个单元格的 renderer 函数，所以我可以有类似的东西：

...
"data":"somefield",
"renderer":function(data,type,row,meta){
       if (data.someId)=="someValue"{
          return "<div... some label with somValue</div>"
       }else{
           return "<div... some label without value</div>"
       }
    }
}

这工作得很好，但是当 div 的样式和许多标签变得复杂时，它变得更难维护或改变。

我确实研究了一点 Razor 的 PartialViews，因为它看起来是一个不错的选择。将 UI 放在 cshtml 文件中，能够从父 @Model 传递参数，并在其中使用 C# 根据收到的参数进行渲染。

虽然我可以使用 或 @Html.Partial(...) 在父页面中加载部分视图无法使用 $.get 在 js 中获取其内容并将其返回到数据表的渲染函数中。在这种情况下异步可能不起作用？还是会太慢？

我的问题是：处理这种情况更好的方法是什么？也许片面的观点不是正确的方法。我正在寻找一种轻松维护/更改单元格内容的方法。谢谢您的宝贵时间。

Answer 1

我将在此处留下此答案，因为也可以通过RowCallback函数渲染HTML元素。我发现RowCallback功能比列渲染函数更容易使用。但是，如果您不正确地执行操作，它将仅将HTML元素显示为字符串。这实际上将在表列中渲染HTML元素：

"rowCallback": function (row, data, index) {
                
                if (data['TicketType'] === "2") {
                    $('td:eq(3)', row).html('<img src=\"...">');

                }
                          
            },

注意：上面代码中的“ 3”是基于零的列号。

Answer 2

我不太熟悉 asp.net 但我会尽力回答你的问题。

我认为 PartialViews 不会按照您建议的方式工作，因为它们似乎是服务器端代码，并尝试对中的每一行执行 GET 请求您的表可能会生成大量服务器请求。

我认为你有几个潜在的解决方案。首先是循环访问服务器上的数据，并为每个符合条件的属性生成部分视图并将其分配给该属性。然后返回数据数组，其中每行中的一个属性是 HTML 块。正如我所说，我没有使用这种语言的经验，因此我很难提供代码示例，但我希望您能理解我想说的内容。然后在 DataTables 中，您只需要输出值即可。

columns: [
    { data: 'someField' }
]

第二个选项是使用 JavaScript 在客户端上生成 HTML。既然你说它可能很复杂，那么最好有一个返回 HTML 字符串的函数。如果它是大量 HTML，那么您甚至可以将此函数放入单独的文件中并将其导出，以使其更易于管理。您的示例中有几个拼写错误，因此我将在这里修复它们。 Renderer 是一个表属性，您想要的是 columns.render< /a>.同样，在 render 函数中，data 参数引用上面一行中定义的 data 属性。如果您想引用不同的属性，请使用 row 参数。

columns: [
    {
        data: 'someField',
        render: (data, type, row) => renderMyData(data, row)
    }
]

function renderMyData(data, row) {
    if (row.someId == "someValue") {
        return "<div...> some label with somValue</div>"
    } else {
        return "<div...> some label without value</div>"
    }
}