JsGrid суммирует два поля (базы данных) и показывает результат в сетке - PullRequest
Новая
       9

JsGrid суммирует два поля (базы данных) и показывает результат в сетке

0 голосов
/ 24 мая 2018

У меня есть jsGrid, который создается с использованием результата JSON из запроса к базе данных.База данных возвращает поля Amount1 и Amount2 (например).

Я хочу суммировать их с полями, чтобы создать новое поле, которое будет показано в сетке.Что-то вроде: 

   fields: [{
               name: "Amount1",
               type: "text",
               title: "bla",
               width: 45
           },
           {
               name: "Amount2",
               type: "text",
               title: "blabla",
               width: 60 
           },
           {
               name: "Sum",
               type: "text"
           }, 
           {
               itemTemplate: function(Sum) {
                   return Amount1.value + Amount2.value {
                       someformatting
                   };
               },

Как мне этого добиться?

1 Ответ

0 голосов
/ 24 мая 2018

Как мне этого добиться?

Внутри функции itemTemplate есть два параметра value и item.

  • itemTemplate - это функция для создания содержимого ячейки.Он должен возвращать разметку в виде строки, DomNode или jQueryElement.Сигнатура функции: функция (значение, элемент) , где значение - это значение свойства столбца элемента данных, а элемент - элемент данных строки.

Вы можете получить сумму, используя item.Amount1+item.Amount2

DEMO 

$("#jsGrid").jsGrid({
  width: "100%",
  
  data: [{
    Amount1: 10,
    Amount2: 12
  }, {
    Amount1: 156,
    Amount2: 125
  }, {
    Amount1: 101,
    Amount2: 122
  }],
  fields: [{
    width: 80,
    align:'center',
    name: "Amount1",
    type: "number"
  }, {
    width: 80,
    align:'center',
    name: "Amount2",
    type: "number",
  }, {
    width: 80,
    align:'center',
    headerTemplate: function() {
      return "<th class='jsgrid-header-cell'>Sum</th>";
    },
    itemTemplate: function(value, item) {
      return item.Amount1+item.Amount2;
    }
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="jsGrid"></div>
...