Kendo 网格列中的格式化 HTML 数据

Posted 2023-05-07

【中文标题】Kendo 网格列中的格式化 HTML 数据

【英文标题】：Formatted HTML data in Kendo grid column

【发布时间】：2014-04-27 02:44:18

【问题描述】：

您好，我在 jquery 中创建了一个剑道网格，代码如下：

剑道网格：

$('#divFolderNotes').kendoGrid(
        dataSource: data
        batch: true,
        columns: [
                field: "Text", title: "Note Text" ,
                field: "CreatedByDisplayName", width: '190px', title: "Created By" ,
                field: "CreatedDateTime", width: '190px', title: "Created Datetime" ,
                 ],
        scrollable: true,
        sortable: true,
        reorderable: true,
        resizable: true,
        height: 250,
        selectable: "row",
        autoSync: true,
        editable: true,// "inline",
        navigatable: true,
        columnMenu: true,
        pageable: 
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        ,
    )

问题：

第一列注意文本将具有包含 html 格式数据的值。

下面是一个更好的例子：

现在数据显示为：

First Name : Nitin <br/> Second Name : Rawat

但我希望数据显示为：

First Name : Nitin
Second Name : Rawat 

另外，注意文本列将通过内联编辑进行编辑，因此在编辑模式下我也希望数据显示为：

First Name : Nitin
Second Name : Rawat 

我们将不胜感激。

【问题讨论】：

澄清一下，“Note Text”列的值是First Name : Nitin <br/> Second Name : Rawat?

是的，但是对于每一行，它将具有不同的值，可以包含也可以不包含 br 或其他标签。

好的。我找到了解决方案，见下文。

【参考方案1】：

将列的 encoded 属性设置为 false 以禁用自动 HTML 编码。

来自doc page：

如果设置为 true，列值将先进行 HTML 编码 显示。如果设置为 false，则列值将按原样显示。 默认情况下，列值是 HTML 编码的。

更改代码：

$('#divFolderNotes').kendoGrid(
        dataSource: data
        batch: true,
        columns: [
                field: "Text", title: "Note Text", encoded: false ,  #<------ Edit Here
                field: "CreatedByDisplayName", width: '190px', title: "Created By" ,
                field: "CreatedDateTime", width: '190px', title: "Created Datetime" ,
                 ],
        scrollable: true,
        sortable: true,
        reorderable: true,
        resizable: true,
        height: 250,
        selectable: "row",
        autoSync: true,
        editable: true,// "inline",
        navigatable: true,
        columnMenu: true,
        pageable: 
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        ,
    )

编辑：由于在编辑时应该保留换行符，也许你应该用换行符替换<br />标签。这样，它将在表单字段中显示为实际的换行符。这是一个例子：jQuery javascript regex Replace <br> with \n

当用户最初提交数据时这样做可能会更好，但是，如果这不是一个选项，您可以在显示数据时在 JS 中替换它。

【讨论】：

嘿乔纳森感谢您的回答，它解决了显示问题，但在编辑时，它再次显示那些 br 标签。

您使用的是表单域还是文本区域？除非您使用 WYSIWYG 编辑器字段或类似字段，否则浏览器永远不会在您的文本字段中呈现 HTML。

我认为您最好将<br> 替换为\n。这样，新行将呈现在浏览器的表单字段中。

@NitinRawat，我在这两个方面都添加了更多详细信息。

嘿乔纳森感谢您的回复：但是将 更改为 \n 将是一个很大的技巧，因为我必须将其转换回来以进行更新，因为我必须保存HTML 字符串

【参考方案2】：

你可以试试剑道模板。

对于这些请尝试以下链接

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template

http://docs.telerik.com/kendo-ui/api/web/grid

希望这会有所帮助。