在数据表中渲染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>"
       }
    }
}

这工作得很好，但是当

divs

的风格和许多标签变得复杂时，维护或更改就变得更加困难。

我确实研究了一些 Razor 的

PartialViews

，因为它似乎是一个不错的选择。将 UI 放在

cshtml

文件中，能够从父级

@Model

传递参数，并在其中使用 C# 根据收到的参数进行渲染。

虽然我能够使用

<partial name=''/>

或

@Html.Partial(...)

在父页面中加载部分视图，但我无法使用

$.get

在 js 中获取其内容并将其返回到数据表的渲染函数中。在这种情况下异步可能不起作用？还是会太慢？

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

Answer 1

我不太熟悉

asp.net

，但我会尽力回答你的问题。

我认为

PartialViews

不会按照您建议的方式工作，因为它们似乎是服务器端代码，并且尝试对表中的每一行执行

GET

请求可能会生成大量服务器请求。

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

columns: [
    { data: 'someField' }
]

第二个选项是使用 JavaScript 在客户端生成 HTML。既然你说它可能很复杂，那么最好有一个返回 HTML 字符串的函数。如果它是大量 HTML，那么您甚至可以将此函数放入单独的文件中并将其导出，以使其更易于管理。您的示例中有几个拼写错误，因此我将在这里修复它们。

Renderer

是一个表属性，你想要的是columns.render。同样，在

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>"
    }
}

Answer 2

我将把这个答案留在这里，因为也可以通过 rowcallback 函数渲染 HTML 元素。我发现行回调函数比列渲染函数更容易使用。但是，如果你做得不正确，它只会将 html 元素显示为字符串。这实际上会在表格列中呈现一个 html 元素：

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

                }
                          
            },

注意：上述代码中的“3”是从零开始的列号。