Kendo 网格列中的格式化 HTML 数据 [英] Formatted HTML data in Kendo grid column

问题描述

我在 jquery 中创建了一个 Kendo Grid，代码如下:

Hi I have a Kendo Grid created in jquery with following code:

剑道网格:

$('#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 column Note Text will be having values which will be containing HTML formatted data.

下面是一个更好的想法:

For a better idea below is an example:

现在数据显示为:

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

但我希望数据显示为:

First Name : Nitin
Second Name : Rawat 

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

Also , Note Text column will be edited through inline editing so during editing mode also I want the data to be displayed as :

First Name : Nitin
Second Name : Rawat 

任何帮助将不胜感激.

推荐答案

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

Set the encoded attribute of the column to false to disable automatic HTML encoding.

来自文档页面:

如果设置为 true，列值将在它之前被 HTML 编码显示.如果设置为 false，则列值将按原样显示.默认情况下，列值是 HTML 编码的.

If set to true the column value will be HTML-encoded before it is displayed. If set to false the column value will be displayed as is. By default the column value is HTML-encoded.

更改代码:

$('#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 替换
与

Since the line break should be preserved when editing, maybe you should just replace the <br /> tags with a line break character. That way it will show as an actual line break in form fields. Here is an example: jQuery javascript regex Replace <br> with

最好在用户最初提交数据时执行此操作，但是，如果这不是一个选项，您可以在显示数据时在 JS 中替换它.

It might be better to do this when the user submits the data initially, but, if that isn't an option you can replace it in JS when displaying the data.

这篇关于Kendo 网格列中的格式化 HTML 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！