【问题标题】：How to print raw HTML code in a column in jsGrid?如何在 jsGrid 的列中打印原始 HTML 代码？
【发布时间】：2019-07-12 05:38:44
【问题描述】：

我有一个列的 HTML 数据，我想在不解释 HTML 的情况下打印它。他是我的代码

$(function() {

  $("#grid").jsGrid({
    width: "100%",
    height: "400px",
    filtering: true,
    editing: true,
    sorting: true,
    paging: true,
    data: friends,
    fields: [{
        name: "Name",
        type: "text",
        width: 100
      },
      {
        name: "Age",
        type: "number",
        width: 50
      },
      {
        name: "test",
        type: "string",
        autoencode: true,
        width: 50
      },
      countries,
      {
        name: "Cool",
        type: "checkbox",
        width: 40,
        title: "Is Cool",
        sorting: false
      },
      {
        type: "control"
      }
    ]
  })
})

var friends = [{
  Name: "Alan Turing",
  Age: 41,
  Country: 3,
  Cool: true,
  test: "<h1>test</h1>",
}, ];

var countries = {
  name: "Country",
  type: "select",
  items: [{
      Name: "",
      Id: 0
    },
    {
      Name: "United States",
      Id: 1
    },
  ],
  valueField: "Id",
  textField: "Name"
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>

这里的测试列显示html。我要打印

测试

无需解释。帮助将不胜感激。

【问题讨论】：

你说的没有解释是什么意思？
这可能会有所帮助：stackoverflow.com/questions/6221067/…
@shrys h1 标签运行并显示粗体字符。所以我想避免它并打印html标签本身
@Devashish 有没有 jsGrid 选项？
@Jezreel 不，我不这么认为。 jsGrid 归根结底只是一个 jQuery 插件，所以它不会有类似“内置”的东西。你将不得不自己修复一些东西。我有一个解决方案..但如果您的所有“html代码”仅在一行中（不是新行或多行），它就可以工作

标签： javascript html jsgrid

【解决方案1】：

我添加了cellRenderer 并返回了一个html 转义字符串。如果您愿意，您也可以更改itemTemplate 方法，我已将其保留原样。您也可以使用$(document.createElement("div")).text(item).html() 代替String.replace 逻辑。

我在文档中找不到任何内容。

$(function() {

  $("#grid").jsGrid({
    width: "100%",
    height: "400px",
    filtering: true,
    editing: true,
    sorting: true,
    paging: true,
    data: friends,
    fields: [{
        name: "Name",
        type: "text",
        width: 100
      },
      {
        name: "Age",
        type: "number",
        width: 50
      },
      {
        name: "test",
        type: "string",
        width: 50,
        itemTemplate: function(value, item) {
          return "<td>" + value + "</td>";
        },
        cellRenderer: function(item, value) {
          //return "<td>" + $(document.createElement("div")).text(item).html() + "</td>";
          return "<td>" + String(item).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') + "</td>";
        }
      },
      countries,
      {
        name: "Cool",
        type: "checkbox",
        width: 40,
        title: "Is Cool",
        sorting: false
      },
      {
        type: "control"
      }
    ]
  })
})

var friends = [{
  Name: "Alan Turing",
  Age: 41,
  Country: 3,
  Cool: true,
  test: "<h1>test</h1>",
}, ];

var countries = {
  name: "Country",
  type: "select",
  items: [{
      Name: "",
      Id: 0
    },
    {
      Name: "United States",
      Id: 1
    },
  ],
  valueField: "Id",
  textField: "Name"
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>

【讨论】：