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

Question

您好，我使用以下代码在 jquery 中创建了一个 Kendo Grid:

剑道网格:

$('#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
        },
    })

问题:

第一列Note Text 的值将包含 HTML 格式的数据。

下面是一个更好的主意的例子:

现在数据显示为:

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

但我希望数据显示为:

First Name : Nitin
Second Name : Rawat 

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

First Name : Nitin
Second Name : Rawat 

我们将不胜感激任何帮助。

Answer 1

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

来自doc page :

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 Replace <br> with \n

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