javascript - 如何在 jsGrid 的列中打印原始 HTML 代码？

Question

我有一个列的 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。我想在不解释的情况下打印

test

。帮助将不胜感激。

Answer 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>