Как напечатать необработанный HTML-код в столбце в jsGrid?

У меня есть данные 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. я хочу распечатать

тестовое задание

without interpreting. Help would be appreciated.

Что вы подразумеваете под без интерпретации?

— 12.07.2019 07:51

Это может помочь: stackoverflow.com/questions/6221067/…

— 12.07.2019 07:57

@shrys тег h1 запускается и отображает жирные символы. Поэтому я хочу избежать этого и распечатать сами теги html.

— 12.07.2019 08:04

@Devashish, есть ли вариант jsGrid?

— 12.07.2019 08:05

@Jezreel Нет, я так не думаю. В конце концов, jsGrid — это просто плагин jQuery, поэтому у него не будет ничего подобного «встроенному». вам придется кое-что исправить самостоятельно. есть решение, которое у меня есть ... но оно работает, если весь ваш «html-код» находится только в одной строке (не в новых строках или в нескольких строках)

— 12.07.2019 09:11

@Jezreel, какую часть приведенного выше кода вы хотите отображать «как есть» внутри поля test? думаю может есть решение..

— 12.07.2019 09:14

javascript html jsgrid

12.07.2019 07:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

948

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

12.07.2019 09:17